:root {
  --bg: #f7f9fc;
  --bg2: #ffffff;
  --bg3: #eef4ff;
  --card: #ffffff;
  --border: #d9e2f0;
  --accent: #00a884;
  --accent2: #6d5dfc;
  --text: #1f2937;
  --muted: #6b7280;
  --ready: #00a884;
  --playing: #d97706;
  --rest: #6366f1;
  --out: #dc2626;
  --danger: #dc2626;
  --teamA: #2563eb;
  --teamB: #e11d48;
  --radius: 14px;
  --radius-sm: 9px
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

body {
  font-family: 'Noto Sans Thai', sans-serif;
  background: linear-gradient(180deg, #eef7ff 0%, #f7f9fc 42%, #ffffff 100%);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6
}

.topbar {
  background: rgba(26, 26, 46, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 100
}

.topbar-logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.5px
}

.topbar-logo span {
  color: var(--text)
}

.sync-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--out);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .12)
}

.sync-dot.ok {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 212, 170, .12)
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(26, 26, 46, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px 14px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  transition: .15s
}

.nav-btn svg {
  width: 22px;
  height: 22px
}

.nav-btn.active {
  color: var(--accent)
}

.page {
  display: none;
  padding: 16px 16px 100px
}

.page.active {
  display: block
}

.card {
  background: rgba(30, 30, 53, .96);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .16)
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  width: 100%;
  text-decoration: none
}

.btn:active {
  transform: scale(.98)
}

.btn-primary {
  background: var(--accent);
  color: #0f0f1a
}

.btn-secondary {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border)
}

.btn-danger {
  background: #ef4444;
  color: #fff
}

.btn-warning {
  background: var(--playing);
  color: #0f0f1a
}

.btn-sm {
  padding: 7px 12px;
  font-size: 13px;
  width: auto;
  border-radius: 7px
}

.btn-group {
  display: flex;
  gap: 8px
}

.btn-group .btn {
  flex: 1
}

.form-group {
  margin-bottom: 12px
}

.form-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600
}

input[type=text],
input[type=number],
input[type=password],
input[type=date],
input[type=datetime-local],
select {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  outline: none;
  transition: .15s
}

input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, .08)
}

select option {
  background: var(--bg2)
}

.help {
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px
}

.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.player-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px
}

.player-row:last-child {
  border-bottom: none
}

.player-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg3);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: var(--accent);
  flex-shrink: 0
}

.player-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.player-avatar.has-image {
  background: rgba(125, 132, 145, .10);
  color: transparent !important;
}

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

.player-name {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.player-provider-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 5px;
  vertical-align: -3px;
  opacity: .68;
  flex: 0 0 auto;
}

.player-provider-badge svg {
  display: block;
  width: 14px;
  height: 14px;
}

.player-provider-email .material-symbols-outlined {
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
  color: var(--muted);
}

.player-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px
}

.player-meta:empty,
.checkin-player-meta:empty,
.ready-player-meta:empty,
.custom-player-meta:empty,
.overview-rank-meta:empty,
.alltime-player-meta:empty {
  display: none;
}

.court-card {
  background: rgba(30, 30, 53, .96);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px
}

.court-header {
  background: var(--bg3);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border)
}

.court-num {
  font-weight: 800;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: .5px
}

.court-header-title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.court-game-timer {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1px;
  white-space: nowrap;
}

.court-game-timer-icon {
  font-size: 13px;
  line-height: 1;
}

.court-body {
  padding: 16px
}

.teams-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center
}

.team-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  container-type: inline-size
}

.team-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
  width: 100%
}

.team-a .team-label {
  color: var(--teamA)
}

.team-b .team-label {
  color: var(--teamB)
}

.player-chip {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  min-height: 39px;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.vs-divider {
  font-weight: 900;
  font-size: 18px;
  color: var(--muted);
  text-align: center
}

.score-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  align-items: center
}

.score-input {
  flex: 1;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  padding: 10px
}

.score-sep {
  color: var(--muted);
  font-size: 20px
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px
}

.stat-card {
  background: rgba(30, 30, 53, .96);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center
}

.stat-num {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent)
}

.stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px
}

.match-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border)
}

.match-row:last-child {
  border-bottom: none
}

.match-teams {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px
}

.match-score {
  font-size: 18px;
  font-weight: 900
}

.match-score .winner {
  color: var(--accent)
}

.match-time {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px
}

.section-heading {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px
}

.court-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 16px
}

.court-opt {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-align: center
}

.court-opt.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 212, 170, .08)
}

.toast {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: all .25s;
  white-space: nowrap;
  z-index: 1600;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis
}

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

.toast.success {
  border-color: var(--accent);
  color: var(--accent)
}

.toast.error {
  border-color: var(--out);
  color: var(--out)
}

.empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--muted)
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 12px
}

.empty p {
  font-size: 14px
}

.status-select {
  box-sizing: border-box;
  height: 28px;
  min-height: 28px;
  padding: 3px 8px 4px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  background: var(--bg3);
  outline: none;
  appearance: none;
  text-align: center;
  text-align-last: center;
  vertical-align: middle;
  min-width: 90px
}

.status-select-shell {
  position: relative;
  box-sizing: border-box;
  width: 90px;
  min-width: 90px;
  height: 28px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.status-select-shell:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, .08);
}

.status-select-label {
  width: 100%;
  height: 100%;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.status-select-shell .status-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0 !important;
}

.sel-ready {
  border-color: var(--ready);
  color: var(--ready);
  background: rgba(0, 212, 170, .08)
}

.sel-playing {
  border-color: var(--playing);
  color: var(--playing);
  background: rgba(245, 158, 11, .08)
}

.sel-rest {
  border-color: var(--rest);
  color: var(--rest);
  background: rgba(99, 102, 241, .08)
}

.sel-out {
  border-color: var(--out);
  color: var(--out);
  background: rgba(239, 68, 68, .08)
}

.btn-reset {
  background: rgba(239, 68, 68, .1);
  color: var(--out);
  border: 1.5px solid rgba(239, 68, 68, .3)
}

.skill-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 2px
}

.player-skill-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 22px;
  max-width: 34px;
  padding: 1px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.15;
  vertical-align: middle;
  white-space: nowrap;
}

.player-skill-level-badge strong {
  font-weight: 900;
}

.player-skill-level-divider {
  display: none;
}

.player-skill-level-name {
  display: none;
}

.player-skill-level-band-1 {
  color: #4338ca;
  background: rgba(99, 102, 241, .10);
  border-color: rgba(99, 102, 241, .22);
}

.player-skill-level-band-2 {
  color: #a16207;
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .24);
}

.player-skill-level-band-3 {
  color: #047857;
  background: rgba(0, 212, 170, .11);
  border-color: rgba(0, 212, 170, .24);
}

.player-competition-gender-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-inline-start: 3px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 50%;
  vertical-align: -4px;
  flex: 0 0 auto;
}

.player-competition-gender-meta .material-symbols-outlined {
  font-size: 13px;
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;
  line-height: 1;
}

.player-competition-gender-meta-male {
  color: var(--teamA);
  background: color-mix(in srgb, var(--teamA) 10%, var(--card));
}

.player-competition-gender-meta-female {
  color: var(--teamB);
  background: color-mix(in srgb, var(--teamB) 10%, var(--card));
}

html[data-theme="dark"] .player-skill-level-band-1 {
  color: #a5b4fc;
  background: rgba(99, 102, 241, .16);
  border-color: rgba(129, 140, 248, .28);
}

html[data-theme="dark"] .player-skill-level-band-2 {
  color: #fcd34d;
  background: rgba(245, 158, 11, .16);
  border-color: rgba(251, 191, 36, .28);
}

html[data-theme="dark"] .player-skill-level-band-3 {
  color: #5eead4;
  background: rgba(0, 212, 170, .15);
  border-color: rgba(45, 212, 191, .28);
}

.lb-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px
}

.lb-row:last-child {
  border-bottom: none
}

.lb-rank {
  font-size: 16px;
  font-weight: 900;
  color: var(--muted);
  width: 28px
}

.lb-rank.gold {
  color: #f59e0b
}

.lb-rank.silver {
  color: #94a3b8
}

.lb-rank.bronze {
  color: #cd7c3e
}

.lb-games {
  margin-left: auto;
  font-weight: 900;
  color: var(--accent);
  font-size: 16px
}

.lb-games small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400
}

.lb-row-late .player-meta {
  padding-right: 4px
}

.court-live-badge {
  background: rgba(245, 158, 11, .15);
  color: var(--playing);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .5px
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--muted);
  font-size: 12px
}

.hidden {
  display: none !important
}

.court-shuttle-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--card)), var(--bg2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
}

.court-shuttle-tab {
  position: relative;
  min-height: 92px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-weight: 800;
  cursor: pointer;
  padding: 14px 42px 14px 16px;
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.court-shuttle-tab:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.court-shuttle-tab.active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: var(--card);
  color: var(--text);
  box-shadow: 0 16px 34px rgba(17, 184, 154, .16);
}

.court-shuttle-tab.active::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: var(--accent);
}

.court-shuttle-tab.active::after {
  content: "กำลังตั้งค่า";
  position: absolute;
  top: 12px;
  right: 12px;
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
}

.court-shuttle-tab-kicker,
.court-shuttle-tab strong,
.court-shuttle-tab small {
  display: block;
}

.court-shuttle-tab-kicker {
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
}

.court-shuttle-tab strong {
  color: inherit;
  font-size: 0.96rem;
}

.court-shuttle-tab small {
  margin-top: 5px;
  max-width: 42ch;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

#settings-panel-courts.show-shuttles > .card {
  display: none;
}

.court-shuttle-panel-shuttles {
  display: none;
}

#settings-panel-courts.show-shuttles .court-shuttle-panel-shuttles {
  display: block;
}

.expense-mode-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.expense-mode-card {
  min-height: 94px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.expense-mode-card strong,
.expense-mode-card span {
  display: block;
}

.expense-mode-card strong {
  font-size: 0.95rem;
  margin-bottom: 5px;
}

.expense-mode-card span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.expense-mode-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}

.expense-preset-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.expense-settings-panel .preset-card.expense-mode-card {
  min-height: 84px;
  font: inherit;
}

.expense-settings-panel .preset-card.expense-mode-card .preset-card-icon span {
  color: inherit;
  font-size: 24px;
  line-height: 1;
}

.expense-settings-panel .preset-card.expense-mode-card .preset-card-title {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
}

.expense-settings-panel .preset-card.expense-mode-card .preset-card-desc {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.expense-settings-panel .preset-detail-panel {
  margin-bottom: 0;
}

.expense-settings-layout {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 16px;
  align-items: start;
}

.expense-settings-subtabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 12px;
}

.expense-settings-subtab {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.expense-settings-subtab:hover {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--border);
}

.expense-settings-subtab.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 800;
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 8%, transparent);
}

.expense-settings-subtab .material-symbols-outlined {
  font-size: 20px;
  transition: transform 0.2s ease;
}

.expense-settings-subtab.active .material-symbols-outlined {
  color: var(--accent);
  transform: scale(1.05);
}

.expense-settings-panel {
  display: none;
}

.expense-settings-panel.active {
  display: block;
}

#expense-settings-panel-shuttles > .card + .card {
  margin-top: 16px;
}

.court-settings-layout {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}

.court-settings-subtabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 12px;
}

.court-settings-subtab {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.court-settings-subtab:hover {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--border);
}

.court-settings-subtab.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 800;
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 8%, transparent);
}

.court-settings-subtab .material-symbols-outlined {
  font-size: 20px;
  transition: transform 0.2s ease;
}

.court-settings-subtab.active .material-symbols-outlined {
  color: var(--accent);
  transform: scale(1.05);
}

.court-settings-content {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.court-settings-panel > .card {
  width: 100%;
  box-sizing: border-box;
}

#court-settings-panel-count > .card {
  max-width: none;
}

#court-settings-panel-profiles > .card {
  max-width: none;
}

.court-profile-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.court-profile-add-btn {
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 9%, transparent);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.court-profile-add-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  transform: translateY(-1px);
}

.court-profile-add-btn .material-symbols-outlined {
  font-size: 18px;
}

#court-profile-add-modal,
#shuttle-profile-add-modal {
  z-index: 1400 !important;
}

#court-profile-add-modal .court-profile-modal-sheet,
#shuttle-profile-add-modal .shuttle-profile-modal-sheet {
  position: relative !important;
  z-index: 1410 !important;
  max-width: 520px !important;
}

.court-settings-panel {
  display: none;
}

.court-settings-panel.active {
  display: block;
}

/* Unified Court Fee Inputs Layout */
.court-rate-hours-group {
  margin-bottom: 0 !important;
}

.expense-court-inputs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.expense-court-inputs-row .form-group {
  margin-bottom: 0;
}

.expense-court-inputs-row .expense-input-wrapper {
  width: 100% !important;
}

.court-rate-hours-group .expense-help {
  margin-top: 8px;
  margin-bottom: 4px;
}

@media (max-width: 600px) {
  .expense-court-inputs-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Court Fee Time Mode Sub-section (Exception Section) */
#court-time-share-section {
  background: rgba(125, 132, 145, .08);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.court-time-share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.court-time-exception-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.court-time-share-summary {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.court-time-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.court-time-chip:hover {
  border-color: var(--accent);
  background: var(--bg2);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 8%, transparent);
}

.court-time-chip-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  color: var(--text);
}

.court-time-chip input {
  width: 60px;
  min-height: 28px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: all 0.15s ease;
}

.court-time-chip input:focus {
  border-color: var(--accent);
  background: var(--bg3);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

.court-time-chip-unit {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.court-time-chip-remove {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: all 0.15s ease;
  opacity: 0.7;
}

.court-time-chip-remove:hover {
  background: var(--out, #ef4444);
  color: #ffffff;
  opacity: 1;
  transform: scale(1.05);
}

.court-time-default-note {
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--bg2);
  font-size: 0.84rem;
  font-weight: 800;
}

.court-time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg2);
}

.court-time-player {
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.court-time-input-wrap input {
  text-align: right;
}

@media (max-width: 640px) {
  .court-settings-layout {
    grid-template-columns: 1fr;
  }

  .court-settings-subtabs {
    position: static;
  }

  .expense-settings-layout {
    grid-template-columns: 1fr;
  }

  .expense-settings-subtabs {
    position: static;
    flex-direction: row;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 16px;
    gap: 6px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .expense-settings-subtabs::-webkit-scrollbar {
    display: none;
  }

  .expense-settings-subtab {
    flex: 1 1 0;
    min-width: fit-content;
    justify-content: center;
    min-height: 38px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    white-space: nowrap;
  }

  /* Compact system settings subtabs to fit mobile screens in one row */
  .system-settings-subtabs {
    margin: -4px 0 14px;
    gap: 4px;
    padding: 2px 0;
    justify-content: space-between;
    overflow-x: visible;
  }

  .system-subtab {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px;
    font-size: 11px;
    min-height: 32px;
    gap: 4px;
    border-radius: 6px;
  }

  .system-subtab .material-symbols-outlined {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 15px;
  }

  .expense-mode-choice {
    grid-template-columns: 1fr;
  }

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

.shuttle-preset-form {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(120px, 0.8fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.shuttle-preset-list {
  display: grid;
  gap: 10px;
}

.shuttle-preset-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg2);
}

.shuttle-preset-card.is-disabled {
  opacity: 0.58;
}

.shuttle-preset-main strong,
.shuttle-preset-main span {
  display: block;
}

.shuttle-preset-main span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
}

.shuttle-preset-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.shuttle-preset-actions button,
.shuttle-default-pill {
  min-height: 32px;
  border-radius: 6px;
  border: 1px solid var(--line);
  padding: 6px 10px;
  background: var(--card);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}

.shuttle-preset-actions button {
  cursor: pointer;
}

.shuttle-preset-actions button.danger {
  color: var(--danger);
}

.shuttle-default-pill {
  display: inline-flex;
  align-items: center;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

.game-shuttle-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.game-shuttle-copy strong,
.game-shuttle-copy span {
  display: block;
}

.game-shuttle-copy strong {
  font-size: 0.9rem;
}

.game-shuttle-copy span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.game-shuttle-count {
  min-width: 0;
  height: 42px;
  text-align: center;
  font-weight: 900;
}

.expense-game-warning {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 12%, var(--card));
  color: var(--text);
  font-weight: 800;
  font-size: 0.86rem;
}

.expense-game-review-list,
.expense-player-shuttle-summary {
  display: grid;
  gap: 10px;
}

.expense-player-shuttle-summary {
  margin-top: 12px;
  gap: 0;
}

.expense-subtitle {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.expense-game-row,
.expense-player-shuttle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.expense-game-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg2);
}

.expense-player-shuttle-row {
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 0;
  background: transparent;
}

.expense-player-shuttle-row:last-child {
  border-bottom: 0;
}

.expense-player-shuttle-row > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.expense-player-shuttle-amount {
  flex: 0 0 auto;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  text-align: right;
}

.expense-player-shuttle-amount-label {
  margin-top: 0 !important;
  color: var(--muted) !important;
  font-size: .68rem !important;
  font-weight: 700;
  line-height: 1.1;
}

.expense-player-shuttle-amount-value {
  white-space: nowrap;
  color: var(--out);
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.expense-player-shuttle-amount.is-zero .expense-player-shuttle-amount-value {
  color: var(--muted);
}

.expense-game-row.missing {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--line));
}

.expense-game-row strong,
.expense-game-row span,
.expense-game-row small,
.expense-player-shuttle-row strong,
.expense-player-shuttle-row span {
  display: block;
}

.expense-game-row span,
.expense-game-row small,
.expense-player-shuttle-row span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.expense-game-amount {
  text-align: right;
  flex: 0 0 auto;
}

@media(max-width:640px) {
  .court-shuttle-tabs,
  .expense-mode-choice,
  .shuttle-preset-form {
    grid-template-columns: 1fr;
  }

  .court-shuttle-tab {
    min-height: 88px;
    padding-right: 108px;
  }

  .shuttle-preset-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .shuttle-preset-actions {
    justify-content: flex-start;
  }

  .game-shuttle-box {
    grid-template-columns: 1fr;
  }

  .expense-game-row,
  .expense-player-shuttle-row {
    align-items: center;
  }

  .expense-game-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .expense-player-shuttle-row {
    padding: 10px 0;
    gap: 12px;
  }

  .expense-player-shuttle-amount {
    min-width: 68px;
  }

  .expense-game-amount {
    text-align: left;
  }
}

@media(min-width:520px) {
  .page {
    max-width: 520px;
    margin: 0 auto
  }

  .topbar {
    justify-content: center
  }

  .sync-dot {
    position: absolute;
    right: 18px
  }

  .bottom-nav {
    max-width: 520px;
    left: 50%;
    transform: translateX(-50%)
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* Match history actions */
.match-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px
}

.match-detail {
  flex: 1;
  min-width: 0
}

.match-delete-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  border-radius: 50%;
  cursor: pointer;
  transition: all .15s ease;
  font-size: 13px;
}

.match-delete-btn:hover {
  background: rgba(239, 68, 68, .08) !important;
  color: var(--out) !important;
}

.match-delete-btn:active {
  transform: scale(.92)
}

.match-delete-btn .material-symbols-outlined {
  font-size: 18px !important;
}


/* Player actions */
.player-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px
}

.icon-btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s
}

.icon-btn-delete svg {
  width: 16px;
  height: 16px;
  stroke: currentColor
}

.icon-btn-delete:hover {
  background: rgba(239, 68, 68, .12);
  color: var(--out)
}

.icon-btn-delete:active {
  transform: scale(.94)
}


/* Locked player controls */
.player-row-locked {
  opacity: .86
}

.player-lock-hint {
  font-size: 10px;
  color: var(--playing);
  line-height: 1;
  white-space: nowrap
}

.status-locked {
  cursor: not-allowed;
  filter: saturate(.75);
  opacity: .82
}

.icon-btn-locked {
  cursor: not-allowed;
  color: #555a78
}

.icon-btn-locked:hover {
  background: rgba(245, 158, 11, .1);
  color: var(--playing)
}


/* Collapsible add-player section */
.add-player-card {
  padding: 0;
  overflow: hidden
}

.collapse-toggle {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.collapse-toggle:active {
  transform: scale(.99)
}

.collapse-chevron {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 212, 170, .08);
  color: var(--accent);
}

.collapse-content {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid rgba(42, 42, 74, .7);
}

.collapse-content.open {
  display: block
}

/* Softer reset button */
.btn-reset {
  background: rgba(136, 136, 170, .07) !important;
  color: var(--muted) !important;
  border: 1px solid rgba(136, 136, 170, .18) !important;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
}

.btn-reset:hover {
  background: rgba(239, 68, 68, .08) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, .18) !important;
}


/* GitHub Pages fix: collapsible add player must be a styled button, not native-looking */
.add-player-card {
  padding: 0 !important;
  overflow: hidden
}

.collapse-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}

.collapse-toggle span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.collapse-chevron {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 212, 170, .08);
  color: var(--accent)
}

.collapse-content {
  display: none !important;
  padding: 0 16px 16px;
  border-top: 1px solid rgba(42, 42, 74, .7)
}

.collapse-content.open {
  display: block !important
}

.btn-reset {
  background: rgba(136, 136, 170, .07) !important;
  color: var(--muted) !important;
  border: 1px solid rgba(136, 136, 170, .18) !important;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px
}

.btn-reset:hover {
  background: rgba(239, 68, 68, .08) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, .18) !important
}



/* Light mode polish */
.topbar {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.bottom-nav {
  background: rgba(255, 255, 255, .96) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -10px 28px rgba(31, 41, 55, .08);
}

.card,
.court-card,
.stat-card {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 14px 36px rgba(31, 41, 55, .08) !important;
}

.court-header {
  background: #eef4ff !important;
  border-bottom: 1px solid var(--border) !important;
}

.player-avatar,
.player-chip,
input[type=text],
input[type=number],
input[type=password],
select,
.btn-secondary {
  background: #f3f7ff !important;
  border-color: #d9e2f0 !important;
}

input[type=text],
input[type=number],
input[type=password],
select {
  color: var(--text) !important;
}

input::placeholder {
  color: #94a3b8 !important
}

.btn-primary {
  background: var(--accent) !important;
  color: #ffffff !important
}

.btn-primary:hover {
  background: #008f72 !important
}

.sync-dot {
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .10) !important
}

.sync-dot.ok {
  box-shadow: 0 0 0 4px rgba(0, 168, 132, .12) !important
}

.toast {
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(31, 41, 55, .12);
}

.collapse-chevron {
  background: rgba(0, 168, 132, .10) !important
}

.collapse-content {
  border-top: 1px solid rgba(217, 226, 240, .95) !important
}

.court-opt {
  background: #ffffff !important;
  border-color: #d9e2f0 !important;
}

.court-opt.active {
  background: rgba(0, 168, 132, .08) !important;
  border-color: var(--accent) !important;
}

.player-row,
.match-row,
.lb-row {
  border-bottom-color: #e5edf7 !important
}

.score-sep,
.vs-divider {
  color: #94a3b8 !important
}

.btn-reset {
  background: rgba(107, 114, 128, .06) !important;
  color: #6b7280 !important;
  border-color: rgba(107, 114, 128, .16) !important;
}

.btn-reset:hover {
  background: rgba(220, 38, 38, .06) !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, .16) !important;
}

.status-select {
  background: #f8fbff !important
}

.sel-ready {
  background: rgba(0, 168, 132, .08) !important
}

.sel-playing {
  background: rgba(217, 119, 6, .08) !important
}

.sel-rest {
  background: rgba(99, 102, 241, .08) !important
}

.sel-out {
  background: rgba(220, 38, 38, .08) !important
}

.icon-btn-delete:hover {
  background: rgba(220, 38, 38, .08) !important
}

#loading {
  background: rgba(247, 249, 252, .82) !important
}



/* Theme toggle + refined themes */
html[data-theme="light"] {
  --bg: #f7f9fc;
  --bg2: #ffffff;
  --bg3: #f3f6fb;
  --card: #ffffff;
  --border: #e2e8f0;
  --accent: #11b89a;
  --accent2: #8b7cf6;
  --text: #28313f;
  --muted: #7d8491;
  --ready: #11b89a;
  --playing: #e59b22;
  --rest: #7c83ee;
  --out: #dc5b5b;
  --teamA: #4f7fdf;
  --teamB: #e05275;
}

html[data-theme="dark"] {
  --bg: #0f0f1a;
  --bg2: #1a1a2e;
  --bg3: #16213e;
  --card: #1e1e35;
  --border: #2a2a4a;
  --accent: #00d4aa;
  --accent2: #7c3aed;
  --text: #e8e8f0;
  --muted: #8888aa;
  --ready: #00d4aa;
  --playing: #f59e0b;
  --rest: #6366f1;
  --out: #ef4444;
  --danger: #ef4444;
  --teamA: #3b82f6;
  --teamB: #f43f5e;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, rgba(209, 241, 235, .95) 0, rgba(209, 241, 235, 0) 36%),
    linear-gradient(180deg, #f7f9fc 0%, #f8fbff 48%, #ffffff 100%) !important;
}

html[data-theme="dark"] body {
  background: radial-gradient(circle at top, #16213e 0, #0f0f1a 42%) !important;
}

.theme-toggle {
  position: absolute;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(31, 41, 55, .08);
}

.theme-toggle:active {
  transform: scale(.96)
}

html[data-theme="light"] .topbar,
html[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(226, 232, 240, .92) !important;
  box-shadow: 0 8px 24px rgba(70, 76, 90, .07);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .bottom-nav {
  background: rgba(26, 26, 46, .96) !important;
  border-color: var(--border) !important;
  box-shadow: none;
}

html[data-theme="light"] .card,
html[data-theme="light"] .court-card,
html[data-theme="light"] .stat-card {
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(226, 232, 240, .95) !important;
  box-shadow: 0 14px 34px rgba(70, 76, 90, .08) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .court-card,
html[data-theme="dark"] .stat-card {
  background: rgba(30, 30, 53, .96) !important;
  border-color: var(--border) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .16) !important;
}

html[data-theme="light"] .court-header {
  background: #f2f7fb !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="dark"] .court-header {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] .player-avatar,
html[data-theme="light"] .player-chip,
html[data-theme="light"] input[type=text],
html[data-theme="light"] input[type=number],
html[data-theme="light"] input[type=password],
html[data-theme="light"] select,
html[data-theme="light"] .btn-secondary {
  background: #f7f8fb !important;
  border-color: #e2e8f0 !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .player-avatar,
html[data-theme="dark"] .player-chip,
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] select,
html[data-theme="dark"] .btn-secondary {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #18c5a8, #0ea889) !important;
  color: #fff !important;
}

html[data-theme="dark"] .btn-primary {
  background: var(--accent) !important;
  color: #0f0f1a !important;
}

html[data-theme="light"] .court-opt {
  background: rgba(255, 255, 255, .75) !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="dark"] .court-opt {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] .court-opt.active {
  background: rgba(17, 184, 154, .08) !important;
  border-color: var(--accent) !important;
}

html[data-theme="dark"] .court-opt.active {
  background: rgba(0, 212, 170, .08) !important;
  border-color: var(--accent) !important;
}

html[data-theme="light"] .player-row,
html[data-theme="light"] .match-row,
html[data-theme="light"] .lb-row {
  border-bottom-color: #edf2f7 !important;
}

html[data-theme="dark"] .player-row,
html[data-theme="dark"] .match-row,
html[data-theme="dark"] .lb-row {
  border-bottom-color: var(--border) !important;
}

html[data-theme="light"] .toast {
  background: #fff !important;
  color: var(--text);
  box-shadow: 0 14px 34px rgba(70, 76, 90, .13);
}

html[data-theme="dark"] .toast {
  background: var(--card) !important;
  box-shadow: none;
}

html[data-theme="light"] .collapse-chevron {
  background: rgba(17, 184, 154, .10) !important;
}

html[data-theme="dark"] .collapse-chevron {
  background: rgba(0, 212, 170, .08) !important;
}

html[data-theme="light"] .btn-reset {
  background: rgba(125, 132, 145, .06) !important;
  color: var(--muted) !important;
  border-color: rgba(125, 132, 145, .16) !important;
}

html[data-theme="dark"] .btn-reset {
  background: rgba(136, 136, 170, .07) !important;
  color: var(--muted) !important;
  border-color: rgba(136, 136, 170, .18) !important;
}

html[data-theme="light"] input::placeholder {
  color: #a4a8b0 !important
}

html[data-theme="dark"] input::placeholder {
  color: #8888aa !important
}

html[data-theme="light"] #loading {
  background: rgba(247, 249, 252, .82) !important
}

html[data-theme="dark"] #loading {
  background: rgba(15, 15, 26, .82) !important
}



/* Court shuffle action */
.court-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.court-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .55);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all .15s;
}

.court-icon-btn:hover {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .45);
  background: rgba(17, 184, 154, .08);
}

.court-icon-btn:active {
  transform: scale(.94)
}

html[data-theme="dark"] .court-icon-btn {
  background: rgba(22, 33, 62, .86);
  border-color: var(--border);
}

html[data-theme="dark"] .court-icon-btn:hover {
  background: rgba(0, 212, 170, .10);
  border-color: rgba(0, 212, 170, .35);
}



/* Minimal icon refinement */
.theme-toggle svg,
.court-icon-btn svg {
  width: 17px;
  height: 17px;
}

.collapse-chevron {
  width: 22px;
  height: 22px;
  background: transparent !important;
  position: relative;
}

.collapse-chevron::before,
.collapse-chevron::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 8px;
  height: 1.7px;
  background: currentColor;
  border-radius: 999px;
  transition: transform .18s ease;
}

.collapse-chevron::before {
  left: 4px;
  transform: rotate(40deg)
}

.collapse-chevron::after {
  right: 4px;
  transform: rotate(-40deg)
}

.collapse-toggle.open .collapse-chevron::before {
  transform: rotate(-40deg)
}

.collapse-toggle.open .collapse-chevron::after {
  transform: rotate(40deg)
}

.empty-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15));
  position: relative;
}

.empty-icon::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  border: 1.4px solid var(--border);
  opacity: .9;
}

.nav-btn svg {
  width: 20px;
  height: 20px;
}

.nav-btn {
  gap: 4px;
}

.topbar-logo {
  font-weight: 700;
  letter-spacing: -.2px;
}

.topbar-logo span {
  color: inherit;
}

.btn-primary,
.btn-secondary,
.btn-reset,
.status-select,
.court-opt,
.player-chip,
.player-avatar {
  box-shadow: none !important;
}

.card-title {
  font-weight: 600;
  letter-spacing: .55px;
}

.court-live-badge {
  letter-spacing: .2px;
}



/* Remove hard divider line in add-player expanded panel */
.collapse-content {
  border-top: 0 !important;
  padding-top: 2px !important;
}

.add-player-card .collapse-toggle {
  padding-bottom: 12px;
}

.add-player-card .collapse-content.open {
  padding-top: 0 !important;
}



/* Mobile topbar layout fix */
.topbar {
  height: 64px !important;
  padding: 0 14px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: initial !important;
}

.theme-toggle {
  position: static !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: start !important;
  flex-shrink: 0 !important;
}

.topbar-logo {
  min-width: 0 !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sync-dot {
  position: static !important;
  justify-self: end !important;
  flex-shrink: 0 !important;
}

@media (max-width:480px) {
  .topbar {
    padding: 0 12px !important;
    gap: 10px !important;
    grid-template-columns: 38px minmax(0, 1fr) 22px !important;
  }

  .theme-toggle {
    width: 38px !important;
    height: 38px !important;
  }

  .topbar-logo {
    font-size: 15px !important;
  }
}

@media (min-width:520px) {
  .topbar {
    grid-template-columns: 40px minmax(0, 1fr) 24px !important;
  }

  .sync-dot {
    position: static !important;
    right: auto !important;
  }
}



/* End game button: soft orange, separated from start button */
.score-row+.btn-group .btn-primary:first-child {
  background: linear-gradient(135deg, #f6b85f, #f59e0b) !important;
  color: #fff !important;
  border: 1px solid rgba(245, 158, 11, .28) !important;
}

.score-row+.btn-group .btn-primary:first-child:hover {
  background: linear-gradient(135deg, #f4aa43, #e58c00) !important;
}

html[data-theme="light"] .score-row+.btn-group .btn-primary:first-child {
  background: linear-gradient(135deg, #f8c77d, #f0a93a) !important;
  color: #5a3300 !important;
  border: 1px solid rgba(240, 169, 58, .28) !important;
}

html[data-theme="light"] .score-row+.btn-group .btn-primary:first-child:hover {
  background: linear-gradient(135deg, #f5bc67, #e99a23) !important;
}



/* Player lock status labels */
.player-lock-hint {
  font-size: 10.5px;
  line-height: 1.15;
  white-space: nowrap;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.player-lock-hint.lock-playing {
  color: #b45309;
  background: rgba(245, 158, 11, .13);
  border-color: rgba(245, 158, 11, .22);
}

.player-lock-hint.lock-queued {
  color: #2563eb;
  background: rgba(59, 130, 246, .10);
  border-color: rgba(59, 130, 246, .18);
}

html[data-theme="dark"] .player-lock-hint.lock-playing {
  color: #fbbf24;
  background: rgba(245, 158, 11, .16);
  border-color: rgba(245, 158, 11, .28);
}

html[data-theme="dark"] .player-lock-hint.lock-queued {
  color: #93c5fd;
  background: rgba(59, 130, 246, .16);
  border-color: rgba(59, 130, 246, .28);
}



/* Disabled look for players marked as out */
.player-row-out {
  opacity: .48;
  filter: saturate(.45);
}

.player-row-out .player-avatar {
  color: var(--muted) !important;
  border-color: rgba(125, 132, 145, .25) !important;
}

.player-row-out .player-name,
.player-row-out .player-meta {
  color: var(--muted) !important;
}

.player-row-out .status-select-shell {
  opacity: .9;
  height: 28px;
}

.player-row-out .status-select-shell .status-select {
  opacity: 0 !important;
}

.player-row-out .icon-btn-delete {
  opacity: .55;
}

html[data-theme="dark"] .player-row-out {
  opacity: .42;
}



/* Reset guard */
.btn-reset.is-disabled,
.btn-reset:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  filter: saturate(.6);
}

.btn-reset.is-disabled:hover,
.btn-reset:disabled:hover {
  background: rgba(125, 132, 145, .06) !important;
  color: var(--muted) !important;
  border-color: rgba(125, 132, 145, .16) !important;
}



/* Stats dashboard */
.stats-dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dashboard-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.dashboard-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.dashboard-refresh {
  width: auto;
  flex-shrink: 0;
}

.dashboard-summary {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}

.stats-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(125, 132, 145, .08);
  border: 1px solid rgba(125, 132, 145, .12);
  padding: 5px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.stats-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}

.stats-tab.active {
  color: var(--text);
  background: var(--card);
  box-shadow: 0 8px 18px rgba(70, 76, 90, .08);
}

.stats-tab.is-locked {
  opacity: .42;
  cursor: not-allowed;
}

.stats-panel {
  display: none;
}

.stats-panel.active {
  display: block;
}

.status-breakdown {
  display: grid;
  gap: 10px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(125, 132, 145, .13);
}

.status-item:last-child {
  border-bottom: 0;
}

.status-item span:nth-child(2) {
  flex: 1;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.status-item strong {
  font-size: 16px;
  color: var(--text);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.dot-ready {
  background: var(--ready)
}

.dot-playing {
  background: var(--playing)
}

.dot-rest {
  background: var(--rest)
}

.dot-out {
  background: var(--out)
}

.mini-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(125, 132, 145, .13);
}

.mini-rank-row:last-child {
  border-bottom: 0;
}

.mini-rank-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(17, 184, 154, .10);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

.mini-rank-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-rank-games {
  color: var(--accent);
  font-weight: 800;
  font-size: 14px;
}

html[data-theme="dark"] .stats-tabs {
  background: rgba(22, 33, 62, .55);
  border-color: var(--border);
}

html[data-theme="dark"] .stats-tab.active {
  background: var(--bg3);
  box-shadow: none;
}

@media(max-width:380px) {
  .dashboard-title {
    font-size: 20px
  }

  .stats-tab {
    font-size: 12px;
    padding: 8px 6px
  }
}


/* Secret expense calculator */
.secret-expense-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}

.secret-expense-btn svg {
  width: 17px;
  height: 17px;
}

.secret-expense-btn:hover {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .35);
  background: rgba(17, 184, 154, .08);
}

.secret-expense-btn:active {
  transform: scale(.95)
}

.expense-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.icon-back-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.icon-back-btn svg {
  width: 18px;
  height: 18px;
}

.icon-back-btn:hover {
  color: var(--accent);
  background: rgba(17, 184, 154, .08);
}

.expense-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.expense-full {
  grid-column: 1 / -1;
}

.expense-help {
  margin-bottom: 12px;
}

.expense-admin-payer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 2px 0 10px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.expense-admin-payer-toggle:hover {
  border-color: var(--accent);
  background: var(--bg);
}

.expense-admin-payer-toggle:has(input:checked) {
  border-color: rgba(0, 168, 132, .24);
  background: rgba(0, 168, 132, .08);
}

.expense-wizard-check-row input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 5px;
  background: var(--bg3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.15s ease;
  outline: none;
  flex: 0 0 auto;
  margin: 0;
}

.expense-wizard-check-row input:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.expense-wizard-check-row input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.expense-wizard-check-row input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.expense-payer-select-group.hidden {
  display: none;
}

.expense-admin-payer-select-group {
  display: grid;
  gap: 6px;
  max-width: 520px;
  margin: 2px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 168, 132, .2);
  border-radius: 12px;
  background: rgba(0, 168, 132, .05);
}

.expense-admin-payer-select-group.hidden {
  display: none;
}

.expense-admin-payer-select-group .form-label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

.expense-admin-payer-select-group select {
  min-height: 44px;
}

.expense-admin-payer-select-group .expense-help {
  margin: 0;
  font-size: 11px;
}

.expense-owner-list {
  display: grid;
  gap: 8px;
}

.expense-owner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(125, 132, 145, .12);
}

.expense-owner-row:last-child {
  border-bottom: 0;
}

.expense-admin-payer-row {
  padding: 10px 0 8px;
}

.expense-owner-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expense-owner-input {
  width: 90px !important;
  text-align: center;
}

.expense-total-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.expense-total-grid div {
  background: rgba(125, 132, 145, .07);
  border: 1px solid rgba(125, 132, 145, .12);
  border-radius: 12px;
  padding: 12px;
}

.expense-total-grid span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.expense-total-grid strong {
  font-size: 18px;
  color: var(--text);
}

.expense-warning {
  background: rgba(245, 158, 11, .11);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, .22);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}

.expense-result-list {
  display: grid;
  gap: 8px;
}

.expense-result-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(125, 132, 145, .12);
}

.expense-result-row:last-child {
  border-bottom: 0;
}

.expense-result-name {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.expense-result-names-container {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

.expense-result-names-text {
  min-width: 0;
  flex: 1;
  font-weight: 800;
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
}

.expense-result-names-text:not(.expanded) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expense-result-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform 0.2s ease, color 0.2s ease;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.expense-result-expand-btn:hover {
  background-color: rgba(125, 132, 145, 0.08);
  color: var(--text);
}

.expense-result-expand-btn .material-symbols-outlined {
  font-size: 20px;
}

.expense-result-expand-btn.hidden {
  display: none !important;
}

.expense-result-detail {
  text-align: right;
  flex-shrink: 0;
  min-width: 110px;
}

.expense-result-detail span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.expense-result-detail strong {
  font-size: 15px;
}

.expense-result-row.pay strong {
  color: var(--out);
}

.expense-result-row.receive strong {
  color: var(--ready);
}

.expense-result-row.clear strong {
  color: var(--muted);
}

.expense-result-name small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.expense-game-warning-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 12px;
  background: rgba(245, 158, 11, .12);
  color: #b45309;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.expense-game-warning-btn:hover {
  background: rgba(245, 158, 11, .18);
  border-color: rgba(245, 158, 11, .4);
}

.expense-game-warning-btn .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: 'FILL' 1, 'wght' 450, 'GRAD' -10, 'opsz' 22;
}

.expense-game-review-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.expense-game-review-actions .expense-game-warning-btn {
  margin-bottom: 0;
}

.expense-game-edit-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.expense-game-edit-btn:hover,
.expense-game-edit-btn:focus-visible {
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 13%, transparent);
  outline: none;
}

.expense-game-edit-btn:active {
  background: color-mix(in srgb, var(--accent) 19%, var(--card));
}

.expense-game-edit-btn .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 650, 'GRAD' 0, 'opsz' 22;
}

@media (prefers-reduced-motion: reduce) {
  .expense-game-edit-btn {
    transition: none;
  }
}

.missing-game-shuttle-sheet {
  max-width: 760px;
}

.missing-game-shuttle-list {
  display: grid;
  gap: 10px;
}

.missing-game-shuttle-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 14px;
  background: rgba(248, 250, 252, .72);
}

.missing-game-shuttle-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.missing-game-shuttle-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
}

.missing-game-shuttle-copy strong,
.missing-game-shuttle-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missing-game-shuttle-copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.missing-game-shuttle-time {
  flex: 0 0 auto;
  max-width: 48%;
  padding-top: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.missing-game-shuttle-row select,
.missing-game-shuttle-row input {
  min-width: 0;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  padding: 0 12px;
  font-weight: 800;
}

.missing-game-shuttle-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

@media(max-width:640px) {
  .missing-game-shuttle-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .secret-expense-btn,
html[data-theme="dark"] .icon-back-btn {
  background: var(--bg3);
}

html[data-theme="dark"] .expense-total-grid div {
  background: rgba(22, 33, 62, .55);
  border-color: var(--border);
}

html[data-theme="dark"] .expense-warning {
  color: #fbbf24;
}

@media(max-width:420px) {
  .expense-form-grid {
    grid-template-columns: 1fr;
  }

  .expense-total-grid {
    grid-template-columns: 1fr;
  }
}



/* Variable shuttle price per owner */
.expense-owner-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.expense-owner-inputs .expense-owner-input {
  width: 82px !important;
}

.expense-input-wrapper {
  position: relative;
  width: 104px;
}

.form-group .expense-input-wrapper {
  width: 100%;
}

.expense-input-wrapper .expense-input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  color: var(--muted);
  opacity: 0.45;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.expense-input-wrapper:focus-within .expense-input-icon {
  color: var(--accent);
  opacity: 1;
}

.expense-input-wrapper input {
  width: 100% !important;
  text-align: left;
  padding-left: 30px !important;
}

/* Specificity override for shuttle owner row inputs to prevent width shrinking */
.expense-owner-inputs .expense-input-wrapper .expense-owner-input {
  width: 100% !important;
}

/* Default (Desktop: hide quantity buttons, small padding) */
.quantity-controls {
  display: none;
}

.expense-input-wrapper.quantity-input input {
  padding-right: 8px !important;
}

.expense-input-wrapper:not(.quantity-input) input {
  padding-right: 8px !important;
}

.quantity-controls {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 20px;
  align-items: center;
  gap: 1px;
}

.qty-btn {
  width: 100% !important;
  height: calc(50% - 0.5px) !important;
  min-height: 0 !important;
  border-radius: 4px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  color: var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  padding: 0 !important;
  transition: all 0.12s ease;
  font-size: 8px !important;
  font-weight: bold;
  line-height: 1 !important;
  flex-shrink: 0;
}

.qty-btn:hover {
  background: var(--bg3) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

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

@media(max-width:420px) {
  .expense-owner-inputs .expense-input-wrapper {
    flex: 1;
    width: 100%;
  }

  /* Mobile (Responsive: show quantity controls, larger padding) */
  .quantity-controls {
    display: flex;
    flex-direction: column;
  }

  .expense-input-wrapper.quantity-input input {
    padding-right: 28px !important;
  }
}

.expense-result-name small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}

@media(max-width:420px) {
  .expense-owner-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .expense-owner-inputs {
    width: 100%;
  }

  .expense-owner-inputs .expense-owner-input {
    flex: 1;
    width: 100% !important;
  }
}



/* Modern dark mode refresh */
html[data-theme="dark"] {
  --bg: #080b14;
  --bg2: #0d1322;
  --bg3: #111a2e;
  --card: #121a2b;
  --border: #243047;
  --accent: #2dd4bf;
  --accent2: #8b5cf6;
  --text: #e6edf7;
  --muted: #8b98ad;
  --ready: #2dd4bf;
  --playing: #f6b35f;
  --rest: #8b8cff;
  --out: #fb7185;
  --teamA: #60a5fa;
  --teamB: #fb7185;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 16% -10%, rgba(45, 212, 191, .18) 0, rgba(45, 212, 191, 0) 32%),
    radial-gradient(circle at 92% 8%, rgba(139, 92, 246, .16) 0, rgba(139, 92, 246, 0) 34%),
    linear-gradient(180deg, #080b14 0%, #0b1020 48%, #080b14 100%) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .topbar {
  background: rgba(13, 19, 34, .78) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .bottom-nav {
  background: rgba(13, 19, 34, .82) !important;
  border-top: 1px solid rgba(148, 163, 184, .14) !important;
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .2) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .court-card,
html[data-theme="dark"] .stat-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
    rgba(18, 26, 43, .88) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] .court-header {
  background: rgba(17, 26, 46, .92) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .secret-expense-btn,
html[data-theme="dark"] .icon-back-btn,
html[data-theme="dark"] .court-icon-btn {
  background: rgba(17, 26, 46, .78) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  color: #aab7ca !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16) !important;
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .secret-expense-btn:hover,
html[data-theme="dark"] .icon-back-btn:hover,
html[data-theme="dark"] .court-icon-btn:hover {
  color: var(--accent) !important;
  border-color: rgba(45, 212, 191, .42) !important;
  background: rgba(45, 212, 191, .10) !important;
}

html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] select,
html[data-theme="dark"] .player-chip,
html[data-theme="dark"] .player-avatar,
html[data-theme="dark"] .btn-secondary {
  background: rgba(17, 26, 46, .78) !important;
  border-color: rgba(148, 163, 184, .16) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus {
  border-color: rgba(45, 212, 191, .62) !important;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, .11) !important;
}

html[data-theme="dark"] input::placeholder {
  color: #607088 !important;
}

html[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #2dd4bf, #14b8a6) !important;
  color: #06110f !important;
  box-shadow: 0 12px 24px rgba(20, 184, 166, .18) !important;
}

html[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(135deg, #5eead4, #2dd4bf) !important;
}

html[data-theme="dark"] .score-row+.btn-group .btn-primary:first-child {
  background: linear-gradient(135deg, #f6c177, #f59e0b) !important;
  color: #171006 !important;
  border: 1px solid rgba(245, 158, 11, .22) !important;
  box-shadow: 0 12px 24px rgba(245, 158, 11, .14) !important;
}

html[data-theme="dark"] .btn-secondary:hover {
  background: rgba(30, 42, 68, .88) !important;
  border-color: rgba(148, 163, 184, .24) !important;
}

html[data-theme="dark"] .court-opt {
  background: rgba(18, 26, 43, .78) !important;
  border-color: rgba(148, 163, 184, .16) !important;
}

html[data-theme="dark"] .court-opt.active {
  background: rgba(45, 212, 191, .10) !important;
  border-color: rgba(45, 212, 191, .55) !important;
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .08) !important;
}

html[data-theme="dark"] .stats-tabs {
  background: rgba(8, 11, 20, .42) !important;
  border-color: rgba(148, 163, 184, .14) !important;
}

html[data-theme="dark"] .stats-tab.active {
  background: rgba(18, 26, 43, .95) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .player-row,
html[data-theme="dark"] .match-row,
html[data-theme="dark"] .lb-row,
html[data-theme="dark"] .status-item,
html[data-theme="dark"] .expense-owner-row,
html[data-theme="dark"] .expense-result-row,
html[data-theme="dark"] .mini-rank-row {
  border-bottom-color: rgba(148, 163, 184, .12) !important;
}

html[data-theme="dark"] .toast {
  background: rgba(18, 26, 43, .96) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .30) !important;
}

html[data-theme="dark"] .collapse-chevron::before,
html[data-theme="dark"] .collapse-chevron::after {
  background: #aab7ca !important;
}

html[data-theme="dark"] .sync-dot {
  background: #fb7185 !important;
  box-shadow: 0 0 0 4px rgba(251, 113, 133, .14) !important;
}

html[data-theme="dark"] .sync-dot.ok {
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, .14) !important;
}

html[data-theme="dark"] .status-select {
  background: rgba(17, 26, 46, .78) !important;
}

html[data-theme="dark"] .sel-ready {
  background: rgba(45, 212, 191, .10) !important;
  color: #5eead4 !important;
  border-color: rgba(45, 212, 191, .36) !important;
}

html[data-theme="dark"] .sel-playing {
  background: rgba(246, 179, 95, .11) !important;
  color: #f6c177 !important;
  border-color: rgba(246, 179, 95, .34) !important;
}

html[data-theme="dark"] .sel-rest {
  background: rgba(139, 140, 255, .12) !important;
  color: #b8b9ff !important;
  border-color: rgba(139, 140, 255, .34) !important;
}

html[data-theme="dark"] .sel-out {
  background: rgba(251, 113, 133, .12) !important;
  color: #fda4af !important;
  border-color: rgba(251, 113, 133, .32) !important;
}

.status-select-shell.sel-ready,
.status-select-shell.sel-ready .status-select-label {
  color: var(--ready) !important;
}

.status-select-shell.sel-playing,
.status-select-shell.sel-playing .status-select-label {
  color: var(--playing) !important;
}

.status-select-shell.sel-rest,
.status-select-shell.sel-rest .status-select-label {
  color: var(--rest) !important;
}

.status-select-shell.sel-out,
.status-select-shell.sel-out .status-select-label {
  color: var(--out) !important;
}

html[data-theme="dark"] .court-live-badge {
  background: rgba(246, 179, 95, .13) !important;
  color: #f6c177 !important;
}

html[data-theme="dark"] .stat-num,
html[data-theme="dark"] .lb-games,
html[data-theme="dark"] .mini-rank-games,
html[data-theme="dark"] .topbar-logo {
  color: var(--accent) !important;
}

html[data-theme="dark"] .expense-total-grid div {
  background: rgba(17, 26, 46, .72) !important;
  border-color: rgba(148, 163, 184, .14) !important;
}

html[data-theme="dark"] .empty-icon {
  background: rgba(17, 26, 46, .68) !important;
  border-color: rgba(148, 163, 184, .16) !important;
}

html[data-theme="dark"] #loading {
  background: rgba(8, 11, 20, .82) !important;
  backdrop-filter: blur(8px);
}



/* Expense shuttle simplified fields */
.expense-owner-inputs .expense-owner-input {
  width: 104px !important;
}

.expense-owner-input::placeholder {
  font-size: 12px;
}

.expense-shuttle-note {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  padding: 8px 0 12px;
}

.premium-expense-mode-card.is-demo-locked .preset-card-info,
.premium-expense-mode-card.is-demo-locked .preset-card-icon {
  filter: blur(2px);
  opacity: .58;
}

.premium-expense-mode-card.is-demo-locked {
  position: relative;
}

.premium-expense-mode-card.is-demo-locked::after {
  content: "เวอร์ชันเต็ม";
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #92400e;
  background: rgba(251, 191, 36, .22);
  border: 1px solid rgba(217, 119, 6, .2);
}

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

.expense-discount-card-head .card-title {
  margin-bottom: 4px;
}

.expense-discount-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.expense-discount-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.expense-discount-actions small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.compact-discount-select-btn {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 12.5px;
}

.compact-discount-select-btn .material-symbols-outlined {
  font-size: 18px;
}

.expense-discount-selected-list {
  display: grid;
  gap: 6px;
}

.expense-discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 28px;
  gap: 8px;
  align-items: center;
  padding: 8px 6px 8px 11px;
  border: 1px solid rgba(125, 132, 145, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}

.expense-discount-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.expense-discount-row input {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  text-align: right;
}

.expense-discount-remove-btn {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #ef4444;
  cursor: pointer;
  opacity: .72;
  transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}

.expense-discount-remove-btn:hover,
.expense-discount-remove-btn:focus-visible {
  background: rgba(239, 68, 68, .08);
  opacity: 1;
}

.expense-discount-remove-btn .material-symbols-outlined {
  font-size: 16px;
}

.expense-discount-empty {
  padding: 9px 11px;
  border: 1px dashed rgba(125, 132, 145, .25);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

html[data-theme="dark"] .expense-discount-row {
  background: rgba(17, 26, 46, .72);
  border-color: rgba(148, 163, 184, .14);
}

html[data-theme="dark"] .expense-discount-empty {
  border-color: rgba(148, 163, 184, .2);
}

body.demo-sandbox-active .demo-lock-container.demo-lock-compact {
  min-height: 168px !important;
  overflow: hidden;
}

body.demo-sandbox-active .demo-lock-container.demo-lock-compact .demo-lock-overlay {
  padding: 16px;
}

.demo-lock-container.demo-lock-compact .demo-lock-card {
  max-width: 360px;
  padding: 16px;
  border-radius: 14px;
  gap: 8px;
}

.demo-lock-container.demo-lock-compact .demo-lock-card h3 {
  font-size: 16px;
}

.demo-lock-container.demo-lock-compact .demo-lock-card p {
  font-size: 12.5px;
}

.demo-lock-container.demo-lock-compact .demo-lock-card .btn {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
}

@media(max-width:420px) {
  .expense-owner-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}



/* Expense save/copy actions */
.expense-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.expense-actions .btn {
  padding: 10px 12px;
  font-size: 13px;
}

.expense-save-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ready);
  font-weight: 700;
  text-align: center;
}

@media(max-width:420px) {
  .expense-actions {
    grid-template-columns: 1fr;
  }
}



/* Deleted players restore */
.title-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.deleted-player-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(125, 132, 145, .12);
  gap: 12px;
  opacity: .82;
}

.deleted-player-row:last-child {
  border-bottom: 0;
}

.deleted-player-row .player-avatar {
  color: var(--muted) !important;
  border-color: rgba(125, 132, 145, .25) !important;
}

.restore-btn {
  flex-shrink: 0;
}

html[data-theme="dark"] .deleted-player-row {
  border-bottom-color: rgba(148, 163, 184, .12) !important;
}

@media(max-width:420px) {
  .title-actions {}

  .title-actions .btn-sm {
    padding: 6px 9px;
    font-size: 12px;
  }
}



/* Deleted players modal */
.icon-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}

.icon-action-btn svg {
  width: 15px;
  height: 15px;
}

.icon-action-btn:hover {
  color: var(--out);
  border-color: rgba(220, 38, 38, .22);
  background: rgba(220, 38, 38, .07);
}

.icon-action-btn:active {
  transform: scale(.94)
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(8, 11, 20, .42);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

.modal-backdrop.hidden {
  display: none !important;
}

.modal-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 82vh;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px 24px 18px 18px;
  box-shadow: 0 -18px 54px rgba(31, 41, 55, .18);
  overflow: hidden;
  animation: modalSlideUp .18s ease-out;
}

@keyframes modalSlideUp {
  from {
    transform: translateY(18px);
    opacity: .7
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(125, 132, 145, .12);
}

.modal-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.25px;
}

.modal-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.modal-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.modal-close-btn svg {
  width: 16px;
  height: 16px;
}

.modal-close-btn:hover {
  color: var(--text);
  background: rgba(125, 132, 145, .08);
}

.modal-body {
  padding: 8px 18px 18px;
  overflow: auto;
  max-height: calc(82vh - 80px);
}

.deleted-player-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(125, 132, 145, .12);
}

.deleted-player-card:last-child {
  border-bottom: 0;
}

.deleted-player-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.deleted-avatar {
  color: var(--muted) !important;
  border-color: rgba(125, 132, 145, .24) !important;
  filter: saturate(.55);
}

.restore-chip-btn {
  border: 1px solid rgba(17, 184, 154, .22);
  background: rgba(17, 184, 154, .08);
  color: var(--ready);
  border-radius: 999px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}

.restore-chip-btn:hover {
  background: rgba(17, 184, 154, .13);
  border-color: rgba(17, 184, 154, .34);
}

.deleted-empty {
  text-align: center;
  color: var(--muted);
  padding: 34px 14px;
}

body.modal-open {
  overflow: hidden !important;
  height: 100dvh !important;
}

body.modal-open .modal-backdrop {
  touch-action: none !important;
}

body.modal-open .flatpickr-calendar {
  touch-action: auto !important;
}

body.modal-open .modal-sheet,
body.modal-open .modal-body,
body.modal-open .checkin-sheet,
body.modal-open .checkin-list,
body.modal-open .modal-content,
body.modal-open select,
body.modal-open input,
body.modal-open button {
  touch-action: auto !important;
}

html[data-theme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, .52);
}

html[data-theme="dark"] .modal-sheet {
  background: rgba(18, 26, 43, .98);
  border-color: rgba(148, 163, 184, .16);
  box-shadow: 0 -18px 54px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .deleted-player-card {
  border-color: rgba(148, 163, 184, .12);
}

html[data-theme="dark"] .icon-action-btn,
html[data-theme="dark"] .modal-close-btn {
  background: rgba(17, 26, 46, .78);
  border-color: rgba(148, 163, 184, .16);
}

@media(min-width:640px) {
  .modal-backdrop {
    align-items: center;
  }

  .modal-sheet {
    border-radius: 24px;
  }
}



/* Permanent delete action in Deleted Players modal */
.deleted-player-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.permanent-delete-btn {
  border: 1px solid rgba(220, 38, 38, .20);
  background: rgba(220, 38, 38, .06);
  color: var(--out);
  border-radius: 999px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.permanent-delete-btn:hover {
  background: rgba(220, 38, 38, .11);
  border-color: rgba(220, 38, 38, .32);
}

.permanent-delete-btn:active {
  transform: scale(.96);
}

html[data-theme="dark"] .permanent-delete-btn {
  background: rgba(251, 113, 133, .10);
  border-color: rgba(251, 113, 133, .24);
  color: #fda4af;
}

html[data-theme="dark"] .permanent-delete-btn:hover {
  background: rgba(251, 113, 133, .16);
  border-color: rgba(251, 113, 133, .36);
}

@media(max-width:420px) {
  .deleted-player-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .deleted-player-actions {
    width: 100%;
    justify-content: flex-end;
  }
}



/* Expense history */
.expense-history-list {
  display: grid;
  gap: 8px;
}

.expense-history-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(125, 132, 145, .12);
}

.expense-history-row:last-child {
  border-bottom: 0;
}

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

.expense-history-date {
  font-weight: 800;
  color: var(--text);
  font-size: 14px;
}

.expense-history-meta,
.expense-history-players {
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expense-history-side {
  flex-shrink: 0;
  text-align: right;
}

.expense-history-total {
  color: var(--accent);
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 7px;
}

.expense-history-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.history-receipt-btn,
.history-delete-btn {
  border-radius: 999px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.history-session-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(109, 93, 252, .22);
  background: rgba(109, 93, 252, .07);
  color: #6d5dfc;
  border-radius: 999px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}

.history-session-summary-btn .material-symbols-outlined {
  font-size: 15px;
  line-height: 1;
}

.history-session-summary-btn:hover {
  background: rgba(109, 93, 252, .12);
  border-color: rgba(109, 93, 252, .34);
}

html[data-theme="dark"] .history-session-summary-btn {
  border-color: rgba(167, 139, 250, .24);
  background: rgba(167, 139, 250, .09);
  color: #c4b5fd;
}

html[data-theme="dark"] .history-session-summary-btn:hover {
  background: rgba(167, 139, 250, .15);
}

.history-receipt-btn {
  border: 1px solid rgba(15, 118, 110, .24);
  background: linear-gradient(135deg, rgba(17, 184, 154, .14), rgba(20, 184, 166, .08));
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.history-receipt-btn .material-symbols-outlined {
  font-size: 15px;
  line-height: 1;
}

.history-receipt-btn:hover {
  background: rgba(17, 184, 154, .16);
}

.history-delete-btn {
  border: 1px solid rgba(220, 38, 38, .18);
  background: rgba(220, 38, 38, .06);
  color: var(--out);
}

.history-delete-btn:hover {
  background: rgba(220, 38, 38, .10);
}

html[data-theme="dark"] .expense-history-row {
  border-color: rgba(148, 163, 184, .12);
}

html[data-theme="dark"] .history-receipt-btn {
  border-color: rgba(45, 212, 191, .25);
  background: rgba(45, 212, 191, .10);
  color: #5eead4;
}

html[data-theme="dark"] .history-delete-btn {
  border-color: rgba(251, 113, 133, .24);
  background: rgba(251, 113, 133, .10);
  color: #fda4af;
}

@media(max-width:420px) {
  .expense-history-row {
    flex-direction: column;
    gap: 8px;
  }

  .expense-history-side {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
}



/* Expense history modal + accordion */
.expense-title-wrap {
  min-width: 0;
  flex: 1;
}

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

.expense-history-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}

.expense-history-icon-btn svg {
  width: 16px;
  height: 16px;
}

.expense-history-icon-btn:hover {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .32);
  background: rgba(17, 184, 154, .08);
}

.expense-history-modal-sheet {
  max-height: 86vh;
}

.accordion-history-list {
  display: grid;
  gap: 10px;
}

.expense-accordion-item {
  border: 1px solid rgba(125, 132, 145, .14);
  background: rgba(125, 132, 145, .04);
  border-radius: 16px;
  overflow: hidden;
}

.expense-accordion-head {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  padding: 13px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

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

.expense-accordion-side {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 10px;
}

.expense-accordion-chevron {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  position: relative;
}

.expense-accordion-chevron::before,
.expense-accordion-chevron::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 8px;
  height: 1.7px;
  background: var(--muted);
  border-radius: 999px;
  transition: transform .18s ease;
}

.expense-accordion-chevron::before {
  left: 4px;
  transform: rotate(40deg)
}

.expense-accordion-chevron::after {
  right: 4px;
  transform: rotate(-40deg)
}

.expense-accordion-item.open .expense-accordion-chevron::before {
  transform: rotate(-40deg)
}

.expense-accordion-item.open .expense-accordion-chevron::after {
  transform: rotate(40deg)
}

.expense-accordion-body {
  display: none;
  padding: 0 14px 14px;
}

.expense-accordion-item.open .expense-accordion-body {
  display: block;
}

.expense-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.expense-detail-grid div {
  background: rgba(125, 132, 145, .07);
  border: 1px solid rgba(125, 132, 145, .10);
  border-radius: 12px;
  padding: 10px;
}

.expense-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 3px;
}

.expense-detail-grid strong {
  color: var(--text);
  font-size: 14px;
}

.expense-detail-grid strong.court-rate-detail-list {
  display: grid;
  gap: 4px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}

.expense-detail-grid strong.court-rate-detail-list span {
  color: var(--text);
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  overflow-wrap: anywhere;
}

.expense-detail-section {
  padding: 10px 0;
  border-top: 1px solid rgba(125, 132, 145, .12);
}

.expense-detail-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.expense-detail-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}

.expense-detail-line span {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep player names easy to scan in the expense-history detail sections. */
#expense-history-modal .expense-detail-line > span:first-child {
  font-weight: 800;
}


.expense-detail-line span small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.expense-detail-line strong {
  font-size: 13px;
  white-space: nowrap;
}

.expense-detail-line.pay strong {
  color: var(--out)
}

.expense-detail-line.receive strong {
  color: var(--ready)
}

.expense-detail-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 4px 0;
}

.expense-summary-text {
  border-top: 1px solid rgba(125, 132, 145, .12);
  padding-top: 10px;
  margin-top: 4px;
}

.expense-summary-text summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.expense-summary-text pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(125, 132, 145, .07);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.55;
}

.accordion-actions {
  padding-top: 12px;
  justify-content: flex-end;
}

html[data-theme="dark"] .expense-history-icon-btn {
  background: rgba(17, 26, 46, .78);
  border-color: rgba(148, 163, 184, .16);
}

html[data-theme="dark"] .expense-accordion-item {
  background: rgba(17, 26, 46, .48);
  border-color: rgba(148, 163, 184, .14);
}

html[data-theme="dark"] .expense-detail-grid div,
html[data-theme="dark"] .expense-summary-text pre {
  background: rgba(8, 11, 20, .30);
  border-color: rgba(148, 163, 184, .10);
}

html[data-theme="dark"] .expense-detail-section,
html[data-theme="dark"] .expense-summary-text {
  border-color: rgba(148, 163, 184, .12);
}

@media(max-width:420px) {
  .expense-accordion-head {
    padding: 12px;
  }

  .expense-detail-grid {
    grid-template-columns: 1fr;
  }

  .expense-detail-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .expense-detail-line strong {
    white-space: normal;
  }
}



/* Expense title history button spacing fix */
.expense-header {
  align-items: flex-start !important;
}

.expense-title-wrap {
  flex: 1 !important;
  min-width: 0 !important;
}

.expense-title-row {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.expense-title-row .dashboard-title {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expense-history-icon-btn {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

@media(max-width:420px) {
  .expense-title-row {
    gap: 10px !important;
  }

  .expense-history-icon-btn {
    width: 36px !important;
    height: 36px !important;
  }
}



/* Expense calculator page transition */
.stats-panel.expense-panel {
  transform-origin: center top;
  will-change: transform, opacity;
}

.stats-panel.expense-panel.expense-slide-in {
  animation: expenseSlideIn .34s cubic-bezier(.22, 1, .36, 1);
}

.stats-panel.expense-panel.expense-slide-out {
  display: block !important;
  animation: expenseSlideOut .18s ease-in forwards;
}

@keyframes expenseSlideIn {
  from {
    opacity: 0;
    transform: translateX(26px) scale(.985);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes expenseSlideOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(18px) scale(.99);
  }
}

@media (prefers-reduced-motion: reduce) {

  .stats-panel.expense-panel.expense-slide-in,
  .stats-panel.expense-panel.expense-slide-out {
    animation: none !important;
  }
}



/* Expense history pagination */
.expense-history-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0 4px;
}

.expense-history-pagination button {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
}

.expense-history-pagination button:hover:not(:disabled) {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .34);
  background: rgba(17, 184, 154, .08);
}

.expense-history-pagination button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.expense-history-pagination span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.expense-history-count {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  padding-top: 4px;
}

html[data-theme="dark"] .expense-history-pagination button {
  background: rgba(17, 26, 46, .78);
  border-color: rgba(148, 163, 184, .16);
}

@media(max-width:420px) {
  .expense-history-pagination {
    gap: 8px;
  }

  .expense-history-pagination button {
    padding: 8px 10px;
  }
}



/* Clearer expense access in stats tabs */
.stats-tabs {
  grid-template-columns: repeat(4, 1fr) !important;
}

@media(max-width:420px) {
  .stats-tab {
    font-size: 11.5px !important;
    padding: 8px 4px !important;
  }
}

/* Queue filter tabs */
.queue-filter-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 0 0 12px;
  background: rgba(125, 132, 145, .08);
  border: 1px solid rgba(125, 132, 145, .12);
  padding: 5px;
  border-radius: 999px;
}

.queue-filter-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.queue-filter-btn span {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(125, 132, 145, .12);
  color: var(--muted);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.queue-filter-btn.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(70, 76, 90, .08);
}

.queue-filter-btn.active span {
  background: rgba(17, 184, 154, .12);
  color: var(--accent);
}

html[data-theme="dark"] .queue-filter-tabs {
  background: rgba(8, 11, 20, .42);
  border-color: rgba(148, 163, 184, .14);
}

html[data-theme="dark"] .queue-filter-btn.active {
  background: rgba(18, 26, 43, .95);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .queue-filter-btn.active span {
  background: rgba(45, 212, 191, .12);
  color: #5eead4;
}

@media(max-width:380px) {
  .queue-filter-btn {
    font-size: 11px;
    padding: 8px 4px;
  }
}



/* Settings page */
.settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-section-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .65px;
  margin: 18px 2px 10px;
}

.court-profile-form {
  display: grid;
  gap: 12px;
}

.court-profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(125, 132, 145, .12);
}

.court-profile-row:last-child {
  border-bottom: 0;
}

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

.court-profile-name {
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.court-profile-rate {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  margin-top: 2px;
}

.court-profile-edit-btn {
  border: 1px solid rgba(37, 99, 235, .18);
  background: rgba(37, 99, 235, .06);
  color: #2563eb;
  border-radius: 999px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.court-profile-edit-btn:hover {
  background: rgba(37, 99, 235, .11);
  border-color: rgba(37, 99, 235, .30);
}

.court-profile-delete-btn {
  border: 1px solid rgba(220, 38, 38, .18);
  background: rgba(220, 38, 38, .06);
  color: var(--out);
  border-radius: 999px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}

.court-profile-delete-btn:hover {
  background: rgba(220, 38, 38, .11);
  border-color: rgba(220, 38, 38, .30);
}

html[data-theme="dark"] .court-profile-row {
  border-bottom-color: rgba(148, 163, 184, .12);
}

html[data-theme="dark"] .court-profile-delete-btn {
  background: rgba(251, 113, 133, .10);
  border-color: rgba(251, 113, 133, .24);
  color: #fda4af;
}

html[data-theme="dark"] .court-profile-edit-btn {
  background: rgba(96, 165, 250, .10);
  border-color: rgba(96, 165, 250, .24);
  color: #93c5fd;
}

.court-profile-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

@media(max-width:420px) {
  .court-profile-edit-actions {
    grid-template-columns: 1fr;
  }
}

@media(max-width:420px) {
  .court-profile-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .court-profile-delete-btn {
    align-self: flex-end;
  }
}



/* Settings sub tabs UX */
.settings-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(125, 132, 145, .08);
  border: 1px solid rgba(125, 132, 145, .12);
  padding: 5px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.settings-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
}

.settings-tab.active {
  color: var(--text);
  background: var(--card);
  box-shadow: 0 8px 18px rgba(70, 76, 90, .08);
}

.settings-system-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.settings-system-flow {
  width: min(100%, 1040px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.system-settings-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.system-settings-group-head {
  padding: 0 2px;
}

.system-settings-group-head h3 {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
}

.system-settings-group-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.45;
}

.expense-court-profile-settings {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.settings-system-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.settings-panel {
  display: none;
}

.settings-panel.active {
  display: block;
  animation: settingsPanelIn .22s ease-out;
}

@keyframes settingsPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.settings-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 2px 12px;
}

.settings-panel-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.1px;
}

.settings-panel-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.45;
}

.danger-zone-card .help {
  margin-bottom: 14px;
}

.danger-zone-card .btn-reset {
  width: 100%;
}

html[data-theme="dark"] .settings-tabs {
  background: rgba(8, 11, 20, .42);
  border-color: rgba(148, 163, 184, .14);
}

html[data-theme="dark"] .settings-tab.active {
  background: rgba(18, 26, 43, .95);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

@media(max-width:380px) {
  .settings-tab {
    font-size: 12px;
    padding: 9px 4px;
  }
}



/* Bottom nav: expense moved into settings */
.bottom-nav {
  grid-template-columns: repeat(3, 1fr) !important;
}

.bottom-nav .nav-btn {
  min-width: 0;
  font-size: 11.5px;
}

.bottom-nav .nav-btn svg {
  width: 19px;
  height: 19px;
}

.stats-tabs {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media(max-width:380px) {
  .bottom-nav .nav-btn {
    font-size: 10.5px;
  }
}



/* Separate expense page */
.expense-page {
  animation: expenseSlideIn .28s cubic-bezier(.22, 1, .36, 1);
}

.expense-page .expense-header {
  margin-bottom: 14px;
}

.expense-page .expense-title-row {
  justify-content: space-between;
}



/* Bulk player edit */
.title-actions .btn.active {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .32);
  background: rgba(17, 184, 154, .08);
}

/* Bulk Mode Toggle Button */
.btn-bulk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 212, 170, .09);
  color: var(--ready);
  border: 1.5px solid rgba(0, 212, 170, .32);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all .18s ease;
}

.btn-bulk-toggle .material-symbols-outlined {
  font-size: 17px;
}

.btn-bulk-toggle:hover {
  background: rgba(0, 212, 170, .18);
  border-color: var(--ready);
}

.btn-bulk-toggle.active {
  background: var(--ready);
  color: #ffffff;
  border-color: var(--ready);
  box-shadow: 0 2px 8px rgba(0, 212, 170, .3);
}

/* Bulk Action Bar & UX refinement */
.bulk-action-bar {
  border: 1.5px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--bg2));
  border-radius: 16px;
  padding: 12px 14px;
  margin: 10px 0 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .03);
}

.bulk-action-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}

.bulk-selected-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
}

.bulk-selected-badge .material-symbols-outlined {
  font-size: 19px;
  color: var(--accent);
}

.bulk-selected-count {
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
}

.bulk-action-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-bulk-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 999px;
  cursor: pointer;
  padding: 4px 10px;
  transition: all .15s ease;
}

.btn-bulk-link .material-symbols-outlined {
  font-size: 15px;
  color: var(--muted);
}

.btn-bulk-link:hover {
  background: var(--card);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-bulk-link:hover .material-symbols-outlined {
  color: var(--accent);
}

.bulk-action-hint {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 8px;
}

.bulk-action-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.bulk-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  padding: 7px 6px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .15s ease;
  min-width: 0;
}

.bulk-chip span {
  white-space: nowrap;
}

.bulk-chip .material-symbols-outlined {
  font-size: 16px;
  flex-shrink: 0;
}

.bulk-chip:hover {
  transform: translateY(-1px);
}

.bulk-chip.ready {
  background: rgba(17, 184, 154, .10);
  color: var(--ready);
  border-color: rgba(17, 184, 154, .28);
}

.bulk-chip.ready:hover {
  background: rgba(17, 184, 154, .18);
  border-color: var(--ready);
}

.bulk-chip.rest {
  background: rgba(139, 140, 255, .10);
  color: var(--rest);
  border-color: rgba(139, 140, 255, .28);
}

.bulk-chip.rest:hover {
  background: rgba(139, 140, 255, .18);
  border-color: var(--rest);
}

.bulk-chip.out {
  background: rgba(125, 132, 145, .10);
  color: var(--muted);
  border-color: rgba(125, 132, 145, .25);
}

.bulk-chip.out:hover {
  background: rgba(125, 132, 145, .20);
  border-color: var(--muted);
}

.bulk-chip.danger {
  background: rgba(220, 38, 38, .08);
  color: var(--out);
  border-color: rgba(220, 38, 38, .25);
}

.bulk-chip.danger:hover {
  background: rgba(220, 38, 38, .16);
  border-color: var(--out);
}

.bulk-mode-row {
  gap: 10px;
}

.bulk-selected {
  background: rgba(17, 184, 154, .045);
}

.bulk-check-wrap {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bulk-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bulk-check-wrap span {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1.8px solid rgba(125, 132, 145, .35);
  background: rgba(255, 255, 255, .35);
  position: relative;
  transition: all .15s;
}

.bulk-check:checked+span {
  border-color: var(--accent);
  background: var(--accent);
}

.bulk-check:checked+span::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bulk-check:disabled+span {
  opacity: .35;
  cursor: not-allowed;
}

html[data-theme="dark"] .bulk-action-bar {
  background: rgba(17, 26, 46, .48);
  border-color: rgba(148, 163, 184, .14);
}

html[data-theme="dark"] .bulk-selected {
  background: rgba(45, 212, 191, .075);
}

html[data-theme="dark"] .bulk-check-wrap span {
  background: rgba(17, 26, 46, .78);
  border-color: rgba(148, 163, 184, .26);
}

@media(max-width:420px) {
  .bulk-action-buttons {
    grid-template-columns: 1fr 1fr;
  }

  .bulk-action-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}



/* Admin PIN guard modal */
.admin-pin-sheet {
  max-width: 420px;
}

.admin-pin-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.admin-pin-error {
  color: var(--out);
  font-size: 12px;
  font-weight: 800;
  margin-top: 8px;
}

.admin-pin-code-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 20px;
  margin: 0 2px;
  padding: 1px 6px;
  border: 1px solid rgba(220, 38, 38, .42);
  border-radius: 999px;
  background: rgba(220, 38, 38, .12);
  color: #b42318;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 2px 8px rgba(220, 38, 38, .12);
}

html[data-theme="dark"] .admin-pin-code-chip {
  border-color: rgba(248, 113, 113, .52);
  background: rgba(220, 38, 38, .2);
  color: #fda4af;
}

.admin-pin-context {
  margin: 0 0 12px;
}

.admin-pin-context-card {
  padding: 10px 12px;
  border: 1px solid rgba(220, 38, 38, .28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(254, 242, 242, .96), rgba(255, 247, 237, .92));
  color: #7f1d1d;
}

.admin-pin-context-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: #b42318;
  font-size: 12px;
}

.admin-pin-context-heading .material-symbols-outlined {
  font-size: 17px;
}

.admin-pin-context-list {
  display: grid;
  gap: 4px;
}

.admin-pin-context-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  line-height: 1.35;
}

.admin-pin-context-row > span {
  color: #9f1239;
  font-weight: 700;
}

.admin-pin-context-row > strong {
  color: #7f1d1d;
  font-weight: 900;
  text-align: right;
}

html[data-theme="dark"] .admin-pin-context-card {
  border-color: rgba(248, 113, 113, .34);
  background: linear-gradient(135deg, rgba(127, 29, 29, .24), rgba(120, 53, 15, .22));
  color: #fecaca;
}

html[data-theme="dark"] .admin-pin-context-heading,
html[data-theme="dark"] .admin-pin-context-row > strong {
  color: #fda4af;
}

html[data-theme="dark"] .admin-pin-context-row > span {
  color: #f9a8d4;
}

#admin-pin-input {
  text-align: center;
  letter-spacing: 8px;
  font-size: 22px;
  font-weight: 900;
}

.pin-shake {
  animation: pinShake .24s ease-in-out;
}

@keyframes pinShake {

  0%,
  100% {
    transform: translateX(0)
  }

  25% {
    transform: translateX(-5px)
  }

  75% {
    transform: translateX(5px)
  }
}

html[data-theme="dark"] .admin-pin-sheet {
  background: rgba(18, 26, 43, .98);
}



/* Queue ready players collapse */
.ready-players-card {
  margin-top: 12px;
}

.ready-count-pill {
  margin-left: auto;
  margin-right: 8px;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(17, 184, 154, .11);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.ready-player-list {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.ready-player-chip {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(125, 132, 145, .12);
}

.ready-player-chip:last-child {
  border-bottom: 0;
}

.ready-player-avatar {
  width: 34px !important;
  height: 34px !important;
  font-size: 13px !important;
}

.ready-player-info {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.ready-player-wait-time {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.ready-player-wait-time.wait-green {
  background-color: #f0fdf4;
  color: #16a34a;
}
.ready-player-wait-time.wait-yellow {
  background-color: #fef9c3;
  color: #ca8a04;
}
.ready-player-wait-time.wait-red {
  background-color: #fee2e2;
  color: #dc2626;
}

/* Dark mode variations */
html[data-theme="dark"] .ready-player-wait-time.wait-green {
  background-color: rgba(22, 163, 74, 0.15);
  color: #4ade80;
}
html[data-theme="dark"] .ready-player-wait-time.wait-yellow {
  background-color: rgba(234, 179, 8, 0.15);
  color: #facc15;
}
html[data-theme="dark"] .ready-player-wait-time.wait-red {
  background-color: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

/* Demo sandbox & Guest mode overrides (global scope) */
body.demo-sandbox-active .desktop-account-member-only,
body.demo-sandbox-active #settings-tab-account,
body.demo-sandbox-active #settings-panel-account,
body.demo-sandbox-active #system-account-group {
  display: none !important;
}
.guest-mode .desktop-account-member-only {
  display: none !important;
}

.ready-player-name {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ready-player-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="dark"] .ready-count-pill {
  background: rgba(45, 212, 191, .12);
  color: #5eead4;
}

html[data-theme="dark"] .ready-player-chip {
  border-bottom-color: rgba(148, 163, 184, .12);
}



/* Compact ready queue list */
.ready-players-card {
  margin-top: 10px !important;
  padding: 0 !important;
  border-radius: 16px !important;
}

.ready-players-card .collapse-toggle {
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
}

.ready-players-card .collapse-content.open {
  padding: 0 12px 10px !important;
}

.ready-count-pill {
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
  margin-right: 6px !important;
}

.ready-player-list {
  gap: 4px !important;
  padding-top: 0 !important;
}

.ready-player-chip {
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 8px !important;
  padding: 7px 0 !important;
}

.ready-player-avatar {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
}

.ready-player-name {
  font-size: 13px !important;
}

.ready-player-meta {
  font-size: 10.5px !important;
}



/* Check-in modal */
.queue-main-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
}

.checkin-entry-btn {
  white-space: nowrap;
}

.checkin-sheet {
  max-width: 520px;
}

.checkin-alert {
  border: 1px solid rgba(245, 158, 11, .24);
  background: rgba(245, 158, 11, .10);
  color: #b45309;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}

.checkin-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px;
}

.checkin-toolbar button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  padding: 2px 0;
}

.checkin-list {
  display: grid;
  gap: 8px;
  max-height: 45vh;
  overflow: auto;
  padding-right: 2px;
}

.checkin-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(125, 132, 145, .14);
  background: rgba(125, 132, 145, .045);
  border-radius: 14px;
  padding: 9px 10px;
  cursor: pointer;
  transition: all .15s;
}

.checkin-player-row.selected {
  border-color: rgba(17, 184, 154, .32);
  background: rgba(17, 184, 154, .08);
}

.checkin-player-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkin-box {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1.8px solid rgba(125, 132, 145, .35);
  background: rgba(255, 255, 255, .35);
  position: relative;
  flex-shrink: 0;
}

.checkin-player-row input:checked+.checkin-box {
  border-color: var(--accent);
  background: var(--accent);
}

.checkin-player-row input:checked+.checkin-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-20%, -68%) rotate(45deg);
  transform-origin: center;
}

.checkin-avatar {
  width: 34px !important;
  height: 34px !important;
  font-size: 13px !important;
}

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

.checkin-player-name {
  color: var(--text);
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkin-player-meta {
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 1px;
}

.checkin-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.checkin-status,
.checkin-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  flex: 1;
}

.checkin-footer .btn {
  width: auto;
  min-width: 150px;
}

html[data-theme="dark"] .checkin-alert {
  color: #fbbf24;
}

html[data-theme="dark"] .checkin-player-row {
  background: rgba(17, 26, 46, .48);
  border-color: rgba(148, 163, 184, .14);
}

html[data-theme="dark"] .checkin-player-row.selected {
  background: rgba(45, 212, 191, .09);
  border-color: rgba(45, 212, 191, .32);
}

html[data-theme="dark"] .checkin-box {
  background: rgba(17, 26, 46, .78);
  border-color: rgba(148, 163, 184, .26);
}

@media(max-width:420px) {
  .queue-main-actions {
    grid-template-columns: 1fr;
  }

  .checkin-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .checkin-footer .btn {
    width: 100%;
  }
}



/* Check-in gate + minimal button */
.checkin-mini-btn {
  border: 1px solid rgba(125, 132, 145, .18);
  background: rgba(125, 132, 145, .06);
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.checkin-mini-btn:hover {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .28);
  background: rgba(17, 184, 154, .07);
}

.queue-main-actions {
  grid-template-columns: auto 1fr !important;
  align-items: center;
}

.checkin-gate {
  text-align: center;
  padding: 18px 4px 8px;
}

.checkin-gate-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 184, 154, .10);
  color: var(--accent);
  border: 1px solid rgba(17, 184, 154, .18);
}

.checkin-gate-icon svg {
  width: 28px;
  height: 28px;
}

.checkin-gate-title {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.2px;
  margin-bottom: 6px;
}

.checkin-gate-desc {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 360px;
  margin: 0 auto 16px;
}

.checkin-form-wrap.hidden {
  display: none !important;
}

html[data-theme="dark"] .checkin-mini-btn {
  background: rgba(17, 26, 46, .58);
  border-color: rgba(148, 163, 184, .16);
}

html[data-theme="dark"] .checkin-gate-icon {
  background: rgba(45, 212, 191, .10);
  border-color: rgba(45, 212, 191, .20);
  color: #5eead4;
}

@media(max-width:420px) {
  .queue-main-actions {
    grid-template-columns: 1fr !important;
  }

  .checkin-mini-btn {
    width: 100%;
    padding: 9px 10px;
  }
}



/* Check-in forced gate actions */
.checkin-gate-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 340px;
  margin: 0 auto;
}

@media(max-width:420px) {
  .checkin-gate-actions {
    grid-template-columns: 1fr;
  }
}



/* Allow bottom nav while Check-in modal is open */
.bottom-nav {
  z-index: 700 !important;
}

#checkin-modal.modal-backdrop {
  padding-bottom: 86px !important;
}

#checkin-modal .modal-sheet {
  position: relative;
  z-index: 610;
}



/* Check-in initial modal + mobile centering + no expense tab animation */
#checkin-modal.modal-backdrop {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 16px 96px !important;
}

#checkin-modal .modal-sheet {
  margin: auto !important;
}

.expense-page {
  animation: none !important;
}

@media(max-width:420px) {
  #checkin-modal.modal-backdrop {
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 14px 88px !important;
  }

  #checkin-modal .modal-sheet {
    border-radius: 22px !important;
  }
}



/* Player management search */
.player-search-wrap {
  margin: 12px 0 8px;
}

.player-search-box {
  position: relative;
}

.player-search-box input {
  width: 100%;
  padding-right: 42px !important;
}

.player-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.player-search-clear svg {
  width: 15px;
  height: 15px;
}

.player-search-clear:hover {
  background: rgba(125, 132, 145, .08);
  color: var(--text);
}

html[data-theme="dark"] .player-search-clear:hover {
  background: rgba(148, 163, 184, .10);
}



/* Admin PIN modal mobile centering */
#admin-pin-modal.modal-backdrop {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

#admin-pin-modal .modal-sheet {
  margin: auto !important;
  max-width: 420px !important;
  width: 100% !important;
  border-radius: 22px !important;
}

@media(max-width:420px) {
  #admin-pin-modal.modal-backdrop {
    align-items: center !important;
    justify-content: center !important;
    padding: 14px !important;
    padding-bottom: 88px !important;
  }

  #admin-pin-modal .modal-sheet {
    transform: none !important;
  }
}

/* More visible but still minimal expense history button */
.expense-history-pill-btn {
  width: auto !important;
  height: 34px !important;
  min-width: auto !important;
  padding: 0 12px !important;
  gap: 6px !important;
  border-radius: 999px !important;
  color: var(--accent) !important;
  border-color: rgba(17, 184, 154, .28) !important;
  background: rgba(17, 184, 154, .08) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.expense-history-pill-btn svg {
  width: 15px !important;
  height: 15px !important;
}

.expense-history-pill-btn span {
  display: inline-block;
  line-height: 1;
}

.expense-history-pill-btn:hover {
  background: rgba(17, 184, 154, .13) !important;
  border-color: rgba(17, 184, 154, .40) !important;
  transform: none;
}

html[data-theme="dark"] .expense-history-pill-btn {
  color: #5eead4 !important;
  background: rgba(45, 212, 191, .10) !important;
  border-color: rgba(45, 212, 191, .26) !important;
}

@media(max-width:360px) {
  .expense-history-pill-btn span {
    display: none;
  }

  .expense-history-pill-btn {
    width: 34px !important;
    padding: 0 !important;
  }
}



/* Edit player + previews + UX polish */
.icon-btn-edit {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn-edit svg {
  width: 17px;
  height: 17px;
}

.icon-btn-edit:hover {
  color: var(--accent);
  background: rgba(17, 184, 154, .08);
}

.edit-player-actions,
.expense-preview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.expense-preview-text {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(125, 132, 145, .14);
  border-radius: 14px;
  background: rgba(125, 132, 145, .06);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.65;
  max-height: 48vh;
  overflow: auto;
}

.today-summary-card .help {
  margin-bottom: 12px;
}

html[data-theme="dark"] .expense-preview-text {
  background: rgba(8, 11, 20, .30);
  border-color: rgba(148, 163, 184, .12);
}



/* Stats layout guard */
#page-stats .stats-panel {
  width: 100%;
}

#page-stats .today-summary-card {
  margin-top: 12px;
}



/* Toast should stay above all modals */
.toast,
#toast {
  z-index: 9999 !important;
  position: fixed !important;
}

#toast.show,
.toast.show {
  z-index: 9999 !important;
}



/* Reset day CTA polish */
.subscription-expiry-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 12px 14px !important;
  border-color: color-mix(in srgb, var(--border) 88%, var(--accent)) !important;
  background: color-mix(in srgb, var(--card) 94%, var(--accent)) !important;
}

.subscription-expiry-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subscription-expiry-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  background: rgba(20, 184, 166, .12);
  border: 1px solid rgba(20, 184, 166, .16);
  flex: 0 0 auto;
}

.subscription-expiry-icon .material-symbols-outlined {
  font-size: 17px;
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.subscription-expiry-title {
  min-width: 0;
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
}

.subscription-expiry-title strong {
  font-size: 13px;
  color: var(--text);
}

.subscription-expiry-title small,
.subscription-expiry-help,
.subscription-expiry-grid span {
  color: var(--muted);
}

.subscription-expiry-pill {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .74rem;
  font-weight: 900;
  white-space: nowrap;
  color: #0f766e;
  background: rgba(20, 184, 166, .12);
  border: 1px solid rgba(20, 184, 166, .18);
}

.subscription-expiry-card[data-tone="warning"] {
  border-color: rgba(245, 158, 11, .30) !important;
}

.subscription-expiry-card[data-tone="warning"] .subscription-expiry-icon,
.subscription-expiry-card[data-tone="warning"] .subscription-expiry-pill {
  color: #b45309;
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .22);
}

.subscription-expiry-card[data-tone="expired"] {
  border-color: rgba(239, 68, 68, .30) !important;
}

.subscription-expiry-card[data-tone="expired"] .subscription-expiry-icon,
.subscription-expiry-card[data-tone="expired"] .subscription-expiry-pill {
  color: #dc2626;
  background: rgba(239, 68, 68, .10);
  border-color: rgba(239, 68, 68, .20);
}

.subscription-expiry-card[data-tone="neutral"] .subscription-expiry-icon,
.subscription-expiry-card[data-tone="neutral"] .subscription-expiry-pill {
  color: var(--muted);
  background: rgba(148, 163, 184, .10);
  border-color: rgba(148, 163, 184, .18);
}

.subscription-expiry-grid {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
}

/* Account settings: compact, readable status hierarchy. */
#settings-panel-account .settings-system-flow {
  gap: 20px;
}

#settings-panel-account .system-settings-group {
  gap: 8px;
}

#settings-panel-account .subscription-expiry-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 18px;
  align-items: center;
  min-height: 60px;
  padding: 12px 14px !important;
  box-shadow: 0 5px 14px rgba(31, 41, 55, .045) !important;
}

#settings-panel-account .subscription-expiry-head {
  min-width: 0;
}

#settings-panel-account .subscription-expiry-pill {
  margin-left: auto;
}

#settings-panel-account .subscription-expiry-grid {
  justify-self: end;
  gap: 12px;
}

#settings-panel-account .subscription-expiry-grid > div + div::before {
  content: '·';
  margin-right: 12px;
  color: color-mix(in srgb, var(--muted) 46%, transparent);
}

#settings-panel-account .subscription-expiry-grid strong {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
}

#settings-panel-account .password-card {
  box-shadow: 0 3px 10px rgba(31, 41, 55, .035) !important;
}

#settings-panel-account .password-card .system-collapse-toggle {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  gap: 12px;
  min-height: 72px;
  padding: 14px 16px !important;
  text-align: left;
}

#settings-panel-account .password-card .system-collapse-toggle > span:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  grid-column: 2;
  grid-row: 1;
  gap: 2px !important;
  min-width: 0;
}

#settings-panel-account .password-card .password-card-icon {
  display: grid !important;
  place-items: center;
  align-items: center !important;
  justify-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 0 !important;
  grid-column: 1;
  grid-row: 1;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 23px;
  line-height: 1;
  text-align: center;
}

#settings-panel-account .password-card .collapse-chevron {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

@media (max-width: 560px) {
  #settings-panel-account .settings-system-flow {
    gap: 18px;
  }

  #settings-panel-account .subscription-expiry-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    min-height: 64px;
    box-shadow: 0 3px 10px rgba(31, 41, 55, .045) !important;
  }

  #settings-panel-account .subscription-expiry-head {
    align-items: center;
  }

  #settings-panel-account .subscription-expiry-grid {
    grid-column: 1 / -1;
    justify-self: start;
    padding-left: 42px;
    gap: 8px;
  }

  #settings-panel-account .subscription-expiry-grid > div + div::before {
    margin-right: 8px;
  }

  #settings-panel-account .subscription-expiry-title small {
    display: none;
  }

  #settings-panel-account .password-card {
    box-shadow: 0 2px 8px rgba(31, 41, 55, .03) !important;
  }

  #settings-panel-account .password-card .system-collapse-toggle {
    grid-template-columns: 36px minmax(0, 1fr) 24px;
    gap: 9px;
    min-height: 64px;
    padding: 12px !important;
  }

  #settings-panel-account .password-card .password-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 21px;
  }
}

/* Admin PromptPay profile and explicit expense-copy policy. */
.admin-promptpay-account-card {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--accent) 3%, var(--card));
}

.admin-promptpay-card-trigger {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.admin-promptpay-card-trigger:hover,
.admin-promptpay-card-trigger:focus-visible {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.admin-promptpay-card-trigger:focus-visible,
.admin-promptpay-radio-row:focus-within,
.admin-promptpay-method-option:focus-within,
.admin-promptpay-enabled-row:focus-within,
.admin-promptpay-upload-dropzone:focus-within {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: -3px;
}

.admin-promptpay-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 24px;
}

.admin-promptpay-card-copy,
.admin-promptpay-method-copy,
.admin-promptpay-enabled-row > .admin-promptpay-control-copy,
.admin-promptpay-upload-dropzone > span:last-child,
.admin-promptpay-qr-preview-head > span:last-child {
  min-width: 0;
}

.admin-promptpay-card-copy,
.admin-promptpay-method-copy,
.admin-promptpay-enabled-row > .admin-promptpay-control-copy,
.admin-promptpay-upload-dropzone > span:last-child,
.admin-promptpay-qr-preview-head > span:last-child {
  display: grid;
  gap: 2px;
}

.admin-promptpay-card-copy strong,
.admin-promptpay-card-copy span,
.admin-promptpay-method-copy strong,
.admin-promptpay-method-copy small,
.admin-promptpay-enabled-row .admin-promptpay-control-copy strong,
.admin-promptpay-enabled-row .admin-promptpay-control-copy small,
.admin-promptpay-upload-dropzone strong,
.admin-promptpay-upload-dropzone small,
.admin-promptpay-qr-preview-head strong,
.admin-promptpay-qr-preview-head small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-promptpay-card-copy strong {
  font-size: 14px;
  font-weight: 850;
}

.admin-promptpay-card-status {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.admin-promptpay-card-status[data-state="disabled"] {
  color: var(--muted);
}

.admin-promptpay-card-status[data-state="unset"] {
  color: var(--playing);
}

.admin-promptpay-card-description {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.admin-promptpay-card-state {
  color: var(--playing);
  font-size: 19px;
}

.admin-promptpay-card-state[data-state="ready"] {
  color: var(--accent);
}

.admin-promptpay-card-state[data-state="disabled"] {
  color: var(--muted);
}

.admin-promptpay-card-chevron {
  color: var(--muted);
  font-size: 22px;
}

.admin-promptpay-copy-mode-card {
  margin-top: 16px;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

.admin-promptpay-copy-mode {
  border: 0;
  padding: 0;
}

.admin-promptpay-copy-mode .card-title {
  margin-bottom: 5px;
  color: var(--text);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
}

.admin-promptpay-copy-mode-help {
  margin: 0 0 12px;
  line-height: 1.55;
}

.admin-promptpay-radio-row,
.admin-promptpay-method-option,
.admin-promptpay-enabled-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg3) 65%, transparent);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.admin-promptpay-radio-row + .admin-promptpay-radio-row,
.admin-promptpay-method-option + .admin-promptpay-method-option {
  margin-top: 8px;
}

.admin-promptpay-radio-row:hover,
.admin-promptpay-method-option:hover,
.admin-promptpay-enabled-row:hover,
.admin-promptpay-radio-row:has(input:checked),
.admin-promptpay-method-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

.admin-promptpay-radio-row input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.admin-promptpay-method-option,
.admin-promptpay-enabled-row {
  position: relative;
}

.admin-promptpay-method-option input,
.admin-promptpay-enabled-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.admin-promptpay-control-mark {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid color-mix(in srgb, var(--muted) 70%, var(--border));
  border-radius: 50%;
  background: var(--card);
  color: var(--accent);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.admin-promptpay-enabled-row .admin-promptpay-control-mark {
  border-radius: 6px;
}

.admin-promptpay-method-option:has(input:checked) .admin-promptpay-control-mark {
  border-color: var(--accent);
  background: radial-gradient(circle at center, var(--accent) 0 5px, transparent 5.5px);
}

.admin-promptpay-enabled-row:has(input:checked) .admin-promptpay-control-mark {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.admin-promptpay-enabled-row:has(input:checked) .admin-promptpay-control-mark::after {
  content: "";
  width: 9px;
  height: 5px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -1px);
}

.admin-promptpay-enabled-row {
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
}

.admin-promptpay-enabled-row > .admin-promptpay-control-mark {
  margin-top: 0;
}

.admin-promptpay-enabled-row > .admin-promptpay-control-copy {
  gap: 4px;
}

.admin-promptpay-method-option,
.admin-promptpay-enabled-row {
  align-items: center;
  gap: 12px;
}

.admin-promptpay-method-option > .admin-promptpay-control-mark,
.admin-promptpay-enabled-row > .admin-promptpay-control-mark {
  align-self: center;
  margin-top: 0;
}

.admin-promptpay-radio-row span,
.admin-promptpay-method-copy,
.admin-promptpay-enabled-row > .admin-promptpay-control-copy {
  color: var(--text);
}

.admin-promptpay-radio-row strong,
.admin-promptpay-method-copy strong,
.admin-promptpay-enabled-row .admin-promptpay-control-copy strong {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.admin-promptpay-radio-row small,
.admin-promptpay-method-copy small,
.admin-promptpay-enabled-row .admin-promptpay-control-copy small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.admin-promptpay-settings-backdrop {
  z-index: 10100;
}

.admin-promptpay-settings-sheet {
  width: min(100% - 24px, 540px);
  max-height: min(760px, calc(100dvh - 24px));
  overflow: hidden;
}

.admin-promptpay-settings-body {
  display: grid;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-promptpay-settings-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

.admin-promptpay-settings-note > .material-symbols-outlined {
  color: var(--accent);
  font-size: 22px;
}

.admin-promptpay-settings-note p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.admin-promptpay-settings-note strong {
  color: var(--text);
}

.admin-promptpay-method-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.admin-promptpay-method-fieldset > legend {
  padding: 0;
  margin-bottom: 7px;
}

.admin-promptpay-upload-panel {
  display: grid;
  gap: 7px;
}

.admin-promptpay-upload-dropzone {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  cursor: pointer;
}

.admin-promptpay-upload-dropzone > .material-symbols-outlined {
  font-size: 28px;
}

.admin-promptpay-upload-dropzone strong {
  color: var(--text);
  font-size: 13px;
}

.admin-promptpay-upload-dropzone small {
  color: var(--muted);
  font-size: 11px;
}

.admin-promptpay-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.admin-promptpay-upload-status,
.admin-promptpay-status,
.admin-promptpay-field-error,
.admin-promptpay-copy-mode-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-promptpay-field-error,
.admin-promptpay-status[data-tone="error"] {
  color: var(--danger);
}

.admin-promptpay-status[data-tone="success"],
.admin-promptpay-upload-status[data-tone="success"],
.admin-promptpay-copy-mode-status[data-tone="success"] {
  color: var(--accent);
}

.admin-promptpay-qr-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg3) 48%, var(--card));
}

.admin-promptpay-qr-preview-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-promptpay-qr-preview-head > .material-symbols-outlined {
  color: var(--accent);
  font-size: 22px;
}

.admin-promptpay-qr-preview-head strong {
  display: block;
  color: var(--text);
  font-size: 12.5px;
}

.admin-promptpay-qr-preview-head small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.admin-promptpay-qr-preview-frame {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
}

.admin-promptpay-qr-preview-frame img {
  display: block;
  width: min(100%, 220px);
  aspect-ratio: 1;
  object-fit: contain;
}

.admin-promptpay-remove-qr-btn {
  justify-self: start;
  color: var(--danger);
}

.admin-promptpay-settings-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 10px;
}

.admin-promptpay-settings-footer .btn {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  gap: 8px;
  font-weight: 800;
}

.admin-promptpay-settings-footer .btn-secondary {
  border-color: var(--border);
  background: var(--bg3);
  color: var(--text);
}

.admin-promptpay-settings-footer .btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 20%, transparent);
}

.admin-promptpay-settings-footer .btn:hover:not(:disabled),
.admin-promptpay-settings-footer .btn:active:not(:disabled) {
  transform: none;
}

.admin-promptpay-phone-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.admin-promptpay-phone-field input:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}

.admin-promptpay-phone-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.admin-promptpay-method-option:has(input:focus-visible),
.admin-promptpay-enabled-row:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: -3px;
}

@media (max-width: 560px) {
  .admin-promptpay-card-trigger {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 12px;
  }

  .admin-promptpay-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 21px;
  }

  .admin-promptpay-card-state {
    display: none;
  }

  .admin-promptpay-card-description {
    display: none;
  }

  .admin-promptpay-settings-sheet {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 20px;
  }

  .admin-promptpay-settings-footer {
    grid-template-columns: 1fr 1.2fr;
  }

  .admin-promptpay-settings-footer .btn {
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-promptpay-card-trigger,
  .admin-promptpay-radio-row,
  .admin-promptpay-method-option,
  .admin-promptpay-enabled-row,
  .admin-promptpay-control-mark,
  .admin-promptpay-phone-field input,
  .admin-promptpay-settings-footer .btn {
    transition: none;
  }
}

.subscription-expiry-grid>div {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.subscription-expiry-grid strong {
  color: var(--muted);
  font-size: 11.5px;
}

.subscription-expiry-help {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-weight: 700;
  font-size: 11.5px;
  white-space: nowrap;
}

.subscription-expiry-grid span,
.subscription-expiry-help {
  display: none;
}

html[data-theme="dark"] .subscription-expiry-card {
  border-color: rgba(45, 212, 191, .22) !important;
}

html[data-theme="dark"] .subscription-expiry-grid>div {
  background: rgba(15, 23, 42, .45);
}

@media (max-width: 560px) {
  .subscription-expiry-head {
    align-items: flex-start;
  }

  .subscription-expiry-pill {
    margin-left: auto;
  }

  .subscription-expiry-grid {
    grid-template-columns: 1fr;
  }
}

.reset-day-card {
  border-color: rgba(245, 158, 11, .28) !important;
  background:
    linear-gradient(180deg, rgba(245, 158, 11, .08), rgba(245, 158, 11, .035)),
    var(--card) !important;
}

.reset-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--text) !important;
}

.reset-title-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--playing);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .12);
  flex-shrink: 0;
}

.reset-day-card .help {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 14px !important;
}

.reset-day-main-btn {
  width: 100% !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(245, 158, 11, .38) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, .92), rgba(251, 146, 60, .86)) !important;
  color: #171717 !important;
  box-shadow: 0 12px 28px rgba(245, 158, 11, .18) !important;
  font-weight: 900 !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}

.reset-day-main-btn:hover {
  transform: none;
  filter: saturate(1.05);
  box-shadow: 0 16px 34px rgba(245, 158, 11, .24) !important;
}

.reset-day-main-btn:active {
  transform: scale(.985);
}

.reset-btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reset-btn-icon svg {
  width: 18px;
  height: 18px;
}

.reset-day-main-btn span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.reset-day-main-btn strong {
  font-size: 14px;
}

.reset-day-main-btn small {
  font-size: 11px;
  opacity: .78;
  font-weight: 800;
  margin-top: 2px;
}

html[data-theme="dark"] .reset-day-card {
  border-color: rgba(251, 191, 36, .24) !important;
  background:
    linear-gradient(180deg, rgba(245, 158, 11, .10), rgba(245, 158, 11, .035)),
    rgba(18, 26, 43, .96) !important;
}

html[data-theme="dark"] .reset-day-main-btn {
  background: linear-gradient(135deg, #fbbf24, #fb923c) !important;
  color: #111827 !important;
}

@media(max-width:420px) {
  .reset-day-main-btn {
    min-height: 58px !important;
  }
}



/* Court profile default */
.court-profile-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.court-profile-default-btn {
  border: 1px solid rgba(100, 116, 139, .22);
  background: rgba(100, 116, 139, .07);
  color: #52657d;
  border-radius: 999px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.court-profile-default-btn:disabled {
  opacity: 1;
  cursor: default;
  background: rgba(17, 184, 154, .14);
}

.default-badge {
  display: inline-flex;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(17, 184, 154, .12);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  vertical-align: middle;
}

.court-profile-default {
  background: rgba(17, 184, 154, .055);
  box-shadow: inset 3px 0 0 rgba(17, 184, 154, .52);
}

/* Redirect to expense history detail */
.history-view-expense-btn {
  border: 1px solid rgba(109, 93, 252, .22);
  background: rgba(109, 93, 252, .07);
  color: #6d5dfc;
  border-radius: 999px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.history-view-expense-btn:hover {
  background: rgba(109, 93, 252, .12);
}

html[data-theme="dark"] .history-view-expense-btn {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, .22);
  background: rgba(167, 139, 250, .07);
}

html[data-theme="dark"] .history-view-expense-btn:hover {
  background: rgba(167, 139, 250, .12);
}

/* History copy action */
.history-copy-btn {
  border: 1px solid rgba(17, 184, 154, .22);
  background: rgba(17, 184, 154, .07);
  color: var(--accent);
  border-radius: 999px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.history-copy-btn:hover {
  background: rgba(17, 184, 154, .12);
}

/* Smarter empty state */
.smart-empty {
  padding: 30px 14px !important;
}

.smart-empty p strong {
  color: var(--text);
  font-size: 14px;
}

.empty-action-btn {
  margin-top: 12px;
  border: 1px solid rgba(17, 184, 154, .24);
  background: rgba(17, 184, 154, .08);
  color: var(--accent);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

/* Modal consistency */
.modal-sheet {
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  flex-shrink: 0;
}

.modal-body {
  overflow: auto;
}

.modal-body .btn {
  min-height: 44px;
}

.modal-title {
  letter-spacing: -.15px;
}

.modal-subtitle {
  line-height: 1.45;
}


html[data-theme="dark"] .court-profile-default {
  background: rgba(45, 212, 191, .045);
}

html[data-theme="dark"] .court-profile-default-btn {
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, .24);
  background: rgba(148, 163, 184, .09);
}

html[data-theme="dark"] .history-copy-btn,
html[data-theme="dark"] .empty-action-btn {
  color: #5eead4;
  border-color: rgba(45, 212, 191, .24);
  background: rgba(45, 212, 191, .09);
}

@media(max-width:420px) {
  .court-profile-row {
    align-items: flex-start;
  }

  .court-profile-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .accordion-actions {
    flex-wrap: wrap;
  }
}



/* Bottom nav refined active state */
.bottom-nav .nav-btn {
  position: relative;
  border-radius: 12px;
  color: var(--muted);
  transition: color .15s ease, transform .15s ease;
}

.bottom-nav .nav-btn.active {
  color: var(--accent);
  background: transparent !important;
  transform: none;
}

.bottom-nav .nav-btn.active svg {
  stroke-width: 2.05;
}

.bottom-nav .nav-btn.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .9;
}

.bottom-nav .nav-btn:not(.active):hover {
  color: var(--text);
}

html[data-theme="dark"] .bottom-nav .nav-btn.active {
  color: #5eead4;
}

html[data-theme="dark"] .bottom-nav .nav-btn.active::after {
  background: linear-gradient(90deg, transparent, #5eead4, transparent);
}






/* Responsive layout: mobile vs desktop */
html {
  scrollbar-gutter: stable;
}

body {
  overflow-x: hidden;
}

/* Mobile first: app-like full width */
.topbar {
  width: 100%;
  max-width: none;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin: 0;
}

.page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box;
}

.bottom-nav {
  width: 100%;
  max-width: none;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  box-sizing: border-box;
}

.bottom-nav .nav-btn,
.bottom-nav .nav-btn.active {
  transform: none !important;
}

/* Tablet / small desktop */
@media(min-width:720px) {
  body {
    background:
      radial-gradient(circle at 50% -10%, rgba(17, 184, 154, .08), transparent 34%),
      var(--bg);
  }

  .topbar,
  .page,
  .bottom-nav {
    width: min(calc(100% - 40px), 760px);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .topbar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-radius: 0 0 20px 20px;
  }

  .page {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expense-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expense-full {
    grid-column: 1 / -1;
  }
}

/* Desktop: wider working area */
@media(min-width:1024px) {

  .topbar,
  .page,
  .bottom-nav {
    width: min(calc(100% - 64px), 920px);
    max-width: 920px;
  }

  .page {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #page-settings .settings-panel.active {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  #settings-panel-expense .card,
  #page-stats .card {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  #page-queue .card,
  #page-queue .section-heading,
  #page-queue .queue-filter-tabs,
  #page-queue #active-courts {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  #page-queue .section-heading {
    margin-top: 18px;
    margin-bottom: 10px;
  }
}

/* Large desktop */
@media(min-width:1280px) {

  .topbar,
  .page,
  .bottom-nav {
    width: min(calc(100% - 96px), 1040px);
    max-width: 1040px;
  }
}



/* Tablet responsive layer */
@media(min-width:768px) and (max-width:1023px) {

  .topbar,
  .page,
  .bottom-nav {
    width: min(calc(100% - 48px), 820px) !important;
    max-width: 820px !important;
  }

  .page {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Tablet keeps content breathable but avoids overly wide single cards */
  #page-queue .card,
  #page-queue .section-heading,
  #page-queue .queue-filter-tabs,
  #page-queue #active-courts,
  #settings-panel-expense .card,
  #page-stats .card,
  #page-settings .settings-panel.active {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Tablet: allow two columns where useful */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .expense-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .expense-full {
    grid-column: 1 / -1 !important;
  }

  .court-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .queue-main-actions {
    grid-template-columns: auto 1fr !important;
  }

  .bottom-nav .nav-btn {
    min-height: 58px;
  }

  .modal-sheet {
    width: min(92vw, 620px) !important;
  }

  .checkin-sheet,
  .expense-history-modal-sheet {
    width: min(92vw, 680px) !important;
  }
}

/* Small tablets / large phones */
@media(min-width:600px) and (max-width:767px) {

  .topbar,
  .page,
  .bottom-nav {
    width: min(calc(100% - 32px), 680px) !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .topbar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-radius: 0 0 18px 18px;
  }

  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 18px 18px 0 0 !important;
    overflow: hidden !important;
  }

  .page {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .expense-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .expense-full {
    grid-column: 1 / -1 !important;
  }
}



/* Tablet/header stability fix */
.topbar {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 8px !important;
}

body.qbad-ios-viewport.auth-ready .topbar .theme-toggle {
  grid-column: 1 !important;
  justify-self: start !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
}

body.qbad-ios-viewport.auth-ready .topbar-logo {
  grid-column: 2 !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.qbad-ios-viewport.auth-ready .topbar-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  position: relative !important;
  right: auto !important;
  width: auto !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.topbar-logo {
  min-width: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.theme-toggle {
  justify-self: start !important;
}

.sync-dot {
  justify-self: end !important;
}

/* Safer breakpoint widths using calc() for better browser support */
@media(min-width:600px) and (max-width:767px) {

  .topbar,
  .page,
  .bottom-nav {
    width: min(calc(100% - 32px), 680px) !important;
  }
}

@media(min-width:768px) and (max-width:1023px) {

  .topbar,
  .page,
  .bottom-nav {
    width: min(calc(100% - 48px), 820px) !important;
  }
}

@media(min-width:1024px) {

  .topbar,
  .page,
  .bottom-nav {
    width: min(calc(100% - 64px), 920px) !important;
  }
}

@media(min-width:1280px) {

  .topbar,
  .page,
  .bottom-nav {
    width: min(calc(100% - 96px), 1040px) !important;
  }
}

/* Keep expense form from becoming too cramped on small tablets */
@media(min-width:600px) and (max-width:767px) {
  #settings-panel-expense .card {
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .expense-form-grid {
    grid-template-columns: 1fr !important;
  }

  .expense-full {
    grid-column: auto !important;
  }
}



/* Header center alignment fix */
@media(min-width:600px) {
  .topbar {
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Keep fixed bottom nav centered separately */
@media(min-width:600px) {
  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}



/* =========================================================
   Mobile modal fit fix — scoped to modals only
   Based on the uploaded 3-file version.
   ========================================================= */

/* Base modal behavior */
.modal-backdrop {
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 12px calc(88px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

/* Every modal sheet must fit inside the visible viewport */
.modal-backdrop .modal-sheet {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  max-height: calc(100dvh - 128px - env(safe-area-inset-bottom)) !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

/* Header stays visible, body becomes scrollable */
.modal-backdrop .modal-header {
  flex: 0 0 auto !important;
}

.modal-backdrop .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 16px !important;
}

/* Keep confirm CTA above court scoreboard / score picker overlays */
#action-confirm-modal.modal-backdrop {
  z-index: 10130 !important;
}

#rotation-settings-unsaved-modal.modal-backdrop {
  z-index: 2000 !important;
  pointer-events: auto !important;
}

#rotation-settings-unsaved-modal .modal-sheet {
  position: relative !important;
  z-index: 2001 !important;
  pointer-events: auto !important;
}

#rotation-settings-unsaved-modal .rotation-settings-unsaved-actions,
#rotation-settings-unsaved-modal .rotation-settings-unsaved-actions button {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body:has(#rotation-settings-unsaved-modal:not(.hidden)) .topbar,
body:has(#rotation-settings-unsaved-modal:not(.hidden)) .bottom-nav {
  z-index: 300 !important;
  pointer-events: none !important;
}

#action-confirm-modal .modal-sheet {
  position: relative !important;
  z-index: 10131 !important;
}

#action-confirm-modal.action-confirm-modal--queue-spread .modal-body {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-bottom: 12px !important;
}

#action-confirm-modal.action-confirm-modal--queue-spread #action-confirm-custom-content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 2px 8px;
  margin: 0 -2px;
}

#action-confirm-modal.action-confirm-modal--queue-spread .queue-spread-warning {
  width: 100%;
}

#action-confirm-modal.action-confirm-modal--queue-spread .admin-pin-actions {
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: var(--card);
  box-shadow: 0 -10px 18px rgba(15, 23, 42, 0.05);
}

html[data-theme="dark"] #action-confirm-modal.action-confirm-modal--queue-spread .admin-pin-actions {
  box-shadow: 0 -10px 18px rgba(0, 0, 0, 0.22);
}

#admin-pin-modal,
#deleted-players-modal,
#expense-history-modal,
#deleted-session-history-modal,
#deleted-expense-history-modal,
#edit-player-modal {
  z-index: 900 !important;
}

#admin-pin-modal .modal-sheet,
#deleted-players-modal .modal-sheet,
#expense-history-modal .modal-sheet,
#deleted-session-history-modal .modal-sheet,
#deleted-expense-history-modal .modal-sheet,
#edit-player-modal .modal-sheet {
  position: relative !important;
  z-index: 910 !important;
}

/* Expense edit/revision dialogs are opened from the history dialog. Keep the
   parent visible for return navigation, but layer these desktop submodals
   above its z-index 900 backdrop. Mobile overrides below remain unchanged. */
#expense-edit-modal,
#expense-revision-modal {
  z-index: 950 !important;
}

#expense-edit-modal .modal-sheet,
#expense-revision-modal .modal-sheet {
  position: relative !important;
  z-index: 960 !important;
}

/* Check-in modal is special: bottom tabs should remain clickable */
#checkin-modal {
  z-index: 500 !important;
}

#checkin-modal .modal-sheet {
  position: relative !important;
  z-index: 610 !important;
}

/* Make bottom nav clickable over Check-in only, while still staying behind other modals */
.bottom-nav {
  z-index: 700 !important;
}

/* Deleted players modal: prevent card/actions from pushing below viewport */
#deleted-players-modal .deleted-player-card {
  min-width: 0 !important;
}

#deleted-players-modal .deleted-player-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#deleted-players-modal .deleted-player-actions {
  flex-shrink: 0 !important;
}

/* Admin PIN modal: compact and scroll-safe */
#admin-pin-modal .admin-pin-sheet {
  max-width: 420px !important;
}

#admin-pin-modal #admin-pin-input {
  font-size: 20px !important;
  letter-spacing: 6px !important;
  min-height: 52px !important;
}

/* Expense history modal: accordion details can scroll inside body */
#expense-history-modal .expense-history-modal-sheet {
  max-height: calc(100dvh - 128px - env(safe-area-inset-bottom)) !important;
}

/* Small mobile refinements */
@media(max-width:420px) {
  .modal-backdrop {
    padding: 10px 10px calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .modal-backdrop .modal-sheet {
    width: 100% !important;
    max-height: calc(100dvh - 108px - env(safe-area-inset-bottom)) !important;
    border-radius: 22px !important;
  }

  .modal-backdrop .modal-header {
    padding: 15px 15px 11px !important;
  }

  .modal-backdrop .modal-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  .modal-backdrop .modal-subtitle {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  .modal-backdrop .modal-body {
    padding: 10px 15px 14px !important;
  }

  /* Deleted players modal mobile card layout */
  #deleted-players-modal .deleted-player-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #deleted-players-modal .deleted-player-main {
    min-width: 0 !important;
  }

  #deleted-players-modal .deleted-player-actions {
    width: auto !important;
    justify-content: flex-end !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  #deleted-players-modal .restore-chip-btn,
  #deleted-players-modal .permanent-delete-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Admin PIN modal should not be hidden behind bottom nav */
  #admin-pin-modal .admin-pin-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  #admin-pin-modal .admin-pin-actions .btn {
    padding: 10px 8px !important;
    font-size: 13px !important;
  }

  #admin-pin-modal #admin-pin-input {
    font-size: 18px !important;
    letter-spacing: 5px !important;
  }

  /* Expense history modal */
  #expense-history-modal .expense-accordion-head {
    padding: 11px 12px !important;
  }

  #expense-history-modal .expense-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Very short screens */
@media(max-height:700px) {
  .modal-backdrop {
    align-items: center !important;
    padding-top: 8px !important;
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }

  .modal-backdrop .modal-sheet {
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom)) !important;
  }
}

/* Custom player pick before starting game */
.player-chip-pick {
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text);
  transition: border-color .14s cubic-bezier(.22, 1, .36, 1),
    background-color .14s cubic-bezier(.22, 1, .36, 1),
    color .14s cubic-bezier(.22, 1, .36, 1),
    box-shadow .14s cubic-bezier(.22, 1, .36, 1),
    opacity .14s cubic-bezier(.22, 1, .36, 1);
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.player-chip-pick.is-press-holding {
  touch-action: none;
  transform: scale(.985);
}

.player-chip-pick.is-longpress-ready {
  touch-action: none;
  border-color: rgba(17, 184, 154, .45) !important;
  box-shadow: 0 0 0 2px rgba(17, 184, 154, .18);
}

.player-chip-pick:focus-visible {
  outline: 2px solid rgba(17, 184, 154, .45);
  outline-offset: 2px;
}

.player-chip-pick.is-drag-source {
  opacity: .34;
}

.player-chip-pick.is-drop-target {
  border-color: var(--accent) !important;
  background: rgba(17, 184, 154, .16) !important;
  outline: 3px solid rgba(17, 184, 154, .42);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 6px 18px rgba(17, 184, 154, .22);
}

.player-chip-pick.team-chip-a.is-drop-target {
  border-color: var(--teamA) !important;
  background: rgba(37, 99, 235, .16) !important;
  outline-color: rgba(37, 99, 235, .42);
}

.player-chip-pick.team-chip-b.is-drop-target {
  border-color: var(--teamB) !important;
  background: rgba(225, 29, 72, .14) !important;
  outline-color: rgba(225, 29, 72, .40);
}

body.court-player-dragging {
  touch-action: none;
  overscroll-behavior: none;
}

.court-player-drag-focus-layer {
  position: fixed;
  inset: 0;
  z-index: 10040;
  pointer-events: none;
}

.court-player-drag-focus-panel {
  position: fixed;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .18s ease;
}

.court-player-drag-focus-layer.is-visible .court-player-drag-focus-panel {
  opacity: 1;
}

.court-player-drag-focus-aperture {
  position: fixed;
  border-radius: 28px;
  box-shadow: 0 0 0 100vmax rgba(7, 12, 22, .62);
  opacity: 0;
  transition: opacity .18s ease;
}

.court-player-drag-focus-layer.is-visible .court-player-drag-focus-aperture {
  opacity: 1;
}

.teams-grid.is-drag-focus-grid {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, .98), 0 16px 40px 12px rgba(15, 23, 42, .20) !important;
}

html[data-theme="dark"] .teams-grid.is-drag-focus-grid {
  background: color-mix(in srgb, var(--card) 86%, #070d1a);
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--card) 86%, #070d1a),
    0 16px 40px 12px rgba(0, 0, 0, .52) !important;
}

html[data-theme="dark"] .court-player-drag-ghost {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .48);
}

html[data-theme="dark"] .court-player-skip-drop-zone {
  border-color: rgba(148, 163, 184, .34);
  background: rgba(15, 23, 42, .84);
  color: #e2e8f0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .32);
}

html[data-theme="dark"] .court-player-skip-drop-zone small {
  color: #94a3b8;
}

html[data-theme="dark"] .court-player-skip-drop-icon {
  background: rgba(148, 163, 184, .16);
  color: #94a3b8;
}

html[data-theme="dark"] .court-player-skip-drop-zone.is-active {
  border-color: rgba(251, 113, 133, .72);
  background: rgba(76, 5, 25, .9);
  color: #fecdd3;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
}

html[data-theme="dark"] .court-player-skip-drop-zone.is-active .court-player-skip-drop-icon {
  background: rgba(251, 113, 133, .18);
  color: #fecdd3;
}

.court-player-drag-guide {
  position: fixed;
  left: 50%;
  z-index: 10060;
  width: min(460px, calc(100vw - 28px));
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(148, 163, 184, .30);
  border-radius: 999px;
  background: rgba(15, 23, 42, .86);
  color: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

.court-player-drag-guide > span:first-child {
  color: #a5b4fc;
  font-size: 15px;
}

.court-player-drag-guide b {
  color: rgba(255, 255, 255, .38);
  font-weight: 700;
}

.court-player-skip-drop-zone {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  z-index: 10060;
  width: min(300px, calc(100vw - 40px));
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 13px;
  border: 1px dashed rgba(100, 116, 139, .38);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  color: #64748b;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px) scale(.985);
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.court-player-skip-drop-zone.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.court-player-skip-drop-zone.is-active {
  border-color: rgba(225, 29, 72, .72);
  background: rgba(255, 241, 242, .96);
  color: #be123c;
  box-shadow: 0 10px 28px rgba(190, 18, 60, .18);
  transform: translate(-50%, 0) scale(1.018);
}

.court-player-skip-drop-zone.is-disabled {
  opacity: .48;
  border-style: dotted;
}

.court-player-skip-drop-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: rgba(100, 116, 139, .10);
  color: #64748b;
  font-weight: 900;
}

.court-player-skip-drop-icon svg {
  width: 16px;
  height: 16px;
}

.court-player-skip-drop-zone strong,
.court-player-skip-drop-zone small {
  display: block;
}

.court-player-skip-drop-zone strong {
  font-size: 12px;
  font-weight: 900;
}

.court-player-skip-drop-zone small {
  margin-top: 1px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.25;
}

.court-player-skip-drop-zone.is-active .court-player-skip-drop-icon {
  background: rgba(225, 29, 72, .10);
  color: #be123c;
}

.court-player-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10080;
  pointer-events: none;
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
  opacity: .96;
  max-width: min(40vw, 160px);
  box-sizing: border-box;
  transition: none !important;
  animation: none !important;
  will-change: transform;
}

.court-player-drag-ghost.player-chip-pick {
  cursor: grabbing;
}

.court-player-drag-ghost.is-prepared-edit-drag-ghost {
  display: flex !important;
  align-items: center;
  max-width: calc(100vw - 24px);
  min-height: 46px;
  opacity: .98;
  visibility: visible !important;
  pointer-events: none !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .24), 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

html[data-theme="dark"] .court-player-drag-ghost.is-prepared-edit-drag-ghost {
  box-shadow: 0 16px 36px rgba(0, 0, 0, .52), 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
}

@media(max-width:720px) {
  .court-player-drag-guide {
    width: calc(100vw - 24px);
    min-height: 36px;
    padding: 7px 10px;
    font-size: 10.5px;
  }

  .court-player-skip-drop-zone {
    bottom: calc(94px + env(safe-area-inset-bottom));
    width: min(280px, calc(100vw - 36px));
    min-height: 48px;
    padding: 8px 12px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .court-player-drag-focus-panel,
  .court-player-drag-focus-aperture,
  .court-player-drag-guide,
  .court-player-skip-drop-zone,
  .court-player-drag-ghost {
    transition: none !important;
  }

}

.player-chip-pick:hover {
  border-color: var(--accent) !important;
  background: rgba(17, 184, 154, .08) !important;
  color: var(--accent);
}

.player-chip-pick:active {
  transform: scale(.98)
}

.custom-court-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  background: rgba(125, 132, 145, .08);
  border: 1px dashed rgba(125, 132, 145, .22);
  border-radius: 10px;
  padding: 8px 10px;
}

.court-repeat-hint-hidden {
  display: none;
}

.court-repeat-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warning, #a16207) 28%, var(--border));
  border-radius: 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--warning, #a16207) 8%, var(--card));
  text-align: left;
}

.court-repeat-notice > .material-symbols-outlined {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--warning, #a16207);
  font-size: 17px;
}

.court-repeat-notice-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.court-repeat-notice-copy strong {
  color: var(--warning, #a16207);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.court-repeat-notice-copy > span,
.court-repeat-notice-copy small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
}

.court-repeat-notice-copy small {
  margin-top: 2px;
  font-weight: 500;
}

@media (max-width: 640px) {
  .court-repeat-notice {
    margin-top: 10px;
    padding: 7px 8px;
  }

  .court-repeat-notice-copy > span,
  .court-repeat-notice-copy small {
    font-size: 10px;
  }
}

#custom-player-modal .modal-sheet {
  max-height: calc(100dvh - 32px)
}

#custom-player-modal.modal-backdrop {
  z-index: 10100;
}

#court-player-skip-confirm-modal.modal-backdrop {
  z-index: 10120;
}

#custom-player-modal .modal-body {
  max-height: calc(100dvh - 112px);
}

.court-player-skip-confirm-sheet {
  width: min(430px, calc(100vw - 28px));
}

.court-player-skip-confirm-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 2px auto 12px;
  border-radius: 17px;
  background: rgba(99, 102, 241, .11);
  color: #4f46e5;
  font-size: 28px;
  font-weight: 900;
}

.court-player-skip-confirm-message {
  margin: 0;
  color: var(--text);
  text-align: center;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 900;
}

.court-player-skip-confirm-note {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(99, 102, 241, .15);
  border-radius: 12px;
  background: rgba(99, 102, 241, .065);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.court-player-skip-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
  margin-top: 18px;
}

html[data-theme="dark"] .court-player-skip-confirm-icon {
  background: rgba(129, 140, 248, .14);
  color: #a5b4fc;
}

.custom-player-help {
  font-size: 12px;
  color: var(--muted);
  margin: -4px 0 10px;
}

.custom-player-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow: auto;
  padding-right: 2px;
}

.custom-player-group-label {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 4px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
}

.custom-player-cross-court-label {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--accent);
}

.custom-player-pair-decision-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(17, 184, 154, .32);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 86%, var(--accent) 14%);
}

#custom-player-pair-decision-modal.modal-backdrop {
  z-index: 10120 !important;
}

#custom-player-pair-decision-modal .custom-player-pair-decision-sheet {
  width: min(500px, calc(100vw - 28px));
  max-height: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

#custom-player-pair-decision-modal .custom-player-pair-decision-card {
  width: 100%;
  box-shadow: 0 18px 42px rgba(31, 41, 55, .18);
}

.custom-player-pair-decision-heading {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text);
}

.custom-player-pair-decision-heading > .material-symbols-outlined {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent);
  font-size: 18px;
}

.custom-player-pair-decision-heading div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.custom-player-pair-decision-heading strong {
  font-size: 13px;
  line-height: 1.4;
}

.custom-player-pair-decision-heading span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.custom-player-pair-decision-unavailable {
  color: var(--out) !important;
  font-size: 11px !important;
}

.custom-player-pair-decision-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.custom-player-pair-decision-actions .btn {
  width: 100%;
  min-width: 0;
  padding-inline: 10px;
}

.custom-player-pair-decision-actions .btn:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
}

.custom-player-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
}

.custom-player-option:hover {
  border-color: var(--accent);
  background: rgba(17, 184, 154, .08);
}

.custom-player-option:active {
  transform: scale(.99)
}

.custom-player-option.is-current {
  border-color: rgba(17, 184, 154, .42);
  background: rgba(17, 184, 154, .08);
}

.custom-player-avatar {
  width: 38px;
  height: 38px;
  font-size: 14px
}

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

.custom-player-name {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.custom-player-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px
}

.custom-player-side {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 84px;
}

.custom-player-wait-time {
  font-size: 11px;
}

.custom-player-court-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 150px;
  padding: 5px 8px;
  border: 1px solid rgba(17, 184, 154, .24);
  border-radius: 999px;
  background: rgba(17, 184, 154, .09);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.custom-player-court-chip .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 14px;
}

.custom-current-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(17, 184, 154, .12);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  margin-left: 5px;
  vertical-align: middle;
}

html[data-theme="dark"] .custom-court-hint {
  background: rgba(136, 136, 170, .07);
  border-color: rgba(136, 136, 170, .18);
}

html[data-theme="dark"] .custom-player-option {
  background: var(--bg3);
}

html[data-theme="dark"] .custom-player-option:hover,
html[data-theme="dark"] .custom-player-option.is-current {
  background: rgba(0, 212, 170, .10);
}

html[data-theme="dark"] .custom-player-pair-decision-card {
  background: color-mix(in srgb, var(--card) 86%, var(--accent) 14%);
  border-color: rgba(0, 212, 170, .3);
}

@media (max-width: 520px) {
  .custom-player-option {
    align-items: flex-start;
  }

  .custom-player-side {
    min-width: 72px;
    padding-top: 2px;
  }
}

/* Expense shortcut lives in the Settings header as a light secondary action */
.settings-tabs {
  grid-template-columns: repeat(3, 1fr) !important;
}

.system-settings-subtabs {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  margin: -4px 0 14px;
  padding: 4px 1px 2px;
}

.system-settings-subtabs::-webkit-scrollbar {
  display: none;
}

.system-settings-subtabs.hidden {
  display: none !important;
}

.system-subtab {
  border: 1px solid rgba(125, 132, 145, .16);
  background: var(--card);
  color: var(--muted);
  border-radius: 999px;
  min-height: 38px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(70, 76, 90, .05);
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.system-subtab .material-symbols-outlined {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.system-subtab.active {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, #2dd4bf), var(--accent));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 22%, transparent);
}

html[data-theme="dark"] .system-subtab {
  background: rgba(18, 26, 43, .95);
  border-color: rgba(148, 163, 184, .14);
  box-shadow: none;
}

html[data-theme="dark"] .system-subtab.active {
  color: #06201c;
  border-color: rgba(94, 234, 212, .34);
  background: linear-gradient(180deg, #5eead4, #2dd4bf);
  box-shadow: 0 10px 22px rgba(45, 212, 191, .16);
}

.settings-expense-entry {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(125, 132, 145, .22);
  background: rgba(255, 255, 255, .54);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 11px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  min-height: 34px;
  flex-shrink: 0;
}

.settings-expense-entry:active {
  transform: scale(.97)
}

.settings-expense-entry.active {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .35);
  background: rgba(17, 184, 154, .08);
}

.settings-expense-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-expense-icon svg {
  width: 16px;
  height: 16px
}

html[data-theme="dark"] .settings-expense-entry {
  background: rgba(22, 33, 62, .55);
  border-color: rgba(136, 136, 170, .25);
  color: var(--muted);
}

html[data-theme="dark"] .settings-expense-entry.active {
  background: rgba(0, 212, 170, .10);
  border-color: rgba(0, 212, 170, .35);
  color: var(--accent);
}

@media(max-width:380px) {
  .settings-expense-entry {
    padding: 8px 9px;
    font-size: 11px
  }

  .settings-expense-icon {
    width: 15px;
    height: 15px
  }

  .settings-expense-icon svg {
    width: 15px;
    height: 15px
  }
}


/* Expense shortcut: slightly more prominent accent tone */
.settings-expense-entry {
  border-color: rgba(17, 184, 154, .42) !important;
  background: linear-gradient(135deg, rgba(17, 184, 154, .16), rgba(109, 93, 252, .10)) !important;
  color: var(--accent) !important;
  box-shadow: 0 8px 22px rgba(17, 184, 154, .13) !important;
}

.settings-expense-entry:hover {
  border-color: rgba(17, 184, 154, .62) !important;
  background: linear-gradient(135deg, rgba(17, 184, 154, .22), rgba(109, 93, 252, .13)) !important;
}

.settings-expense-entry.active {
  color: #ffffff !important;
  border-color: rgba(17, 184, 154, .75) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  box-shadow: 0 10px 26px rgba(17, 184, 154, .22) !important;
}

.settings-expense-icon {
  color: inherit !important;
}

html[data-theme="dark"] .settings-expense-entry {
  border-color: rgba(0, 212, 170, .42) !important;
  background: linear-gradient(135deg, rgba(0, 212, 170, .18), rgba(124, 58, 237, .16)) !important;
  color: var(--accent) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .settings-expense-entry:hover {
  border-color: rgba(0, 212, 170, .62) !important;
  background: linear-gradient(135deg, rgba(0, 212, 170, .24), rgba(124, 58, 237, .20)) !important;
}

html[data-theme="dark"] .settings-expense-entry.active {
  color: #0f0f1a !important;
  border-color: rgba(0, 212, 170, .78) !important;
  background: linear-gradient(135deg, var(--accent), #7c3aed) !important;
}

/* Edit player modal: delete moved inside modal + compact layout */
.player-actions {
  gap: 4px !important;
}

.player-actions .icon-btn-delete {
  display: none !important;
}

#edit-player-modal .modal-sheet {
  width: min(100%, 420px) !important;
  max-width: 420px !important;
}

#edit-player-modal .modal-header {
  padding: 14px 16px 10px !important;
}

#edit-player-modal .modal-title {
  font-size: 16px !important;
}

#edit-player-modal .modal-subtitle {
  font-size: 11px !important;
  margin-top: 0 !important;
}

#edit-player-modal .modal-close-btn {
  width: 30px !important;
  height: 30px !important;
}

#edit-player-modal .modal-body {
  padding: 10px 16px 14px !important;
}

#edit-player-modal .form-group {
  margin-bottom: 9px !important;
}

#edit-player-modal .form-label {
  margin-bottom: 4px !important;
  font-size: 12px !important;
}

#edit-player-modal input[type=text],
#edit-player-modal select {
  padding: 9px 12px !important;
  font-size: 14px !important;
}

#edit-player-modal .edit-player-actions {
  margin-top: 10px !important;
  gap: 8px !important;
}

#edit-player-modal .edit-player-actions .btn {
  min-height: 40px !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
}

.edit-player-delete-link {
  width: 100%;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--out);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
}

.edit-player-delete-link svg {
  width: 15px;
  height: 15px;
}

.edit-player-delete-link:hover {
  background: rgba(220, 38, 38, .08);
}

.edit-player-block-link {
  width: 100%;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(220, 38, 38, .18);
  border-radius: 12px;
  background: rgba(220, 38, 38, .055);
  color: var(--out, #dc2626);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.edit-player-block-link:hover,
.edit-player-block-link:focus-visible {
  background: rgba(220, 38, 38, .10);
  border-color: rgba(220, 38, 38, .32);
}

.edit-player-block-link .material-symbols-outlined {
  font-size: 16px;
}

html[data-theme="dark"] .edit-player-delete-link:hover {
  background: rgba(239, 68, 68, .10);
}

@media(max-width:520px) {
  #edit-player-modal .modal-sheet {
    max-height: calc(100dvh - 116px - env(safe-area-inset-bottom)) !important;
  }
}

/* Telegram-first notification setup */
.personal-queue-alert-setting-card {
  gap: 16px;
}

#personal-queue-player-channel {
  order: 0;
}

#personal-queue-telegram-channel {
  order: 1;
}

.personal-queue-channel-divider {
  order: 2;
}

#personal-queue-pwa-channel {
  order: 3;
}

.personal-queue-alert-setting-card .personal-queue-alert-toggle-row {
  padding: 13px 0;
}

.personal-queue-alert-setting-card .system-notification-expand {
  min-height: 44px;
  border-top: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
}

.personal-queue-channel-primary {
  padding: 16px;
  border-color: color-mix(in srgb, #229ed9 42%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, #229ed9 9%, var(--card)), var(--card));
  box-shadow: 0 8px 24px color-mix(in srgb, #229ed9 9%, transparent);
}

.telegram-channel-heading,
.pwa-channel-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.telegram-brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #229ed9;
  color: #fff;
  box-shadow: 0 8px 16px rgba(34, 158, 217, .23);
}

.telegram-brand-mark svg {
  width: 26px;
  height: 26px;
}

.personal-queue-channel-primary .personal-queue-channel-head strong {
  font-size: 15px;
}

.personal-queue-channel-primary .personal-queue-channel-head small {
  margin-top: 4px;
}

.telegram-recommended,
.channel-option-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  vertical-align: middle;
}

.telegram-recommended {
  color: #12648a;
  background: rgba(34, 158, 217, .15);
}

.channel-option-badge {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, var(--card));
}

.telegram-alert-status {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg2) 52%, transparent);
}

.telegram-alert-status-icon {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--muted);
}

.telegram-alert-status.is-linked {
  border-color: color-mix(in srgb, #16a34a 34%, var(--border));
  background: color-mix(in srgb, #16a34a 7%, var(--card));
}

.telegram-alert-status.is-linked .telegram-alert-status-icon {
  color: #16a34a;
}

.telegram-alert-status.is-blocked {
  border-color: color-mix(in srgb, #f59e0b 32%, var(--border));
  background: color-mix(in srgb, #f59e0b 7%, var(--card));
}

.telegram-alert-status.is-blocked .telegram-alert-status-icon {
  color: #d97706;
}

.telegram-alert-actions {
  gap: 9px;
}

.telegram-alert-actions .btn {
  min-height: 44px;
}

.telegram-connect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #229ed9 !important;
  border-color: #229ed9 !important;
  box-shadow: 0 7px 14px rgba(34, 158, 217, .2);
}

.telegram-connect-btn:hover,
.telegram-connect-btn:focus-visible {
  background: #168bc3 !important;
  border-color: #168bc3 !important;
}

.telegram-button-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.telegram-button-icon svg {
  width: 18px;
  height: 18px;
}

.personal-queue-channel-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .01em;
}

.personal-queue-channel-divider::before,
.personal-queue-channel-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--border) 95%, transparent);
}

.personal-queue-channel-secondary {
  padding: 14px;
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--bg2) 40%, transparent);
}

.pwa-channel-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, var(--card));
  font-size: 21px;
}

.personal-queue-channel-secondary .personal-queue-channel-head strong {
  color: color-mix(in srgb, var(--text) 90%, var(--muted));
  font-size: 13px;
}

.personal-queue-channel-secondary .personal-queue-setup-steps {
  margin-top: 2px;
}

html[data-theme="dark"] .telegram-recommended {
  color: #a9e2fb;
  background: rgba(34, 158, 217, .2);
}

@media (max-width: 560px) {
  .personal-queue-channel-primary,
  .personal-queue-channel-secondary {
    padding: 13px;
  }

  .telegram-alert-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .telegram-alert-actions .telegram-connect-btn {
    grid-column: 1 / -1;
  }

  .telegram-alert-actions .btn {
    width: 100%;
  }
}

/* Fix: Admin PIN modal must appear above Edit Player modal when deleting from inside edit modal */
#admin-pin-modal.modal-backdrop,
#admin-pin-modal {
  z-index: 1400 !important;
}

#admin-pin-modal .modal-sheet,
#admin-pin-modal .admin-pin-sheet {
  position: relative !important;
  z-index: 1410 !important;
}

/* Keep edit modal underneath PIN confirmation instead of hiding the PIN behind it */
#edit-player-modal.pin-confirm-underlay {
  z-index: 900 !important;
}

/* Compact stats overview */
.stats-overview-compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compact-status-card,
.compact-list-card {
  padding: 13px 14px !important;
  margin-bottom: 0 !important;
}

.compact-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.compact-card-head .card-title {
  margin-bottom: 0 !important;
}

.compact-card-head-stack {
  align-items: flex-start;
}

.compact-card-subtitle {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  margin-top: 3px;
}

.compact-link-btn {
  appearance: none;
  border: 1px solid rgba(17, 184, 154, .28);
  background: rgba(17, 184, 154, .08);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.compact-link-btn:active {
  transform: scale(.96)
}

.status-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.status-mini-item {
  min-width: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.status-mini-item strong {
  color: var(--text);
  font-size: 13px;
  margin-left: 2px;
}

.overview-rank-row,
.overview-match-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.overview-rank-row:last-child,
.overview-match-row:last-child {
  border-bottom: none
}

.overview-rank-no {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--bg3);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}

.overview-rank-no.top {
  color: var(--accent);
  background: rgba(17, 184, 154, .10);
}

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

.overview-rank-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: nowrap;
}

.overview-rank-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-rank-meta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-rank-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.overview-rank-games {
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.overview-rank-games-sub {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.stats-late-note-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .11);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, .18);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

.stats-late-note-badge.inline {
  margin-left: 6px;
  vertical-align: middle;
}

.skip-request-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(99, 102, 241, .10);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, .20);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  flex-shrink: 0;
}

.skip-request-badge.inline {
  margin-left: 6px;
}

html[data-theme="dark"] .stats-late-note-badge {
  background: rgba(246, 179, 95, .12);
  color: #f6c177;
  border-color: rgba(246, 179, 95, .22);
}

html[data-theme="dark"] .skip-request-badge {
  background: rgba(129, 140, 248, .14);
  color: #a5b4fc;
  border-color: rgba(129, 140, 248, .26);
}

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

.overview-match-teams {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.overview-match-teams strong {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-match-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.overview-match-vs {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.overview-match-delete-btn {
  flex-shrink: 0;
  opacity: .55;
}

.overview-match-row:hover .overview-match-delete-btn {
  opacity: 1;
}

#match-history.is-expanded .overview-match-row {
  min-height: 34px;
}

.overview-match-score {
  font-size: 14px;
  font-weight: 900;
  color: var(--accent);
  background: rgba(17, 184, 154, .08);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

.compact-empty {
  padding: 14px 10px !important;
}

@media(max-width:380px) {
  .status-mini-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .compact-card-head-stack {
    flex-direction: column;
    align-items: flex-start;
  }

  .compact-card-head-stack .compact-link-btn {
    align-self: flex-start;
  }

  .overview-rank-row {
    align-items: flex-start;
  }

  .overview-rank-title-line {
    flex-wrap: wrap;
  }

  .overview-rank-meta {
    white-space: normal;
  }
}

/* Stats overview responsive column layout */
#page-stats {
  width: 100%;
}

#page-stats .dashboard-summary {
  gap: 8px;
  margin-bottom: 12px;
}

#page-stats .dashboard-summary .stat-card {
  padding: 11px 8px !important;
  margin-bottom: 0 !important;
}

#page-stats .dashboard-summary .stat-num {
  font-size: 24px;
  line-height: 1.05;
}

#page-stats .dashboard-summary .stat-label {
  font-size: 11px;
  line-height: 1.25;
}

.stats-overview-compact {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.stats-overview-compact .card {
  min-width: 0;
}

.compact-status-card {
  grid-column: 1 / -1;
}

.compact-list-card {
  min-height: 0;
}

@media(min-width:390px) {
  #page-stats .dashboard-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stats-overview-compact {
    grid-template-columns: 1fr;
  }

  .compact-status-card {
    grid-column: 1 / -1;
  }

  .status-mini-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .overview-rank-row,
  .overview-match-row {
    min-height: 32px;
    padding: 6px 0;
  }

  .overview-match-teams {
    font-size: 11px;
  }
}

@media(min-width:720px) {
  #page-stats {
    max-width: 960px !important;
  }

  .stats-overview-compact {
    grid-template-columns: .8fr 1.2fr;
    gap: 12px;
  }

  .compact-status-card {
    grid-column: auto;
  }

  .status-mini-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:389px) {
  #page-stats .dashboard-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop stats overview: stack cards again so the page feels balanced on wide screens */
@media(min-width:720px) {
  #page-stats {
    max-width: 620px !important;
  }

  .stats-overview-compact {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .compact-status-card,
  .compact-list-card {
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  .status-mini-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .compact-list-card {
    min-height: auto !important;
  }

  .overview-rank-row,
  .overview-match-row {
    min-height: 34px;
    padding: 7px 0;
  }

  .overview-match-teams {
    font-size: 12px;
  }
}

/* Stats overview leaderboard expand: rank tab removed, inline expand instead */
.stats-tabs.stats-tabs-two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#overview-leaderboard.is-expanded .overview-rank-row {
  min-height: 34px;
}
.overview-leaderboard-expand-btn {
  appearance: none;
  width: auto;
  min-width: 36px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  cursor: pointer;
  transition: all .15s ease;
  margin: 6px auto 0;
  padding: 0 !important;
}

.overview-leaderboard-expand-btn:hover {
  color: var(--accent) !important;
}

.overview-leaderboard-expand-btn:active {
  transform: scale(.92);
}

.overview-leaderboard-expand-btn i,
.overview-leaderboard-expand-btn .material-symbols-outlined {
  transition: transform .2s ease;
  font-size: 20px !important;
}

.overview-leaderboard-expand-btn.is-expanded i,
.overview-leaderboard-expand-btn.is-expanded .material-symbols-outlined {
  transform: rotate(180deg);
}

#overview-leaderboard-toggle[aria-expanded="true"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

html[data-theme="dark"] #overview-leaderboard-toggle[aria-expanded="true"] {
  color: #0f0f1a !important;
}

/* Winner select mode: replace score input with simple win/loss picker */
.winner-select-panel {
  margin-top: 14px;
  background: rgba(99, 102, 241, .06);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.winner-select-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 7px;
}

.winner-select {
  width: 100%;
  font-weight: 800;
  text-align: center;
  text-align-last: center;
  border-radius: 12px !important;
}

.winner-select-help {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

html[data-theme="light"] .winner-select-panel {
  background: rgba(17, 184, 154, .06);
  border-color: rgba(17, 184, 154, .18);
}

html[data-theme="dark"] .winner-select-panel {
  background: rgba(0, 212, 170, .06);
  border-color: rgba(0, 212, 170, .16);
}

/* Winner button mode: tap one side instead of dropdown */
.winner-pick-panel {
  margin-top: 14px;
  background: rgba(17, 184, 154, .055);
  border: 1px solid rgba(17, 184, 154, .18);
  border-radius: 14px;
  padding: 12px;
}

.winner-pick-title {
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: .2px;
}

.winner-pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.winner-pick-card {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  min-height: 64px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, color .14s ease;
}

.winner-pick-card:active {
  transform: scale(.98)
}

.winner-pick-card .winner-pick-kicker {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}

.winner-pick-card strong {
  font-size: 18px;
  line-height: 1.05;
}

.winner-pick-card.team-a-win {
  border-color: rgba(79, 127, 223, .28)
}

.winner-pick-card.team-b-win {
  border-color: rgba(224, 82, 117, .28)
}

.winner-pick-card.team-a-win.selected {
  background: linear-gradient(135deg, rgba(79, 127, 223, .18), rgba(79, 127, 223, .08));
  border-color: var(--teamA);
  color: var(--teamA);
  box-shadow: 0 10px 24px rgba(79, 127, 223, .16);
}

.winner-pick-card.team-b-win.selected {
  background: linear-gradient(135deg, rgba(224, 82, 117, .18), rgba(224, 82, 117, .08));
  border-color: var(--teamB);
  color: var(--teamB);
  box-shadow: 0 10px 24px rgba(224, 82, 117, .16);
}

.winner-pick-card.selected .winner-pick-kicker {
  color: currentColor
}

.winner-pick-help {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.btn-start-game {
  background: linear-gradient(135deg, #18c5a8, #0ea889) !important;
  color: #fff !important;
  border: 1px solid rgba(17, 184, 154, .35) !important;
}

.btn-save-result {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  border: 1px solid rgba(217, 119, 6, .35) !important;
}

.btn-save-result:active,
.btn-start-game:active {
  transform: scale(.98)
}

html[data-theme="dark"] .winner-pick-panel {
  background: rgba(0, 212, 170, .055);
  border-color: rgba(0, 212, 170, .16);
}

html[data-theme="dark"] .winner-pick-card {
  background: var(--bg3);
}

html[data-theme="dark"] .winner-pick-card.team-a-win.selected {
  background: linear-gradient(135deg, rgba(59, 130, 246, .28), rgba(59, 130, 246, .10));
  box-shadow: 0 10px 24px rgba(59, 130, 246, .12);
}

html[data-theme="dark"] .winner-pick-card.team-b-win.selected {
  background: linear-gradient(135deg, rgba(244, 63, 94, .28), rgba(244, 63, 94, .10));
  box-shadow: 0 10px 24px rgba(244, 63, 94, .12);
}

html[data-theme="dark"] .btn-start-game {
  background: var(--accent) !important;
  color: #0f0f1a !important;
}

/* Result display: show winner label instead of 1-0 / 0-1 */
.team-chip-a,
.team-a .player-chip {
  border-color: rgba(79, 127, 223, .42) !important;
  background: linear-gradient(135deg, rgba(79, 127, 223, .14), rgba(79, 127, 223, .045)) !important;
  color: var(--teamA) !important;
}

.team-chip-b,
.team-b .player-chip {
  border-color: rgba(224, 82, 117, .42) !important;
  background: linear-gradient(135deg, rgba(224, 82, 117, .14), rgba(224, 82, 117, .045)) !important;
  color: var(--teamB) !important;
}

.team-a .team-label {
  background: rgba(79, 127, 223, .10);
  border: 1px solid rgba(79, 127, 223, .20);
  color: var(--teamA) !important;
  border-radius: 999px;
  padding: 3px 8px;
  width: max-content;
}

.team-b .team-label {
  background: rgba(224, 82, 117, .10);
  border: 1px solid rgba(224, 82, 117, .20);
  color: var(--teamB) !important;
  border-radius: 999px;
  padding: 3px 8px;
  width: max-content;
  align-self: flex-end;
}

/* Fixed Consecutive: keep the per-player remaining stint quiet and local to
   the chip so mixed stints are visible without another team-level badge. */
.player-chip.has-fixed-stint {
  position: relative;
  height: 39px;
  min-height: 39px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-chip-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  white-space: nowrap;
}

.fixed-player-stint {
  position: absolute;
  top: 3px;
  z-index: 1;
  max-width: calc(100% - 16px);
  overflow: hidden;
  color: currentColor;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .1px;
  opacity: .55;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixed-player-stint-a {
  left: 8px;
  text-align: left;
}

.fixed-player-stint-b {
  right: 8px;
  text-align: right;
}

.court-team-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-width: 0;
  width: 100%;
  align-items: center;
  column-gap: 8px;
}

.court-team-heading .team-label {
  align-self: center;
}

.locked-pair-team-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: currentColor;
  opacity: .55;
  vertical-align: -2px;
}

.locked-pair-team-icon .material-symbols-outlined {
  font-size: 13px;
  line-height: 1;
}

.team-a-heading .team-label {
  grid-column: 1;
  justify-self: start;
}

.team-b-heading .team-label {
  grid-column: 3;
  justify-self: end;
}

.court-team-heading .winner-streak-badge {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

.winner-streak-badge {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  gap: 3px;
  padding: 3px 7px;
  border: 1px solid rgba(245, 158, 11, .24);
  border-radius: 999px;
  background: rgba(245, 158, 11, .1);
  color: #b45309;
  font-size: 9.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.winner-streak-badge strong {
  color: inherit;
  font-size: 11px;
  font-weight: 950;
}

html[data-theme="dark"] .winner-streak-badge {
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .14);
  color: #f6c177;
}

@container (max-width: 150px) {
  .court-team-heading {
    grid-template-columns: 1fr 1fr;
    row-gap: 4px;
  }

  .team-a-heading .team-label {
    grid-column: 1;
  }

  .team-b-heading .team-label {
    grid-column: 2;
  }

  .court-team-heading .winner-streak-badge {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.match-team-name,
.overview-match-teams strong {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  max-width: 100%;
}

.team-a-name {
  color: var(--teamA) !important;
  background: rgba(79, 127, 223, .09);
}

.team-b-name {
  color: var(--teamB) !important;
  background: rgba(224, 82, 117, .09);
}

.match-result-line {
  margin-top: 6px;
}

.winner-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.winner-badge.team-a-result {
  color: var(--teamA);
  background: rgba(79, 127, 223, .12);
  border: 1px solid rgba(79, 127, 223, .24);
}

.winner-badge.team-b-result {
  color: var(--teamB);
  background: rgba(224, 82, 117, .12);
  border: 1px solid rgba(224, 82, 117, .24);
}

.winner-badge.draw-result {
  color: var(--muted);
  background: var(--bg3);
  border: 1px solid var(--border);
}

.overview-winner-badge {
  flex-shrink: 0;
  padding: 4px 9px;
  font-size: 11px;
}

/* Dark Mode team chips: keep team tint but ensure name text stays readable
   (generic dark .player-chip forces light text which washed out on pale chips). */
html[data-theme="dark"] .team-chip-a,
html[data-theme="dark"] .team-a .player-chip,
html[data-theme="dark"] .player-chip.team-chip-a,
html[data-theme="dark"] button.player-chip.team-chip-a,
html[data-theme="dark"] button.player-chip-pick.team-chip-a,
html[data-theme="dark"] #court-scoreboard-modal .court-scoreboard-player-chip.team-chip-a {
  color: #bfdbfe !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, .42), rgba(24, 38, 72, .94)) !important;
  border-color: rgba(96, 165, 250, .55) !important;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .10) !important;
}

html[data-theme="dark"] .team-chip-b,
html[data-theme="dark"] .team-b .player-chip,
html[data-theme="dark"] .player-chip.team-chip-b,
html[data-theme="dark"] button.player-chip.team-chip-b,
html[data-theme="dark"] button.player-chip-pick.team-chip-b,
html[data-theme="dark"] #court-scoreboard-modal .court-scoreboard-player-chip.team-chip-b {
  color: #fecdd3 !important;
  background: linear-gradient(135deg, rgba(244, 63, 94, .40), rgba(58, 18, 32, .94)) !important;
  border-color: rgba(251, 113, 133, .55) !important;
  box-shadow: inset 0 0 0 1px rgba(253, 164, 175, .10) !important;
}

html[data-theme="dark"] .team-col.team-a .player-chip-pick:hover,
html[data-theme="dark"] button.player-chip-pick.team-chip-a:hover,
html[data-theme="dark"] #court-scoreboard-modal .court-scoreboard-player-chip.team-chip-a:hover {
  color: #dbeafe !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, .52), rgba(30, 48, 90, .96)) !important;
  border-color: rgba(147, 197, 253, .68) !important;
}

html[data-theme="dark"] .team-col.team-b .player-chip-pick:hover,
html[data-theme="dark"] button.player-chip-pick.team-chip-b:hover,
html[data-theme="dark"] #court-scoreboard-modal .court-scoreboard-player-chip.team-chip-b:hover {
  color: #ffe4e6 !important;
  background: linear-gradient(135deg, rgba(244, 63, 94, .50), rgba(72, 22, 38, .96)) !important;
  border-color: rgba(253, 164, 175, .68) !important;
}

html[data-theme="dark"] .player-chip-pick.team-chip-a.is-drop-target,
html[data-theme="dark"] #court-scoreboard-modal .court-scoreboard-player-chip.team-chip-a.is-drop-target {
  color: #eff6ff !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, .58), rgba(37, 64, 120, .96)) !important;
  border-color: rgba(147, 197, 253, .78) !important;
  outline-color: rgba(96, 165, 250, .55);
}

html[data-theme="dark"] .player-chip-pick.team-chip-b.is-drop-target,
html[data-theme="dark"] #court-scoreboard-modal .court-scoreboard-player-chip.team-chip-b.is-drop-target {
  color: #fff1f2 !important;
  background: linear-gradient(135deg, rgba(244, 63, 94, .56), rgba(90, 28, 48, .96)) !important;
  border-color: rgba(253, 164, 175, .78) !important;
  outline-color: rgba(251, 113, 133, .55);
}

/* Fix: keep Team A/B player chips visibly colored in light mode too */
html[data-theme="light"] .team-col.team-a .player-chip,
html[data-theme="light"] .team-col.team-a .player-chip-pick,
html[data-theme="light"] .player-chip.team-chip-a,
html[data-theme="light"] button.player-chip.team-chip-a,
html[data-theme="light"] button.player-chip-pick.team-chip-a {
  color: #2563eb !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(37, 99, 235, .035)) !important;
  border-color: rgba(37, 99, 235, .38) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .03) !important;
}

html[data-theme="light"] .team-col.team-b .player-chip,
html[data-theme="light"] .team-col.team-b .player-chip-pick,
html[data-theme="light"] .player-chip.team-chip-b,
html[data-theme="light"] button.player-chip.team-chip-b,
html[data-theme="light"] button.player-chip-pick.team-chip-b {
  color: #e11d48 !important;
  background: linear-gradient(135deg, rgba(225, 29, 72, .12), rgba(225, 29, 72, .035)) !important;
  border-color: rgba(225, 29, 72, .38) !important;
  box-shadow: inset 0 0 0 1px rgba(225, 29, 72, .03) !important;
}

html[data-theme="light"] .team-col.team-a .player-chip-pick:hover,
html[data-theme="light"] button.player-chip-pick.team-chip-a:hover {
  color: #1d4ed8 !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(37, 99, 235, .06)) !important;
  border-color: rgba(37, 99, 235, .55) !important;
}

html[data-theme="light"] .team-col.team-b .player-chip-pick:hover,
html[data-theme="light"] button.player-chip-pick.team-chip-b:hover {
  color: #be123c !important;
  background: linear-gradient(135deg, rgba(225, 29, 72, .18), rgba(225, 29, 72, .06)) !important;
  border-color: rgba(225, 29, 72, .55) !important;
}

html[data-theme="light"] .player-chip-pick.team-chip-a.is-drop-target {
  background: linear-gradient(135deg, rgba(37, 99, 235, .24), rgba(37, 99, 235, .10)) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .78), 0 7px 20px rgba(37, 99, 235, .22) !important;
}

html[data-theme="light"] .player-chip-pick.team-chip-b.is-drop-target {
  background: linear-gradient(135deg, rgba(225, 29, 72, .22), rgba(225, 29, 72, .09)) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .78), 0 7px 20px rgba(225, 29, 72, .20) !important;
}

html[data-theme="dark"] .player-chip-pick.is-drop-target {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 7px 22px rgba(0, 0, 0, .28) !important;
}

html[data-theme="light"] .player-chip-pick.is-drop-target:not(.team-chip-a):not(.team-chip-b),
html[data-theme="dark"] .player-chip-pick.is-drop-target:not(.team-chip-a):not(.team-chip-b) {
  color: var(--accent) !important;
}


/* Player Dashboard modal */
.player-dashboard-sheet {
  max-width: 620px;
}

.player-dashboard-body {
  padding-top: 12px !important;
}

.overview-rank-clickable {
  cursor: pointer;
  border-radius: 10px;
  padding-left: 4px;
  padding-right: 4px;
  transition: background .15s ease, transform .15s ease;
}

.overview-rank-clickable:hover {
  background: rgba(17, 184, 154, .07);
}

.overview-rank-clickable:active {
  transform: scale(.99);
}

.player-dashboard-open-btn {
  appearance: none;
  border: 1px solid rgba(17, 184, 154, .28);
  background: rgba(17, 184, 154, .08);
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  flex-shrink: 0;
}

.player-dashboard-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--bg3);
  border-radius: 16px;
  margin-bottom: 12px;
}

.player-dashboard-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 184, 154, .12);
  color: var(--accent);
  border: 1px solid rgba(17, 184, 154, .25);
  font-size: 20px;
  font-weight: 900;
  flex-shrink: 0;
}

.player-dashboard-profile-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-dashboard-profile-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.player-dashboard-profile-days {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.player-dashboard-name-text,
.player-dashboard-profile .player-dashboard-name-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.player-dashboard-profile-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.player-dashboard-profile-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.player-dashboard-profile-badges .player-provider-badge {
  margin-left: 0;
  vertical-align: middle;
}

.player-dashboard-profile-badges .stats-mvp-tag {
  flex: 0 0 auto;
}

.player-dashboard-name-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  vertical-align: top;
}

.player-dashboard-name-line .player-dashboard-name-text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-dashboard-name {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  min-width: 0;
  width: 100%;
}

.player-dashboard-meta-level,
.player-dashboard-meta-last {
  min-width: 0;
}

.player-dashboard-meta-sep {
  color: var(--muted);
  opacity: .7;
}

@media (max-width: 480px) {
  .player-dashboard-profile {
    gap: 10px;
    padding: 10px;
  }

  .player-dashboard-name-text,
  .player-dashboard-profile .player-dashboard-name-text {
    font-size: 16px;
  }

  .player-dashboard-meta {
    font-size: 11px;
  }
}

.player-dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.player-kpi-card {
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  text-align: center;
}

.player-kpi-card strong {
  display: block;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.player-kpi-card span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.player-kpi-card.win strong {
  color: var(--ready)
}

.player-kpi-card.loss strong {
  color: var(--out)
}

.player-kpi-card.rate strong {
  color: var(--accent)
}

.player-kpi-card.points strong {
  color: var(--teamA)
}

.player-kpi-card.streak strong {
  color: var(--playing);
}

html[data-theme="dark"] .custom-player-court-chip {
  border-color: rgba(0, 212, 170, .28);
  background: rgba(0, 212, 170, .10);
}

.player-kpi-card-action {
  position: relative;
  width: 100%;
  appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.player-kpi-card-action .player-kpi-link-icon {
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--playing) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--playing) 10%, var(--card));
  color: var(--playing);
  font-size: 14px;
  line-height: 1;
}

.player-kpi-card-action:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 3px;
}

.player-kpi-card-action:active {
  transform: scale(.98);
}

@media (hover: hover) and (pointer: fine) {
  .player-kpi-card-action:hover {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
    background: color-mix(in srgb, var(--accent) 4%, var(--card));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-kpi-card-action {
    transition: none;
  }
}

.player-dashboard-section {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
}

.player-dashboard-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 6px;
}

.player-dashboard-section-head .card-title {
  margin-bottom: 0 !important;
}

.player-dashboard-note {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.player-dashboard-history {
  padding: 0 12px 8px;
}

.player-history-row {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.player-history-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.player-history-date {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.player-result-pill,
.player-side-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.player-result-win {
  color: var(--ready);
  background: rgba(17, 184, 154, .10);
  border: 1px solid rgba(17, 184, 154, .22);
}

.player-result-loss {
  color: var(--out);
  background: rgba(220, 91, 91, .08);
  border: 1px solid rgba(220, 91, 91, .20);
}

.team-a-mini {
  color: var(--teamA);
  background: rgba(79, 127, 223, .10);
  border: 1px solid rgba(79, 127, 223, .22);
}

.team-b-mini {
  color: var(--teamB);
  background: rgba(224, 82, 117, .10);
  border: 1px solid rgba(224, 82, 117, .22);
}

.player-history-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}

.player-history-opponents {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Partner Performance in Player Dashboard */
.partner-performance-section {
  margin-bottom: 12px;
}

.partner-performance-section .player-dashboard-section-head {
  align-items: flex-start;
}

.partner-note {
  margin-top: 2px;
  white-space: normal !important;
}

.partner-best-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  color: var(--accent);
  border: 1px solid rgba(17, 184, 154, .24);
  background: rgba(17, 184, 154, .08);
}

.partner-performance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 10px;
  padding: 0 12px 10px;
}

.partner-best-card,
.partner-chart-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
  padding: 12px;
  min-width: 0;
}

.partner-best-label,
.partner-chart-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 5px;
}

.partner-best-name {
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.partner-best-rate {
  font-size: 28px;
  font-weight: 950;
  line-height: 1.15;
  color: var(--ready);
  margin-top: 5px;
}

.partner-best-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.partner-best-alt {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}

.partner-challenging-card .partner-best-rate {
  color: var(--out);
  font-size: 24px;
}

.partner-challenging-card {
  border-color: rgba(220, 91, 91, .16);
  background: linear-gradient(180deg, rgba(220, 91, 91, .04), rgba(220, 91, 91, .02));
}

.partner-challenging-card .partner-best-label {
  color: rgba(220, 91, 91, .88);
}

.partner-challenging-card .partner-best-sub,
.partner-challenging-card .partner-best-alt {
  color: var(--muted);
}

.partner-primary-card {
  border-color: rgba(17, 184, 154, .30);
  background: linear-gradient(180deg, rgba(17, 184, 154, .11), rgba(17, 184, 154, .04));
  box-shadow: 0 10px 24px rgba(17, 184, 154, .08);
}

.partner-primary-card .partner-best-label {
  color: var(--ready);
  font-weight: 900;
}

.partner-primary-card .partner-best-name {
  font-size: 18px;
}

.partner-primary-card .partner-best-rate {
  font-size: 32px;
  color: var(--ready);
}

.partner-primary-card .partner-best-sub {
  color: var(--text);
}

.partner-primary-card .partner-best-alt {
  border-top-color: rgba(17, 184, 154, .16);
}

.partner-chart-wrap {
  height: 174px;
  position: relative;
}

.partner-chart-fallback {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 16px 8px;
}

.partner-table-wrap {
  padding: 0 12px 12px;
}

.partner-table {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
}

.partner-table-head,
.partner-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) .55fr .55fr .55fr .7fr;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
}

.partner-table-head {
  background: var(--bg3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.partner-table-row {
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

.partner-table-head span:not(:first-child),
.partner-table-row span:not(:first-child) {
  text-align: right;
}

.partner-name-cell {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.partner-name-cell em {
  display: inline-flex;
  margin-left: 5px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.partner-low-sample {
  opacity: .82;
}

.partner-win-cell {
  color: var(--ready)
}

.partner-loss-cell {
  color: var(--out)
}

.partner-rate-cell {
  color: var(--accent)
}

@media(max-width:520px) {
  .partner-performance-grid {
    grid-template-columns: 1fr;
  }

  .partner-chart-wrap {
    height: 190px;
  }

  .partner-table-head,
  .partner-table-row {
    grid-template-columns: minmax(0, 1.25fr) .5fr .5fr .5fr .65fr;
    padding: 8px 8px;
    gap: 4px;
  }
}

@media(max-width:520px) {
  .player-dashboard-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .player-kpi-card.points {
    grid-column: auto;
  }

  .player-kpi-card strong {
    font-size: 18px;
  }

  .player-kpi-card span {
    font-size: 10px;
  }
}

@media(max-width:380px) {
  .player-dashboard-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Stats today match history — split-column row layout */
.today-history-card {
  margin-top: 12px;
}

.today-history-card .match-row-compact {
  padding: 8px 0;
}

.today-history-card .match-row-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.today-history-card .match-row-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.today-history-card .match-row-end {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 24px;
}

.today-history-card .match-teams {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0;
  line-height: 1.35;
}

.today-history-card .match-vs {
  color: var(--muted);
  font-weight: 700;
}

.today-history-card .match-court-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg3);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.today-history-card .match-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.today-history-card .match-score-badge,
.session-match-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.today-history-card .match-row-right .winner-badge {
  padding: 3px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.today-history-card .match-row-right .match-time {
  margin-top: 0;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .today-history-card .match-row-end {
    gap: 12px;
  }

  .today-history-card .match-row-right .match-time {
    font-size: 9px;
  }
}

.alltime-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.alltime-card-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.alltime-subtitle {
  color: var(--muted);
  font-size: 12px;
  margin-top: -6px;
}

.alltime-total-pill {
  flex-shrink: 0;
  border: 1px solid rgba(17, 184, 154, .28);
  color: var(--accent);
  background: rgba(17, 184, 154, .08);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

.alltime-sort-select-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  white-space: nowrap;
}

.alltime-sort-select {
  height: 34px;
  min-width: 116px;
  border: 1px solid rgba(17, 184, 154, .22);
  border-radius: 999px;
  padding: 0 32px 0 12px;
  color: var(--text);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 15px) 13px / 5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 10px) 13px / 5px 5px no-repeat,
    rgba(17, 184, 154, .07);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.alltime-sort-select:hover,
.alltime-sort-select:focus-visible {
  border-color: rgba(17, 184, 154, .38);
  box-shadow: 0 8px 20px rgba(17, 184, 154, .10);
  outline: none;
}

.alltime-player-row {
  width: 100%;
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  cursor: pointer;
}

.alltime-player-row:last-child {
  border-bottom: none
}

.alltime-player-row {
  border-radius: 14px;
  padding-left: 8px;
  padding-right: 8px;
  margin: 0 -8px;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}

.alltime-player-row:hover,
.alltime-player-row:focus-visible {
  background: rgba(17, 184, 154, .08);
  outline: none;
}

html[data-theme="dark"] .alltime-player-row:hover,
html[data-theme="dark"] .alltime-player-row:focus-visible {
  background: rgba(0, 212, 170, .10);
}

/* The cumulative leaderboard can opt into a compact rank column without
   changing the latest-stats list. Keep the badge readable at every width. */
.alltime-player-row.has-rank {
  grid-template-columns: 32px 42px minmax(0, 1fr) auto auto;
}

.alltime-rank-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: var(--bg3);
  font-size: 12px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  isolation: isolate;
}

.alltime-rank-number {
  position: relative;
  z-index: 1;
}

.alltime-rank-badge.is-top {
  box-shadow: 0 4px 12px rgba(31, 41, 55, .10);
}

.alltime-rank-badge.rank-1 {
  color: #7a4a00;
  border-color: #eab308;
  background: #fff3c4;
  box-shadow: 0 4px 12px rgba(180, 120, 0, .14);
}

.alltime-rank-badge.rank-2 {
  color: #3f4b5d;
  border-color: #94a3b8;
  background: #eef2f7;
  box-shadow: 0 4px 12px rgba(71, 85, 105, .12);
}

.alltime-rank-badge.rank-3 {
  color: #8a3f0a;
  border-color: #d97706;
  background: #ffead5;
  box-shadow: 0 4px 12px rgba(154, 72, 0, .13);
}

.alltime-rank-badge.is-top::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .50), transparent 58%);
  opacity: .72;
  animation: alltimeRankSheen 4.2s ease-in-out infinite;
  pointer-events: none;
}

.alltime-rank-icon {
  position: absolute;
  z-index: 2;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 2px solid var(--surface, #fff);
  border-radius: 999px;
  color: currentColor;
  background: inherit;
  font-size: 11px;
  line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20;
  animation: alltimeRankIconPulse 2.8s ease-in-out infinite;
}

.alltime-rank-badge.is-top::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .52) 50%, transparent 64%);
  opacity: 0;
  transform: translateX(-120%);
  animation: alltimeRankShimmer 3.8s ease-in-out infinite;
  pointer-events: none;
}

.alltime-rank-badge.rank-2::before,
.alltime-rank-badge.rank-2::after {
  animation-delay: .18s;
}

.alltime-rank-badge.rank-3::before,
.alltime-rank-badge.rank-3::after {
  animation-delay: .36s;
}

@keyframes alltimeRankSheen {
  0%,
  100% {
    opacity: .48;
  }

  50% {
    opacity: .82;
  }
}

@keyframes alltimeRankShimmer {
  0%,
  58%,
  100% {
    opacity: 0;
    transform: translateX(-120%);
  }

  66% {
    opacity: .78;
  }

  82% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes alltimeRankIconPulse {
  0%,
  100% {
    opacity: .84;
    transform: translateY(0);
  }

  22% {
    opacity: 1;
    transform: translateY(-1px);
  }
}

html[data-theme="dark"] .alltime-rank-badge {
  background: var(--bg3);
}

html[data-theme="dark"] .alltime-rank-badge.rank-1 {
  color: #ffe08a;
  border-color: #b7791f;
  background: #4b3510;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .alltime-rank-badge.rank-2 {
  color: #dbe4f0;
  border-color: #64748b;
  background: #273242;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .alltime-rank-badge.rank-3 {
  color: #ffd0a8;
  border-color: #b45309;
  background: #4a2716;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
}

/* Keep the top-three sheen contained in dark mode while retaining the same
   premium-marker anchor as light mode: the icon overlaps the top-right edge. */
html[data-theme="dark"] .alltime-rank-badge.is-top {
  overflow: visible;
  border-width: 1px;
}

html[data-theme="dark"] .alltime-rank-badge.is-top::before {
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .18), transparent 58%);
  opacity: .52;
}

html[data-theme="dark"] .alltime-rank-badge.is-top::after {
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .20) 50%, transparent 64%);
}

html[data-theme="dark"] .alltime-rank-icon {
  top: -7px;
  right: -7px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: currentColor;
  background: rgba(8, 14, 26, .84);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .34);
  font-size: 9px;
}

@media (prefers-reduced-motion: reduce) {
  .alltime-rank-badge.is-top::before,
  .alltime-rank-badge.is-top::after,
  .alltime-rank-icon {
    animation: none !important;
  }
}

.alltime-avatar {
  width: 38px !important;
  height: 38px !important;
  font-size: 14px !important;
}

.alltime-player-main {
  min-width: 0;
}

.alltime-player-name-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  vertical-align: top;
}

.alltime-player-provider-badges {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  line-height: 1;
}

.alltime-player-name-line .alltime-player-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.alltime-player-name {
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alltime-player-level {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.alltime-player-level .player-skill-level-badge {
  max-width: 34px;
}

.stats-mvp-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 5px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1;
  white-space: nowrap;
  color: #8b6914;
  background: linear-gradient(135deg, rgba(255, 248, 220, .98) 0%, rgba(255, 231, 168, .92) 48%, rgba(250, 210, 118, .88) 100%);
  border: 1px solid rgba(202, 154, 46, .28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .72) inset,
    0 4px 10px rgba(201, 151, 42, .12);
  overflow: hidden;
  flex-shrink: 0;
  animation: statsMvpBadgeFloat 3.2s ease-in-out infinite, statsMvpGlow 2.8s ease-in-out infinite;
}

.stats-mvp-tag-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 12px;
  line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 560, 'GRAD' 0, 'opsz' 20;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .35));
  animation: statsMvpIconPulse 2.4s ease-in-out infinite;
}

.stats-mvp-tag::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: statsMvpShimmer 3.6s ease-in-out infinite;
  pointer-events: none;
}

.stats-mvp-tag::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .34), transparent 58%);
  opacity: .75;
  pointer-events: none;
  animation: statsMvpSheen 4.2s ease-in-out infinite;
}

.stats-mvp-tag-label {
  position: relative;
  z-index: 1;
}

.stats-mvp-tag-count {
  position: relative;
  z-index: 1;
  opacity: .86;
  font-weight: 800;
}

@keyframes statsMvpIconPulse {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: .9;
  }

  50% {
    transform: scale(1.14) rotate(-6deg);
    opacity: 1;
  }
}

@keyframes statsMvpBadgeFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px);
  }
}

@keyframes statsMvpGlow {
  0%,
  100% {
    border-color: rgba(202, 154, 46, .28);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .72) inset,
      0 4px 10px rgba(201, 151, 42, .12);
  }

  50% {
    border-color: rgba(224, 178, 66, .48);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .78) inset,
      0 6px 14px rgba(201, 151, 42, .18);
  }
}

@keyframes statsMvpSheen {
  0%,
  100% {
    opacity: .45;
  }

  50% {
    opacity: .9;
  }
}

@keyframes statsMvpShimmer {
  0%,
  62%,
  100% {
    transform: translateX(-120%);
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  84% {
    transform: translateX(120%);
    opacity: 0;
  }
}

html[data-theme="dark"] .stats-mvp-tag {
  color: #ffe6a6;
  background: linear-gradient(135deg, rgba(96, 72, 18, .92) 0%, rgba(138, 102, 24, .82) 52%, rgba(174, 128, 28, .72) 100%);
  border-color: rgba(255, 215, 120, .24);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 4px 12px rgba(255, 193, 74, .1);
}

html[data-theme="dark"] .stats-mvp-tag-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .22));
}

html[data-theme="dark"] .stats-mvp-tag::after {
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%);
}

@media (prefers-reduced-motion: reduce) {
  .stats-mvp-tag,
  .stats-mvp-tag::before,
  .stats-mvp-tag::after,
  .stats-mvp-tag-icon {
    animation: none !important;
  }
}

.alltime-player-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alltime-player-stats {
  display: flex;
  align-items: center;
  gap: 6px;
}

.alltime-player-stats>div {
  min-width: 48px;
  border: 1px solid var(--border);
  background: var(--bg3);
  border-radius: 10px;
  padding: 5px 7px;
  text-align: center;
}

.alltime-player-stats strong {
  display: block;
  font-size: 14px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.alltime-player-stats span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}

.alltime-win strong {
  color: var(--ready)
}

.alltime-rate strong {
  color: var(--accent)
}

.alltime-streak strong {
  color: var(--playing);
}

.alltime-player-level-corner {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  min-height: 34px;
}

.alltime-player-level-corner.is-empty {
  visibility: hidden;
}

.alltime-player-level-corner .alltime-player-level {
  max-width: 100%;
}

.alltime-player-level-inline {
  display: none;
}

/* Keep the expanded leaderboard readable on tablet/desktop: the level belongs
   to the same identity block as the name. Mobile keeps the compact corner slot
   so the row stays single-line and scannable. */
@media (min-width: 621px) {
  .alltime-player-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    row-gap: 0;
  }

  .alltime-player-row.has-rank {
    grid-template-columns: 32px 42px minmax(0, 1fr) auto;
  }

  .alltime-player-main {
    align-self: center;
  }

  .alltime-player-level-inline {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 14px;
    margin-top: -2px;
    line-height: 1;
  }

  .alltime-player-level-corner {
    display: none;
  }
}

@media(max-width:620px) {
  .alltime-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .alltime-card-actions {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .alltime-sort-select-label {
    margin-right: auto;
  }

  .alltime-sort-select {
    min-width: 126px;
  }

  .alltime-player-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .alltime-player-row.has-rank {
    grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  }

  .alltime-player-stats {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin-top: -4px;
  }

  .alltime-player-main {
    align-self: center;
  }

  .alltime-player-name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 5px;
    row-gap: 0;
    width: 100%;
  }

  .alltime-player-name-line .alltime-player-name {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 54px);
  }

  .alltime-player-provider-badges {
    order: 3;
    flex: 0 0 100%;
    justify-content: flex-start;
    min-height: 14px;
    margin-left: -5px;
  }

  .alltime-player-name-line .stats-mvp-tag {
    order: 2;
    flex: 0 0 auto;
    align-self: center;
  }

  .alltime-player-row.has-rank .alltime-player-stats {
    /* Align the stat tiles with the profile avatar instead of the name text. */
    grid-column: 2 / -1;
  }

  .alltime-player-stats>div {
    min-width: 0 !important;
    width: 100%;
    padding: 4px 3px;
    border-radius: 8px;
  }

  .alltime-player-stats strong {
    font-size: 13px;
  }

  .alltime-player-stats span {
    font-size: 9px;
    white-space: nowrap;
    letter-spacing: -.015em;
  }

  .alltime-player-level-corner {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
  }

  .alltime-player-row.has-rank .alltime-player-level-corner {
    grid-column: 4;
  }
}

/* Check-in search collapsed by default */
.checkin-search-collapse {
  margin: 0 0 10px;
}

.checkin-search-toggle {
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .66);
  color: var(--text);
  border-radius: 14px;
  min-height: 42px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}

.checkin-search-toggle:active {
  transform: scale(.99)
}

.checkin-search-toggle.open,
.checkin-search-toggle:hover {
  border-color: rgba(17, 184, 154, .34);
  background: rgba(17, 184, 154, .07);
}

.checkin-search-toggle-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
}

.checkin-search-toggle-left svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.checkin-search-hint {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkin-search-panel {
  display: none;
  padding-top: 8px;
}

.checkin-search-panel.open {
  display: block
}

.checkin-search-box {
  position: relative;
}

.checkin-search-box input {
  padding-right: 42px !important;
}

.checkin-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.checkin-search-clear:hover {
  background: rgba(220, 38, 38, .08);
  color: var(--out);
}

.checkin-search-clear svg {
  width: 15px;
  height: 15px;
}

html[data-theme="dark"] .checkin-search-toggle {
  background: rgba(22, 33, 62, .78);
  border-color: var(--border);
}

html[data-theme="dark"] .checkin-search-toggle.open,
html[data-theme="dark"] .checkin-search-toggle:hover {
  background: rgba(0, 212, 170, .08);
  border-color: rgba(0, 212, 170, .28);
}


/* Settings player search uses the same collapsed UX as Check-in search */
.settings-player-search-collapse {
  margin: 12px 0 8px;
}

.settings-player-search-panel {
  padding-top: 8px;
}

.settings-player-search-toggle {
  min-height: 42px;
}

.settings-player-search-panel .player-search-box input {
  padding-right: 42px !important;
}

.settings-player-search-panel .player-search-clear:hover {
  background: rgba(220, 38, 38, .08);
  color: var(--out);
}

/* All-time player search uses the same compact collapse pattern as Check-in / Settings */
.alltime-search-collapse {
  margin: 2px 0 10px;
}

.alltime-search-panel .checkin-search-box input {
  font-size: 14px;
}

/* Player Dashboard: overall winrate chart */
.player-dashboard-overview-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.player-overall-chart-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  padding: 12px;
  min-width: 0;
}

.player-overall-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.player-overall-chart-title {
  font-size: 12px;
  font-weight: 950;
  color: var(--text);
  line-height: 1.25;
}

.player-overall-chart-sub {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 2px;
}

.player-overall-chart-wrap {
  height: 178px;
  position: relative;
}

.player-overall-chart-fallback {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 16px 8px;
}

.player-dashboard-overview-grid .player-dashboard-kpi-grid {
  margin-bottom: 0;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
}

.player-dashboard-overview-grid .player-kpi-card.points {
  grid-column: 1 / -1;
}

.partner-performance-grid-no-chart {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.partner-performance-grid-no-chart .partner-best-card {
  padding: 14px;
}

.partner-performance-grid-no-chart .partner-best-label {
  margin-bottom: 2px;
}

.partner-performance-grid-no-chart .partner-best-name {
  font-size: 17px;
}

.partner-performance-grid-no-chart .partner-best-rate {
  font-size: 28px;
  margin-top: 8px;
  text-align: left;
}

.partner-performance-grid-no-chart .partner-primary-card .partner-best-rate {
  font-size: 32px;
}

.partner-performance-grid-no-chart .partner-challenging-card .partner-best-rate {
  font-size: 24px;
}

.partner-performance-grid-no-chart .partner-best-sub {
  text-align: left;
}

.partner-performance-grid-no-chart .partner-best-alt {
  grid-column: auto;
}

@media(max-width:640px) {
  .partner-performance-grid-no-chart {
    grid-template-columns: 1fr !important;
  }
}

@media(max-width:520px) {
  .player-dashboard-overview-grid {
    grid-template-columns: 1fr;
  }

  .player-overall-chart-wrap {
    height: 190px;
  }

  .player-dashboard-overview-grid .player-dashboard-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .player-dashboard-overview-grid .player-kpi-card.points {
    grid-column: auto;
  }
}

@media(max-width:380px) {
  .player-dashboard-overview-grid .player-dashboard-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Player Dashboard: fit overall winrate frame */
.player-dashboard-overview-grid {
  align-items: stretch !important;
}

.player-dashboard-overview-grid .player-overall-chart-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.player-dashboard-overview-grid .player-overall-chart-wrap {
  flex: 1;
  min-height: 0;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-dashboard-overview-grid .player-overall-chart-wrap canvas {
  max-height: 170px !important;
}

.player-dashboard-overview-grid .player-dashboard-kpi-grid {
  height: 100%;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-content: stretch !important;
  gap: 10px;
}

.player-dashboard-overview-grid .player-kpi-card {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
}

.player-dashboard-overview-grid .player-kpi-card.points {
  grid-column: auto !important;
}

@media(max-width:520px) {
  .player-dashboard-overview-grid .player-overall-chart-wrap {
    height: 190px !important;
    flex: none;
  }

  .player-dashboard-overview-grid .player-dashboard-kpi-grid {
    height: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto;
  }

  .player-dashboard-overview-grid .player-kpi-card.points {
    grid-column: auto !important;
  }
}

@media(max-width:380px) {
  .player-dashboard-overview-grid .player-dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .player-dashboard-overview-grid .player-kpi-card.points {
    grid-column: auto !important;
  }
}


/* =========================================================
   Check-in modal hard fix v2
   - No nested modal/body scroll jump
   - Footer pinned to the bottom of the modal
   - Checking players does not rebuild the list
   ========================================================= */
#checkin-modal.modal-backdrop {
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 12px calc(88px + env(safe-area-inset-bottom)) !important;
}

#checkin-modal .checkin-sheet {
  width: min(100%, 520px) !important;
  height: min(760px, calc(100dvh - 116px - env(safe-area-inset-bottom))) !important;
  max-height: calc(100dvh - 116px - env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

@supports not (height:100dvh) {
  #checkin-modal .checkin-sheet {
    height: min(760px, calc(100vh - 116px - env(safe-area-inset-bottom))) !important;
    max-height: calc(100vh - 116px - env(safe-area-inset-bottom)) !important;
  }
}

#checkin-modal .modal-header {
  flex: 0 0 auto !important;
  align-items: flex-start;
  gap: 10px;
}

#checkin-modal .checkin-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

#checkin-modal .checkin-add-player-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

#checkin-modal .checkin-add-player-btn .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

#checkin-modal .checkin-add-player-btn:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}

#checkin-modal .checkin-add-player-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

#checkin-modal .checkin-add-player-btn.permission-disabled,
#checkin-modal .checkin-add-player-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

body.guest-mode #checkin-modal .checkin-add-player-btn,
body.read-only-mode #checkin-modal .checkin-add-player-btn,
#checkin-modal.checkin-gate-mode .checkin-add-player-btn {
  display: none !important;
}

#checkin-modal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: none !important;
  padding: 0 !important;
}

#checkin-modal .checkin-scheduled-badge {
  flex: 0 0 auto !important;
  margin: 8px 18px 0 !important;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--accent) 6%, var(--card)) !important;
  overflow: hidden !important;
}

#checkin-modal .checkin-scheduled-badge-toggle {
  width: 100% !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 9px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  text-align: left !important;
  cursor: pointer !important;
}

#checkin-modal .checkin-scheduled-badge-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent) !important;
  outline-offset: -2px !important;
}

.checkin-scheduled-badge-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg2));
  color: var(--accent);
}

.checkin-scheduled-badge-icon .material-symbols-outlined {
  font-size: 17px;
}

.checkin-scheduled-badge-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.checkin-scheduled-badge-copy strong,
.checkin-scheduled-badge-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkin-scheduled-badge-copy strong {
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.3;
}

.checkin-scheduled-badge-copy small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.3;
}

.checkin-scheduled-badge-chevron {
  color: var(--muted);
  font-size: 18px;
  transition: transform .16s ease;
}

.checkin-scheduled-badge.is-expanded .checkin-scheduled-badge-chevron {
  transform: rotate(180deg);
}

#checkin-modal .checkin-scheduled-badge-content {
  padding: 0 8px 8px !important;
}

#checkin-modal .checkin-scheduled-badge-content .scheduled-session-status-list {
  display: grid !important;
  gap: 5px !important;
  padding-top: 6px !important;
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)) !important;
}

#checkin-modal .checkin-scheduled-badge-content .scheduled-session-status-item {
  padding: 7px 8px !important;
  border-radius: 9px !important;
}

#checkin-modal .checkin-scheduled-badge-content .scheduled-session-status-item-main strong {
  font-size: 11.5px !important;
}

#checkin-modal .checkin-scheduled-badge-content .scheduled-session-status-item-main span,
#checkin-modal .checkin-scheduled-badge-content .scheduled-session-status-badge {
  font-size: 10px !important;
}

@media(max-width:420px) {
  #checkin-modal .checkin-scheduled-badge {
    margin: 7px 14px 0 !important;
  }

  #checkin-modal .checkin-scheduled-badge-toggle {
    min-height: 38px !important;
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: 5px 8px !important;
  }

  .checkin-scheduled-badge-icon {
    width: 26px;
    height: 26px;
  }
}

#checkin-modal .checkin-gate {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 18px 18px !important;
}

#checkin-modal .checkin-gate.hidden {
  display: none !important;
}

#checkin-modal .checkin-form-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 10px 18px 0 !important;
}

#checkin-modal .checkin-form-wrap.hidden {
  display: none !important;
}

#checkin-modal .checkin-alert,
#checkin-modal .checkin-search-collapse,
#checkin-modal .checkin-toolbar,
#checkin-modal .checkin-status {
  flex: 0 0 auto !important;
}

#checkin-modal .checkin-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  align-content: start !important;
  padding: 0 2px 12px 0 !important;
}

#checkin-modal .checkin-player-row {
  position: relative !important;
  flex: 0 0 auto !important;
}

#checkin-modal .checkin-player-row input[type="checkbox"] {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}

#checkin-modal .checkin-status {
  flex: 0 0 auto !important;
  margin: 0 0 8px !important;
  padding: 10px 2px 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .01em !important;
  text-align: left !important;
}

#checkin-modal .checkin-footer {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 -18px !important;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
  background: var(--card) !important;
  border-top: 1px solid rgba(125, 132, 145, .16) !important;
  box-shadow: 0 -10px 24px rgba(31, 41, 55, .08) !important;
}

#checkin-modal .checkin-back-btn {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 11px 12px !important;
  white-space: nowrap !important;
}

#checkin-modal .checkin-back-btn .material-symbols-outlined {
  font-size: 18px !important;
  line-height: 1 !important;
}

#checkin-modal .checkin-footer .btn {
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  white-space: nowrap !important;
}

#checkin-modal #checkin-confirm-btn {
  flex: 1 1 auto !important;
  min-width: 142px !important;
}

#checkin-modal #checkin-confirm-btn:disabled,
#checkin-modal #checkin-confirm-btn.is-disabled {
  background: #d1d5db !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  transform: none !important;
}

html[data-theme="dark"] #checkin-modal .checkin-footer {
  background: rgba(18, 26, 43, .98) !important;
  border-top-color: rgba(148, 163, 184, .16) !important;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] #checkin-modal #checkin-confirm-btn:disabled,
html[data-theme="dark"] #checkin-modal #checkin-confirm-btn.is-disabled {
  background: #475569 !important;
  color: #cbd5e1 !important;
}

@media(max-width:420px) {
  #checkin-modal.modal-backdrop {
    padding: 10px 10px calc(82px + env(safe-area-inset-bottom)) !important;
  }

  #checkin-modal .checkin-sheet {
    height: calc(100dvh - 102px - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 102px - env(safe-area-inset-bottom)) !important;
    border-radius: 22px !important;
  }

  #checkin-modal .checkin-form-wrap {
    padding: 9px 14px 0 !important;
  }

  #checkin-modal .checkin-status {
    margin-bottom: 6px !important;
    padding-top: 8px !important;
    font-size: 10.5px !important;
  }

  #checkin-modal .checkin-footer {
    margin: 0 -14px !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    gap: 7px !important;
  }

  #checkin-modal .checkin-back-btn {
    padding: 11px 10px !important;
    font-size: 13px !important;
  }

  #checkin-modal .checkin-back-btn span:last-child {
    display: none !important;
  }

  #checkin-modal #checkin-confirm-btn {
    min-width: 0 !important;
    padding: 11px 12px !important;
    font-size: 13px !important;
  }
}


/* =========================================================
   Check-in modal gate-size fix v3
   - First forced Check-in screen fits its content
   - Player selection screen still uses the full-height stable layout
   ========================================================= */
#checkin-modal.checkin-gate-mode .checkin-sheet {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 116px - env(safe-area-inset-bottom)) !important;
}

@supports not (height:100dvh) {
  #checkin-modal.checkin-gate-mode .checkin-sheet {
    max-height: calc(100vh - 116px - env(safe-area-inset-bottom)) !important;
  }
}

#checkin-modal.checkin-gate-mode .modal-body {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#checkin-modal.checkin-gate-mode .checkin-gate {
  flex: 0 1 auto !important;
  min-height: auto !important;
  overflow: visible !important;
  padding: 22px 18px 28px !important;
}

@media(max-width:420px) {
  #checkin-modal.checkin-gate-mode .checkin-sheet {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 102px - env(safe-area-inset-bottom)) !important;
  }

  #checkin-modal.checkin-gate-mode .checkin-gate {
    padding: 20px 14px 24px !important;
  }
}

/* V7: lightweight CSS micro-interactions only - no external animation library */
html {
  scroll-behavior: smooth;
}

.page.active {
  animation: pageSoftIn .18s ease-out both;
}

@keyframes pageSoftIn {
  from {
    opacity: .96;
    transform: translateY(4px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.modal-backdrop:not(.hidden) {
  animation: modalBackdropIn .14s ease-out both;
}

.modal-backdrop:not(.hidden) .modal-sheet {
  animation: modalSheetIn .2s cubic-bezier(.2, .9, .2, 1) both;
  will-change: opacity, transform;
}

@keyframes modalBackdropIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes modalSheetIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

.btn,
.nav-btn,
.court-icon-btn,
.icon-action-btn,
.icon-btn-edit,
.checkin-player-row,
.queue-filter-btn,
.settings-tab,
.court-opt {
  transition:
    transform .15s ease,
    opacity .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

.nav-btn.active svg {
  transform: translateY(-1px);
  transition: transform .15s ease;
}

.checkin-player-row.selected .checkin-box {
  animation: checkinTickPop .18s ease-out both;
}

@keyframes checkinTickPop {
  0% {
    transform: scale(.82)
  }

  70% {
    transform: scale(1.08)
  }

  100% {
    transform: scale(1)
  }
}

.court-live-badge {
  animation: liveBadgePulse 1.8s ease-in-out infinite;
}

@keyframes liveBadgePulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .72
  }
}

@media (hover:hover) {

  .btn:hover,
  .court-icon-btn:hover,
  .icon-action-btn:hover,
  .icon-btn-edit:hover,
  .queue-filter-btn:hover,
  .settings-tab:hover,
  .court-opt:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}


/* V13: Remove mobile tap highlight / focus highlight */
html,
body,
button,
a,
input,
select,
textarea,
.nav-btn,
.settings-tab,
.settings-expense-entry,
.theme-toggle,
.btn,
.icon-action-btn,
.court-opt {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
.nav-btn,
.settings-tab,
.settings-expense-entry,
.theme-toggle,
.btn,
.icon-action-btn,
.court-opt {
  outline: none;
  -webkit-touch-callout: none;
  user-select: none;
}

button:focus-visible,
a:focus-visible,
.nav-btn:focus-visible,
.settings-tab:focus-visible,
.settings-expense-entry:focus-visible,
.theme-toggle:focus-visible,
.btn:focus-visible,
.icon-action-btn:focus-visible,
.court-opt:focus-visible {
  outline: 2px solid rgba(17, 184, 154, 0.45);
  outline-offset: 3px;
}

* {
  -webkit-tap-highlight-color: transparent;
}


/* Settings player status filter */
.player-status-filter-bar {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 1px 10px;
  margin: 0 0 4px;
}

.player-status-filter-bar::-webkit-scrollbar {
  display: none
}

.player-filter-chip {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .68);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 10px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}

.player-filter-chip:active {
  transform: scale(.97)
}

.player-filter-chip strong {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(125, 132, 145, .10);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.player-filter-chip.active {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .36);
  background: rgba(17, 184, 154, .09);
}

.player-filter-chip.active strong {
  background: rgba(17, 184, 154, .14);
  color: var(--accent);
}

.player-filter-chip.ready.active {
  color: var(--ready);
  border-color: rgba(17, 184, 154, .36);
  background: rgba(17, 184, 154, .09)
}

.player-filter-chip.queued.active {
  color: var(--playing);
  border-color: rgba(229, 155, 34, .34);
  background: rgba(229, 155, 34, .09)
}

.player-filter-chip.playing.active {
  color: var(--playing);
  border-color: rgba(229, 155, 34, .34);
  background: rgba(229, 155, 34, .09)
}

.player-filter-chip.rest.active {
  color: var(--rest);
  border-color: rgba(124, 131, 238, .34);
  background: rgba(124, 131, 238, .09)
}

.player-filter-chip.out.active {
  color: var(--out);
  border-color: rgba(220, 91, 91, .30);
  background: rgba(220, 91, 91, .07)
}

html[data-theme="dark"] .player-filter-chip {
  background: rgba(22, 33, 62, .70);
  border-color: var(--border);
}

html[data-theme="dark"] .player-filter-chip strong {
  background: rgba(136, 136, 170, .13);
  color: var(--text);
}

html[data-theme="dark"] .player-filter-chip.active {
  border-color: rgba(0, 212, 170, .30);
  background: rgba(0, 212, 170, .08);
}

/* v16 Session + Queue explanation */
.session-summary-card {
  margin: 12px 0 14px;
  border: 1px solid rgba(17, 184, 154, .18);
  background: linear-gradient(135deg, rgba(17, 184, 154, .08), rgba(124, 131, 238, .05));
  border-radius: 16px;
  padding: 12px;
}

.session-summary-empty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.session-summary-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.session-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.session-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  margin-top: 2px;
}

.session-status-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: rgba(17, 184, 154, .10);
  border: 1px solid rgba(17, 184, 154, .22);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.session-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.session-meta-grid>div {
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(125, 132, 145, .12);
  border-radius: 12px;
  padding: 8px;
  min-width: 0;
}

.session-meta-grid strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-meta-grid span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 1px;
}

html[data-theme="dark"] .session-summary-card {
  background: linear-gradient(135deg, rgba(0, 212, 170, .10), rgba(99, 102, 241, .06));
  border-color: rgba(0, 212, 170, .22);
}

html[data-theme="dark"] .session-meta-grid>div {
  background: rgba(22, 33, 62, .52);
  border-color: rgba(148, 163, 184, .12);
}

.court-info-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(17, 184, 154, .26);
  background: rgba(17, 184, 154, .08);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-serif, Georgia, serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 900;
  cursor: pointer;
  transition: all .15s;
}

.court-info-btn:hover {
  background: rgba(17, 184, 154, .14);
  transform: translateY(-1px);
}

.court-info-btn:active {
  transform: scale(.95)
}

.queue-explain-sheet {
  max-width: 560px
}

.court-scoreboard-backdrop {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: rgba(8, 11, 20, .58);
}

.court-scoreboard-sheet {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100dvh;
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  animation: courtScoreboardFadeIn .18s ease-out;
}

@keyframes courtScoreboardFadeIn {
  from {
    opacity: .82;
    transform: scale(.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .court-scoreboard-sheet {
    animation: none;
  }
}

.court-scoreboard-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  border-bottom: 1px solid rgba(125, 132, 145, .12);
  flex-shrink: 0;
}

.court-scoreboard-close-btn {
  position: absolute;
  left: 16px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  width: 44px;
  height: 44px;
}

.court-scoreboard-topbar-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.25px;
}

.court-scoreboard-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 20px;
  overflow: auto;
  touch-action: pan-y;
}

.court-scoreboard-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.court-scoreboard-score-val {
  font-size: clamp(56px, 16vw, 96px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}

.court-scoreboard-score-sep {
  font-size: clamp(40px, 10vw, 64px);
  font-weight: 800;
  color: var(--muted);
  line-height: 1;
}

.court-scoreboard-teams {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: start;
}

.court-scoreboard-team {
  display: grid;
  gap: 8px;
  padding: 14px 12px;
  border-radius: 16px;
  background: var(--bg3);
  border: 1px solid rgba(125, 132, 145, .12);
}

.court-scoreboard-team.team-a {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

.court-scoreboard-team.team-b {
  border-color: color-mix(in srgb, var(--playing) 24%, transparent);
}

.court-scoreboard-team-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.court-scoreboard-player {
  font-size: clamp(16px, 4.5vw, 20px);
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}

.court-scoreboard-vs {
  align-self: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}

.court-scoreboard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.court-scoreboard-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
}

.court-scoreboard-status.is-playing {
  color: var(--playing);
  background: color-mix(in srgb, var(--playing) 10%, transparent);
  border-color: color-mix(in srgb, var(--playing) 24%, transparent);
}

.court-scoreboard-status.is-waiting {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

.court-scoreboard-status.is-empty {
  color: var(--muted);
  background: rgba(125, 132, 145, .08);
  border-color: rgba(125, 132, 145, .16);
}

.court-scoreboard-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(125, 132, 145, .08);
  font-size: 13px;
  font-weight: 700;
}

.court-scoreboard-streak {
  font-size: 12px;
  font-weight: 700;
  color: var(--playing);
}

.court-scoreboard-empty {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

.court-scoreboard-footer {
  display: grid;
  gap: 12px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(125, 132, 145, .12);
  flex-shrink: 0;
}

.court-scoreboard-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.court-scoreboard-pill {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.court-scoreboard-pill.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.court-scoreboard-pill.is-playing:not(.active) {
  border-color: color-mix(in srgb, var(--playing) 40%, transparent);
  color: var(--playing);
}

.court-scoreboard-pill.is-waiting:not(.active) {
  border-color: color-mix(in srgb, #f59e0b 42%, var(--border));
  color: #b66b00;
}

.court-scoreboard-pill.is-empty:not(.active) {
  border-style: dashed;
}

.court-scoreboard-goto-btn {
  width: 100%;
  min-height: 48px;
}

.court-scoreboard-goto-btn.hidden {
  display: none;
}

.court-scoreboard-btn {
  position: relative;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
}

.court-scoreboard-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.court-scoreboard-btn .material-symbols-outlined {
  font-size: 17px;
  line-height: 1;
}

.queue-courts-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.queue-courts-heading-row .section-heading {
  margin: 0;
}

.queue-courts-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 8px;
  margin-left: auto;
}

.queue-preview-open-btn {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.queue-preview-open-btn > span:last-child {
  white-space: nowrap;
}

.queue-preview-open-btn .material-symbols-outlined {
  font-size: 20px;
  color: var(--muted);
}

.queue-preview-open-btn:hover,
.queue-preview-open-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
}

.queue-preview-open-btn.hidden {
  display: none;
}

.global-court-scoreboard-btn {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.global-court-scoreboard-btn > span:last-child {
  white-space: nowrap;
}

.global-court-scoreboard-btn .material-symbols-outlined {
  font-size: 20px;
}

.global-court-scoreboard-btn:hover,
.global-court-scoreboard-btn:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

.global-court-scoreboard-btn.hidden {
  display: none;
}

.queue-explain-content {
  display: grid;
  gap: 12px
}

.queue-explain-manual-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--playing) 36%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--playing) 8%, var(--bg3));
  color: var(--text);
}

.queue-explain-manual-note > .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--playing);
  font-size: 18px;
}

.queue-explain-manual-note strong,
.queue-explain-manual-note span:not(.material-symbols-outlined) {
  display: block;
}

.queue-explain-manual-note strong {
  color: var(--playing);
  font-size: 12px;
  font-weight: 900;
}

.queue-explain-manual-note span:not(.material-symbols-outlined) {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.queue-explain-section {
  border: 1px solid rgba(125, 132, 145, .14);
  background: var(--bg3);
  border-radius: 16px;
  padding: 12px;
}

.queue-explain-title {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .45px;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.queue-explain-player-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.queue-explain-player {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px;
  min-width: 0;
}

.queue-explain-player strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-explain-player span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
}

.queue-explain-rules {
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.queue-explain-rules li {
  margin: 5px 0
}

.queue-explain-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.queue-explain-team {
  border-radius: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  min-width: 0;
}

.queue-explain-team span {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.queue-explain-team strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-explain-team em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  margin-top: 2px;
}

.team-a-explain span {
  color: var(--teamA)
}

.team-b-explain span {
  color: var(--teamB)
}

.queue-explain-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 9px;
}

.queue-explain-metric-grid>div {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 5px;
  text-align: center;
  min-width: 0;
}

.queue-explain-metric-grid strong {
  display: block;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-explain-metric-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  margin-top: 1px;
}

.queue-alt-list {
  display: grid;
  gap: 7px
}

.queue-alt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px;
}

.queue-alt-row.best {
  border-color: rgba(17, 184, 154, .34);
  background: rgba(17, 184, 154, .06);
}

.queue-alt-row strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.queue-alt-row span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
  margin-top: 1px;
}

.queue-alt-row em {
  flex-shrink: 0;
  color: var(--accent);
  background: rgba(17, 184, 154, .10);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 900;
}

.queue-explain-actions {
  margin-top: 12px
}

@media(max-width:420px) {

  .session-meta-grid,
  .queue-explain-player-list,
  .queue-explain-teams {
    grid-template-columns: 1fr
  }

  .queue-explain-metric-grid {
    grid-template-columns: 1fr 1fr
  }

  .queue-alt-row {
    align-items: flex-start;
    flex-direction: column
  }
}

/* v16.1 hotfix: reset/session button is intentionally clickable even when muted */
.reset-day-main-btn {
  cursor: pointer !important;
  opacity: 1 !important
}

/*.reset-day-main-btn.has-active-courts {
  border-color: rgba(217, 119, 6, .32) !important;
  background: rgba(217, 119, 6, .06) !important;
  color: var(--playing) !important
}*/

.reset-day-main-btn.is-disabled {
  opacity: .72 !important;
  cursor: not-allowed !important
}


/* v16.2 Session lifecycle refinement */
.session-summary-empty strong {
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}

.session-summary-empty span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.session-status-pill.is-stale {
  background: rgba(245, 158, 11, .14) !important;
  color: var(--playing) !important;
  border-color: rgba(245, 158, 11, .35) !important;
}

.session-stale-note {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .20);
  color: var(--muted);
  font-size: 12px;
}

/* V17: Session history / ดูสรุปย้อนหลัง */
.session-history-card {
  border-color: rgba(17, 184, 154, .18) !important
}

.session-history-card-title {
  align-items: center
}

.session-history-main-btn {
  margin-top: 14px;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
}

.session-history-main-btn small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px
}

.session-history-btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 184, 154, .1);
  color: var(--accent);
  flex-shrink: 0;
}

.session-history-btn-icon svg {
  width: 18px;
  height: 18px
}

.session-history-modal-sheet {
  max-width: 720px;
  width: min(94vw, 720px)
}

.session-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.session-accordion-head .expense-accordion-side {
  min-width: 96px
}

.session-history-expense-total {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  margin-top: 2px;
  white-space: nowrap
}

.session-status-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.session-status-mini.active {
  color: var(--accent);
  background: rgba(17, 184, 154, .08);
  border-color: rgba(17, 184, 154, .28)
}

.session-status-mini.closed {
  color: var(--muted);
  background: rgba(125, 132, 145, .08)
}

.session-summary-grid {
  grid-template-columns: repeat(4, 1fr)
}

.session-player-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.session-player-list span {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.session-player-list em {
  font-style: normal;
  color: var(--muted);
  font-size: 13px
}

.session-match-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, .42)
}

.session-match-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border)
}

.session-match-row:last-child {
  border-bottom: 0
}

.session-match-main {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 800
}

.session-match-duration {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}

.session-match-duration .material-symbols-outlined {
  font-size: 13px;
  line-height: 1;
}

.session-match-main span {
  color: var(--muted);
  font-weight: 700
}

.session-match-meta {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap
}

.session-match-meta .winner-badge {
  padding: 1px 7px;
  font-size: 10px;
  border-radius: 999px
}

.session-match-meta .session-match-score {
  padding: 2px 7px;
  font-size: 10px;
}

.session-more-note {
  padding: 9px 12px;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg3);
  text-align: center
}

.session-expense-section {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.session-expense-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px;
  background: rgba(255, 255, 255, .52);
}

.session-expense-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px
}

.session-expense-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--text)
}

.session-expense-subtitle {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px
}

.session-expense-total {
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
  white-space: nowrap
}

.session-expense-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 12px
}

.session-expense-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.session-expense-line:last-child {
  border-bottom: 0
}

.session-expense-line span {
  color: var(--text);
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.session-expense-line strong {
  font-size: 13px;
  white-space: nowrap
}

.session-expense-line.pay strong {
  color: var(--out)
}

.session-expense-line.receive strong {
  color: var(--accent)
}

.session-expense-line.clear strong {
  color: var(--muted)
}

.game-shuttle-expense-list {
  display: grid;
  gap: 6px;
}

.game-shuttle-expense-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.game-shuttle-expense-row:last-of-type {
  border-bottom: 0;
}

.game-shuttle-expense-list:not(.is-expanded) .game-shuttle-expense-row.is-extra {
  display: none;
}

.game-shuttle-expense-toggle {
  justify-self: start;
  margin-top: 4px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.game-shuttle-expense-main,
.game-shuttle-expense-cost {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.game-shuttle-expense-main strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
}

.game-shuttle-expense-main span,
.game-shuttle-expense-cost small,
.game-shuttle-expense-players {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.game-shuttle-expense-cost {
  text-align: right;
  align-content: start;
}

.game-shuttle-expense-cost strong {
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

.game-shuttle-expense-players {
  grid-column: 1 / -1;
  padding-top: 3px;
}

.session-settlement-line {
  align-items: flex-start;
  gap: 8px;
}

.session-settlement-line span {
  display: grid;
  gap: 2px;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

.session-settlement-line span small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.session-settlement-line strong {
  flex: 0 0 auto;
  max-width: 42%;
  line-height: 1.35;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

.session-expense-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.session-expense-primary-action.history-view-expense-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(17, 184, 154, .24);
  border-radius: 12px;
  background: rgba(17, 184, 154, .09);
  color: var(--accent);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
}

.session-expense-primary-action.history-view-expense-btn:hover,
.session-expense-primary-action.history-view-expense-btn:focus-visible {
  border-color: rgba(17, 184, 154, .40);
  background: rgba(17, 184, 154, .15);
}

.session-expense-primary-action .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.session-expense-utility-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(125, 132, 145, .10);
}

.session-expense-copy-btn.history-copy-btn,
.session-expense-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 36px;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.session-expense-copy-btn.history-copy-btn:hover,
.session-expense-copy-btn.history-copy-btn:focus-visible {
  border: 0;
  background: rgba(100, 116, 139, .09);
  color: var(--text);
}

.session-expense-delete-btn:hover,
.session-expense-delete-btn:focus-visible {
  color: #b42318;
  background: rgba(254, 226, 226, .60);
}

.session-expense-copy-btn .material-symbols-outlined,
.session-expense-delete-btn .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.session-expense-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 0;
}
.session-expense-section-head .expense-detail-title { margin: 0; }
.session-expense-restore-btn {
  appearance: none;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.session-expense-restore-btn:hover,
.session-expense-restore-btn:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 12%, transparent);
}
.session-expense-restore-btn .material-symbols-outlined { font-size: 16px; }
.session-expense-restore-btn:focus-visible,
.session-expense-delete-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.deleted-expense-history-list { display: grid; gap: 10px; }
.recycle-swipe-row {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  isolation: isolate;
  touch-action: pan-y;
}
.recycle-swipe-actions {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 104px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: rgba(254, 226, 226, .82);
  border-radius: 0 14px 14px 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.recycle-swipe-row.is-revealed .recycle-swipe-actions {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.recycle-swipe-content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  box-sizing: border-box;
  transition: transform .2s ease;
  will-change: transform;
}
.recycle-swipe-row.is-revealed .recycle-swipe-content {
  transform: translateX(-104px);
}
.recycle-swipe-row.is-revealed .deleted-session-history-row,
.recycle-swipe-row.is-revealed .deleted-expense-history-row {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: transparent;
}
.recycle-permanent-delete-btn {
  width: 100%;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  padding: 8px 6px;
  color: #b42318;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  visibility: hidden;
}
.recycle-swipe-row.is-revealed .recycle-permanent-delete-btn { visibility: visible; }
.recycle-permanent-delete-btn:hover,
.recycle-permanent-delete-btn:focus-visible {
  color: #991b1b;
  background: rgba(220, 38, 38, .10);
}
.recycle-permanent-delete-btn .material-symbols-outlined { font-size: 19px; }
.recycle-swipe-content-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.recycle-swipe-toggle {
  appearance: none;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 92%, var(--card));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg3) 72%, var(--card));
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.recycle-swipe-toggle:hover,
.recycle-swipe-toggle:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  outline: none;
}
.recycle-swipe-toggle .material-symbols-outlined { font-size: 20px; }
.deleted-expense-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 26%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 4%, var(--bg3));
}
.deleted-expense-history-info { display: grid; gap: 3px; min-width: 0; }
.deleted-expense-history-info strong { color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.deleted-expense-history-info span { color: var(--muted); font-size: 11px; }

/* Desktop uses the same progressive reveal as touch: the destructive action
   stays tucked away until the compact chevron is activated. */
@media (min-width: 721px) {
  .recycle-swipe-row {
    display: block;
    overflow: hidden;
  }

  .recycle-swipe-content {
    width: 100%;
    min-width: 100%;
    transform: translateX(0);
    transition: transform .2s ease;
  }

  .recycle-swipe-row.is-revealed .recycle-swipe-content {
    transform: translateX(-104px) !important;
  }

  .recycle-swipe-actions {
    position: absolute;
    inset: 0 0 0 auto;
    width: 104px;
    min-height: 0;
    pointer-events: none;
    background: color-mix(in srgb, var(--bg3) 88%, var(--card));
    border-left: 1px solid var(--border);
  }

  .recycle-permanent-delete-btn {
    visibility: hidden;
    padding: 4px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
  }

  .recycle-permanent-delete-btn:hover,
  .recycle-permanent-delete-btn:focus-visible {
    color: #b42318;
    background: rgba(220, 38, 38, .08);
  }

  .recycle-swipe-row.is-revealed .recycle-swipe-actions {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
  }

  .deleted-session-history-row,
  .deleted-expense-history-row {
    height: 100%;
    border-radius: 14px;
    border-right-color: var(--border);
  }
}

@media (max-width: 720px) {
  .recycle-swipe-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-color: transparent;
    background: transparent;
  }

  .recycle-swipe-toggle:hover,
  .recycle-swipe-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .recycle-swipe-content,
  .recycle-swipe-toggle,
  .recycle-swipe-actions {
    transition: none !important;
  }
}
.court-player-name-wrap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.player-chip.has-court-player-level {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 30px;
}
.player-chip.has-court-player-level .court-player-name-wrap {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.court-player-level-badge {
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 15px;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 82%, currentColor 18%);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .1px;
  pointer-events: none;
  white-space: nowrap;
}
.court-player-level-badge-a {
  color: var(--teamA) !important;
  background: rgba(79, 127, 223, .10) !important;
  border-color: rgba(79, 127, 223, .34) !important;
}
.court-player-level-badge-b {
  color: var(--teamB) !important;
  background: rgba(224, 82, 117, .10) !important;
  border-color: rgba(224, 82, 117, .34) !important;
}
.player-chip.has-court-player-level .fixed-player-stint-b {
  right: 28px;
}

.court-waiting-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 999px;
  color: #a16207;
  background: rgba(245, 158, 11, .10);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

html[data-theme="dark"] .session-match-list,
html[data-theme="dark"] .session-expense-card {
  background: rgba(22, 33, 62, .42)
}

@media(max-width:560px) {

  .session-summary-grid,
  .session-expense-grid {
    grid-template-columns: 1fr 1fr
  }

  .session-expense-head {
    flex-direction: column
  }

  .session-expense-total {
    font-size: 15px
  }

  .session-accordion-head .expense-accordion-side {
    min-width: 86px
  }

  .session-expense-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px
  }

  .session-expense-line strong {
    white-space: normal
  }

  .game-shuttle-expense-row {
    gap: 4px 8px;
  }
}

/* V17.1: Cleaner session summary history layout */
.session-history-card .card-title {
  margin-bottom: 8px
}

.session-history-main-btn {
  margin-top: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .45)) !important;
  border-color: rgba(17, 184, 154, .22) !important
}

html[data-theme="dark"] .session-history-main-btn {
  background: rgba(22, 33, 62, .5) !important
}

.session-history-modal-sheet {
  max-width: 760px;
  width: min(94vw, 760px)
}

.session-history-list {
  gap: 12px
}

.session-history-item {
  border-radius: 18px !important;
  overflow: hidden;
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(226, 232, 240, .9) !important;
  box-shadow: 0 12px 28px rgba(70, 76, 90, .06)
}

html[data-theme="dark"] .session-history-item {
  background: rgba(30, 30, 53, .88) !important;
  border-color: var(--border) !important;
  box-shadow: none
}

.session-history-head {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 15px !important;
  text-align: left !important;
  background: transparent !important
}

.session-history-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.session-history-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0
}

.session-history-title {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--text);
  min-width: 0;
  flex: 1;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word
}

.session-status-mini {
  flex-shrink: 0;
  align-self: flex-start;
  max-width: 96px;
  text-align: center
}

.session-history-meta-row {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55
}

.session-history-players-row {
  font-size: 12px;
  color: var(--text);
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .86
}

.session-history-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0
}

.session-history-metric {
  min-width: 66px;
  padding: 8px 10px;
  border-radius: 13px;
  background: var(--bg3);
  border: 1px solid var(--border);
  text-align: center
}

.session-history-metric strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis
}

.session-history-metric span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-weight: 800;
  margin-top: 2px
}

.session-history-metric.accent strong {
  color: var(--accent)
}

.session-history-head .expense-accordion-chevron {
  align-self: center;
  margin-left: 2px
}

.session-history-expand-hint {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 2px;
  padding: 10px 4px 2px;
  border-top: 1px dashed rgba(17, 184, 154, .2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em
}

.session-history-expand-hint .session-hint-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0
}

.session-history-expand-hint .session-hint-open {
  display: none
}

.session-history-expand-hint .session-hint-arrow {
  flex: 0 0 auto;
  color: var(--accent);
  background: transparent !important
}

.session-history-item.open .session-hint-closed {
  display: none
}

.session-history-item.open .session-hint-open {
  display: inline-flex
}

.session-history-item.open .session-history-expand-hint .session-hint-arrow::before {
  transform: rotate(-40deg)
}

.session-history-item.open .session-history-expand-hint .session-hint-arrow::after {
  transform: rotate(40deg)
}

.session-history-head:hover .session-history-expand-hint {
  border-color: rgba(17, 184, 154, .34);
  color: var(--text)
}

html[data-theme="dark"] .session-history-expand-hint {
  border-top-color: rgba(94, 234, 212, .22);
  color: rgba(230, 238, 252, .72)
}

.session-accordion-body {
  padding: 0 15px 15px !important;
  background: transparent !important
}

.session-summary-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 14px
}

.session-summary-grid>div,
.session-expense-grid>div {
  border-radius: 14px !important;
  padding: 11px !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important
}

.compact-section {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border)
}

.session-player-list {
  gap: 7px
}

.session-player-list span {
  background: rgba(17, 184, 154, .08);
  border-color: rgba(17, 184, 154, .18);
  color: var(--text)
}

.session-match-list {
  border-radius: 14px;
  background: rgba(255, 255, 255, .5);
  border-color: var(--border)
}

.session-expense-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 10px 24px rgba(70, 76, 90, .05)
}

html[data-theme="dark"] .session-expense-card {
  background: rgba(22, 33, 62, .42);
  box-shadow: none
}

.session-expense-venue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: rgba(17, 184, 154, .07);
  border: 1px solid rgba(17, 184, 154, .18)
}

.session-expense-venue-row span {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted)
}

.session-expense-venue-row strong {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.session-expense-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px
}

.session-expense-subgrid .expense-detail-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important
}

.session-expense-line {
  padding: 8px 0
}

@media(max-width:820px) {
  .session-history-head {
    flex-direction: column;
    gap: 11px !important
  }

  .session-history-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px
  }

  .session-history-metric {
    min-width: 0
  }

  .session-history-metric strong {
    max-width: 100%
  }

  .session-history-head .expense-accordion-chevron {
    display: none
  }

  .session-history-expand-hint {
    display: flex
  }
}

@media(max-width:680px) {
  .session-history-title {
    font-size: 15px !important;
    -webkit-line-clamp: 2
  }

  .session-history-topline {
    gap: 8px
  }

  .session-status-mini {
    max-width: none
  }

  .session-history-metrics {
    grid-template-columns: 1fr 1fr 1.2fr
  }

  .session-summary-grid {
    grid-template-columns: 1fr 1fr
  }

  .session-expense-subgrid {
    grid-template-columns: 1fr
  }
}

@media(max-width:920px) {
  .session-expense-subgrid {
    grid-template-columns: 1fr
  }

  .session-expense-line span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }
}

@media(max-width:520px) {
  .session-history-topline {
    align-items: flex-start
  }

  .session-history-title {
    font-size: 15px !important;
    line-height: 1.32
  }

  .session-history-metrics {
    grid-template-columns: 1fr 1fr;
    align-items: stretch
  }

  .session-history-metric.accent {
    grid-column: span 2
  }
}

@media(max-width:420px) {
  .session-history-expand-hint {
    padding: 9px 2px 1px;
    font-size: 11.5px
  }

  .session-expense-venue-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px
  }

  .session-expense-venue-row strong {
    text-align: left;
    white-space: normal
  }
}


/* V17.2: Move summary history entry to Stats + cleaner session summary cards */
.stats-history-entry-btn {
  appearance: none;
  border: 1px solid rgba(17, 184, 154, .24);
  background: linear-gradient(135deg, rgba(17, 184, 154, .12), rgba(109, 93, 252, .06));
  color: var(--text);
  border-radius: 18px;
  padding: 10px 13px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 188px;
  justify-content: flex-start;
  box-shadow: 0 12px 26px rgba(70, 76, 90, .07);
}

.stats-history-entry-btn:active {
  transform: scale(.98)
}

.stats-history-entry-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 184, 154, .12);
  color: var(--accent);
  flex-shrink: 0;
}

.stats-history-entry-icon svg {
  width: 18px;
  height: 18px
}

.stats-history-entry-btn strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap
}

.stats-history-entry-btn small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.25;
  margin-top: 2px;
  white-space: nowrap
}

html[data-theme="dark"] .stats-history-entry-btn {
  background: linear-gradient(135deg, rgba(0, 212, 170, .10), rgba(124, 58, 237, .10));
  border-color: rgba(0, 212, 170, .22);
  box-shadow: none;
}

.session-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.session-summary-grid>div {
  min-width: 0;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.session-summary-grid>div:first-child {
  grid-column: span 2;
}

.session-summary-grid>div span {
  display: block;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted) !important;
}

.session-summary-grid>div strong {
  display: block;
  font-size: 15px !important;
  line-height: 1.35 !important;
  word-break: keep-all;
  overflow-wrap: normal;
}

.session-summary-grid>div:not(:first-child) strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-mvp-highlight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--playing) 28%, var(--border));
  border-radius: 15px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--playing) 10%, var(--card)),
    color-mix(in srgb, var(--playing) 4%, var(--card)));
}

.session-mvp-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--playing);
  background: color-mix(in srgb, var(--playing) 13%, var(--card));
  border: 1px solid color-mix(in srgb, var(--playing) 24%, transparent);
  font-size: 22px;
  line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 560, 'GRAD' 0, 'opsz' 24;
}

.session-mvp-copy {
  min-width: 0;
}

.session-mvp-label,
.session-mvp-copy small {
  display: block;
  color: var(--muted);
}

.session-mvp-label {
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

.session-mvp-names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 7px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
}

.session-mvp-names i {
  color: color-mix(in srgb, var(--playing) 65%, var(--muted));
  font-style: normal;
}

.session-mvp-copy small {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.3;
}

.session-mvp-status {
  align-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--playing) 78%, var(--text));
  background: color-mix(in srgb, var(--playing) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--playing) 25%, transparent);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.session-mvp-highlight.is-empty {
  border-color: var(--border);
  background: var(--bg3);
}

.session-mvp-highlight.is-empty .session-mvp-icon,
.session-mvp-highlight.is-empty .session-mvp-status {
  color: var(--muted);
  border-color: var(--border);
  background: var(--card);
}

@media(max-width:680px) {
  .stats-dashboard-head,
  .expense-header {
    flex-direction: column;
    align-items: stretch
  }

  .stats-history-entry-btn {
    width: 100%;
    justify-content: center;
    min-width: 0
  }

  .session-summary-grid {
    grid-template-columns: 1fr 1fr !important
  }

  .session-summary-grid>div:first-child {
    grid-column: 1 / -1
  }
}

@media(max-width:420px) {
  .session-summary-grid {
    grid-template-columns: 1fr !important
  }

  .session-summary-grid>div:first-child {
    grid-column: auto
  }

  .session-summary-grid>div {
    min-height: auto;
    align-items: flex-start
  }

  .session-summary-grid>div:not(:first-child) strong {
    white-space: normal
  }

  .session-mvp-highlight {
    padding: 12px;
  }
}


/* V17.4: Main flow navigation + header settings */
.topbar {
  position: sticky !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 56px !important
}

.topbar-actions {
  position: absolute;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 12px
}

.header-settings-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 8px 24px rgba(31, 41, 55, .08)
}

.header-settings-btn svg {
  width: 18px;
  height: 18px
}

.header-settings-btn:hover,
.header-settings-btn.active {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .38);
  background: rgba(17, 184, 154, .08)
}

.header-settings-btn:active {
  transform: scale(.96)
}

.header-settings-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 184, 154, .16)
}

.topbar-actions .sync-dot {
  position: static !important;
  right: auto !important;
  flex: 0 0 auto
}

.main-bottom-nav .nav-btn {
  font-size: 11px;
  font-weight: 800
}

.main-bottom-nav .nav-btn#nav-expense.active {
  color: var(--accent)
}

.main-bottom-nav .nav-btn#nav-expense.active svg {
  filter: drop-shadow(0 4px 10px rgba(17, 184, 154, .18))
}

.page.is-expense-mode .settings-head,
.page.is-expense-mode .settings-tabs {
  display: none !important
}

body.auth-ready #page-settings.is-expense-mode .settings-head,
body.auth-ready #page-settings.is-expense-mode .settings-tabs {
  display: none !important;
}

.page.is-expense-mode .settings-expense-panel {
  padding-top: 0
}

.page.is-expense-mode .expense-header {
  margin-top: 0
}

html[data-theme="dark"] .header-settings-btn {
  background: rgba(22, 33, 62, .86);
  border-color: var(--border);
  color: var(--muted);
  box-shadow: none
}

html[data-theme="dark"] .header-settings-btn:hover,
html[data-theme="dark"] .header-settings-btn.active {
  color: var(--accent);
  background: rgba(0, 212, 170, .10);
  border-color: rgba(0, 212, 170, .32)
}

@media(max-width:420px) {
  .topbar {
    padding: 0 54px !important
  }

  .topbar-logo {
    font-size: 15px !important;
    max-width: 210px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .topbar-actions {
    right: 10px;
    gap: 10px
  }

  .header-settings-btn {
    width: 34px;
    height: 34px
  }
}

/* V17.4: Make expense save action more prominent */
.expense-actions {
  grid-template-columns: 1.18fr .92fr !important;
  gap: 10px !important;
  margin-top: 16px !important
}

.expense-actions .btn {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: 14px !important
}

.btn-expense-save {
  background: linear-gradient(135deg, #15c8aa, #0ea889) !important;
  color: #fff !important;
  border: 1px solid rgba(17, 184, 154, .42) !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(17, 184, 154, .24) !important
}

.btn-expense-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(17, 184, 154, .28) !important
}

.btn-expense-save:active {
  transform: scale(.985) !important
}

.btn-expense-copy {
  background: rgba(255, 255, 255, .72) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-weight: 800 !important
}

html[data-theme="dark"] .btn-expense-copy {
  background: rgba(22, 33, 62, .72) !important;
  color: var(--text) !important;
  border-color: var(--border) !important
}

@media(max-width:420px) {
  .expense-actions {
    grid-template-columns: 1fr !important
  }

  .btn-expense-save {
    min-height: 52px !important;
    font-size: 15px !important
  }
}


/* V17.5: Expense save completion CTA */
.expense-save-cta-sheet {
  max-width: 480px;
  width: min(94vw, 480px)
}

.expense-save-cta-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(17, 184, 154, .12), rgba(17, 184, 154, .04));
  border: 1px solid rgba(17, 184, 154, .22);
  margin-bottom: 14px
}

.expense-save-cta-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 22px rgba(17, 184, 154, .24)
}

.expense-save-cta-icon svg {
  width: 22px;
  height: 22px
}

/* V17.6: Expense save progress feedback + one-shot checkmark drawing */
.expense-save-progress-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 24px 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(17, 184, 154, .22);
  background: linear-gradient(145deg, rgba(17, 184, 154, .10), rgba(17, 184, 154, .035));
  text-align: center;
}

.expense-save-progress-visual {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.expense-save-progress-ring {
  width: 96px;
  height: 96px;
  transform: rotate(-90deg);
  overflow: visible;
}

.expense-save-progress-track,
.expense-save-progress-indicator {
  fill: none;
  stroke-width: 6;
}

.expense-save-progress-track {
  stroke: color-mix(in srgb, var(--accent) 15%, transparent);
}

.expense-save-progress-indicator {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 188.5;
  stroke-dashoffset: 188.5;
  transition: stroke-dashoffset .42s ease;
}

.expense-save-progress-visual > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.expense-save-progress-copy {
  display: grid;
  gap: 4px;
  max-width: 360px;
}

.expense-save-progress-copy strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}

.expense-save-progress-copy span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.expense-save-progress-bar {
  width: min(100%, 340px);
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.expense-save-progress-bar > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16b99c, #2dd4bf);
  transition: width .42s ease;
}

.expense-save-check-path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.expense-save-check-path.is-drawing {
  animation: expense-save-check-draw .58s cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes expense-save-check-draw {
  to { stroke-dashoffset: 0; }
}

html[data-theme="dark"] .expense-save-progress-card {
  border-color: rgba(45, 212, 191, .24);
  background: linear-gradient(145deg, rgba(0, 212, 170, .14), rgba(17, 26, 46, .62));
}

html[data-theme="dark"] .expense-save-progress-track {
  stroke: rgba(45, 212, 191, .18);
}

@media (prefers-reduced-motion: reduce) {
  .expense-save-progress-indicator,
  .expense-save-progress-bar > span {
    transition: none !important;
  }

  .expense-save-check-path,
  .expense-save-check-path.is-drawing {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}

.expense-save-cta-heading {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 3px
}

.expense-save-cta-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55
}

.expense-save-cta-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.expense-save-cta-actions .btn {
  min-height: 48px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900
}

.expense-close-session-btn {
  background: linear-gradient(135deg, #15c8aa, #0ea889) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(17, 184, 154, .22) !important
}

.expense-save-cta-later {
  grid-column: 1 / -1;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--muted) !important;
  font-weight: 800 !important
}

.expense-save-cta-later:hover {
  background: rgba(125, 132, 145, .08) !important;
  border-color: rgba(125, 132, 145, .12) !important;
  color: var(--text) !important
}

html[data-theme="dark"] .expense-save-cta-card {
  background: linear-gradient(135deg, rgba(0, 212, 170, .14), rgba(22, 33, 62, .42));
  border-color: rgba(0, 212, 170, .22)
}

html[data-theme="dark"] .expense-save-cta-icon {
  color: #0f0f1a
}

.expense-save-wizard-sheet {
  width: min(94vw, 560px);
  max-width: 560px;
}

#expense-save-wizard-modal {
  z-index: 1400 !important;
  align-items: center !important;
  justify-content: center !important;
  padding:
    calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

#expense-save-wizard-modal .expense-save-wizard-sheet {
  position: relative !important;
  z-index: 1410 !important;
  width: min(100%, 460px) !important;
  max-width: 460px !important;
  max-height:
    calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 auto !important;
  border-radius: 20px !important;
  background: var(--card) !important;
  box-shadow: 0 24px 72px rgba(15, 23, 42, .26) !important;
}

#expense-save-wizard-modal .modal-header {
  flex: 0 0 auto !important;
  padding: 18px 18px 14px !important;
  background: var(--card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#expense-save-wizard-modal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 10px 18px 18px !important;
  background: var(--card) !important;
}

body:has(#expense-save-wizard-modal:not(.hidden)) .topbar,
body:has(#action-confirm-modal:not(.hidden)) .bottom-nav,
body:has(#action-confirm-modal:not(.hidden)) .topbar {
  z-index: 50 !important;
}

body:has(#expense-save-wizard-modal:not(.hidden)) .bottom-nav {
  z-index: 300 !important;
  pointer-events: none !important;
}

.expense-wizard-summary {
  margin-bottom: 14px;
}

.expense-wizard-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.expense-wizard-summary-grid div {
  min-width: 0;
  border-radius: 14px;
  padding: 12px 13px;
  background: rgba(125, 132, 145, .08);
  border: 1px solid rgba(125, 132, 145, .12);
}

.expense-wizard-summary-grid span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.expense-wizard-summary-grid strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.expense-wizard-choice-grid {
  display: grid;
  gap: 10px;
}

.expense-wizard-choice-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(17, 184, 154, .22);
  background: #fff;
  color: var(--text);
  border-radius: 16px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.expense-wizard-choice-card:hover,
.expense-wizard-choice-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(17, 184, 154, .55);
  box-shadow: 0 16px 32px rgba(15, 23, 42, .13);
  outline: none;
}

.expense-wizard-choice-card strong {
  font-size: 15px;
  line-height: 1.35;
}

.expense-wizard-choice-card small {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 700;
}

.expense-wizard-choice-card.primary {
  border-color: rgba(17, 184, 154, .70);
  background: linear-gradient(135deg, #17b89a, #0ea786);
  color: #fff;
  box-shadow: 0 16px 34px rgba(17, 184, 154, .28);
}

.expense-wizard-choice-card.primary small,
.expense-wizard-choice-card.primary .expense-wizard-choice-arrow {
  color: rgba(255, 255, 255, .84);
}

.expense-wizard-choice-card.secondary {
  background: rgba(255, 255, 255, .96);
}

.expense-wizard-choice-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(17, 184, 154, .10);
  color: var(--accent);
}

.expense-wizard-choice-card.primary .expense-wizard-choice-icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.expense-wizard-choice-icon svg {
  width: 20px;
  height: 20px;
}

.expense-wizard-choice-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.expense-wizard-choice-arrow {
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
}

.expense-wizard-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.expense-wizard-panel-title {
  font-weight: 900;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 4px;
}

.expense-wizard-panel-subtitle,
.expense-wizard-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.expense-wizard-note {
  padding: 12px;
  border-radius: 14px;
  background: rgba(17, 184, 154, .08);
  border: 1px solid rgba(17, 184, 154, .14);
  margin: 12px 0;
}

.expense-wizard-count {
  white-space: nowrap;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  color: var(--accent);
  background: rgba(17, 184, 154, .10);
  border: 1px solid rgba(17, 184, 154, .18);
  font-size: 12px;
}

.expense-wizard-edit-btn {
  border: 1px solid rgba(125, 132, 145, .18);
  background: rgba(255, 255, 255, .8);
  color: var(--text);
  border-radius: 12px;
  min-height: 38px;
  padding: 0 12px;
  font-weight: 900;
  margin-bottom: 10px;
}

.expense-wizard-player-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: min(24vh, 220px);
  overflow: auto;
  padding-right: 2px;
}

.expense-wizard-player-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(17, 184, 154, .10);
  color: var(--accent);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
}

.expense-wizard-check-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(125, 132, 145, .07);
  border: 1px solid rgba(125, 132, 145, .12);
}



.expense-wizard-check-row span {
  min-width: 0;
  font-weight: 900;
  color: var(--text);
}

.expense-wizard-check-row small {
  color: var(--muted);
  font-size: 12px;
}

.expense-wizard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.expense-wizard-actions .btn {
  min-height: 48px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
}

.expense-wizard-qr-action {
  display: grid;
  gap: 7px;
  margin: 14px 0 2px;
  padding: 12px;
  border: 1px solid rgba(17, 184, 154, .24);
  border-radius: 16px;
  background: rgba(17, 184, 154, .07);
}

.expense-wizard-qr-btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(17, 184, 154, .42);
  border-radius: 14px;
  background: var(--card);
  color: var(--accent);
  font-weight: 900;
}

.expense-wizard-qr-btn:hover,
.expense-wizard-qr-btn:focus-visible {
  border-color: var(--accent);
  background: rgba(17, 184, 154, .12);
  color: var(--accent) !important;
  outline: none;
}

.expense-wizard-qr-action small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.expense-qr-modal-backdrop {
  z-index: 1600 !important;
}

.expense-qr-modal-sheet {
  width: min(94vw, 560px);
  max-width: 560px;
  max-height: min(92dvh, 760px);
  overflow: hidden;
  border-radius: 22px;
}

.expense-qr-modal-body {
  display: grid;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.expense-qr-chooser-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(17, 184, 154, .24);
  border-radius: 15px;
  background: rgba(17, 184, 154, .08);
  color: var(--accent);
}

.expense-qr-chooser-intro .material-symbols-outlined {
  font-size: 22px;
}

.expense-qr-chooser-intro strong,
.expense-qr-chooser-intro small {
  display: block;
}

.expense-qr-chooser-intro strong {
  color: var(--text);
  font-size: 14px;
}

.expense-qr-chooser-intro small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.expense-qr-receiver-list {
  display: grid;
  gap: 10px;
}

.expense-qr-receiver-option {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid rgba(17, 184, 154, .22);
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.expense-qr-receiver-option:hover,
.expense-qr-receiver-option:focus-visible {
  border-color: var(--accent);
  background: rgba(17, 184, 154, .08);
  color: var(--text);
  outline: none;
  transform: translateY(-1px);
}

.expense-qr-receiver-option-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(17, 184, 154, .12);
  color: var(--accent);
}

.expense-qr-receiver-option-copy,
.expense-qr-receiver-option-copy strong,
.expense-qr-receiver-option-copy small {
  min-width: 0;
  display: block;
}

.expense-qr-receiver-option-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-qr-receiver-option-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-qr-receiver-option-arrow {
  color: var(--accent);
}

.expense-qr-empty {
  padding: 22px 14px;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.expense-qr-display-recipient {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 15px;
  border: 1px solid rgba(17, 184, 154, .24);
  border-radius: 16px;
  background: rgba(17, 184, 154, .07);
}

.expense-qr-display-recipient-copy,
.expense-qr-display-recipient-copy strong,
.expense-qr-display-recipient-copy span,
.expense-qr-display-recipient-copy small,
.expense-qr-display-amount span,
.expense-qr-display-amount strong {
  display: block;
}

.expense-qr-display-recipient-copy {
  min-width: 0;
}

.expense-qr-display-recipient-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-qr-display-recipient-copy span,
.expense-qr-display-recipient-copy small,
.expense-qr-display-amount span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.expense-qr-display-amount {
  flex: 0 0 auto;
  text-align: right;
}

.expense-qr-display-amount strong {
  margin-top: 3px;
  color: var(--accent);
  font-size: 17px;
  white-space: nowrap;
}

.expense-qr-image-frame {
  position: relative;
  width: min(78vw, 360px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(17, 184, 154, .20);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .12);
}

.expense-qr-display-image {
  width: 100%;
  height: 100%;
  display: none;
  object-fit: contain;
  image-rendering: auto;
}

.expense-qr-display-image[src] {
  display: block;
}

.expense-qr-display-status {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.expense-qr-display-image[src] + .expense-qr-display-status {
  display: none;
}

.expense-qr-display-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.expense-qr-display-actions .btn {
  min-height: 46px;
  border-radius: 13px;
  font-weight: 900;
}

html[data-theme="dark"] .expense-wizard-qr-action,
html[data-theme="dark"] .expense-qr-chooser-intro,
html[data-theme="dark"] .expense-qr-display-recipient {
  background: rgba(17, 184, 154, .12);
  border-color: rgba(45, 212, 191, .24);
}

html[data-theme="dark"] .expense-qr-receiver-option {
  background: rgba(17, 26, 46, .84);
  border-color: rgba(148, 163, 184, .18);
}

@media (prefers-reduced-motion: reduce) {
  .expense-qr-receiver-option,
  .expense-wizard-qr-btn {
    transition: none;
  }
}

@media (max-width: 520px) {
  .expense-qr-modal-sheet {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 19px;
  }

  .expense-qr-display-recipient {
    flex-direction: column;
  }

  .expense-qr-display-amount {
    text-align: left;
  }

  .expense-qr-display-actions {
    grid-template-columns: 1fr 1fr;
  }

  .expense-qr-display-actions .btn:last-child {
    grid-column: 1 / -1;
  }
}

html[data-theme="dark"] .expense-wizard-choice-card,
html[data-theme="dark"] .expense-wizard-edit-btn {
  background: rgba(17, 26, 46, .78);
  border-color: rgba(148, 163, 184, .16);
}

html[data-theme="dark"] .expense-wizard-choice-card.primary {
  background: linear-gradient(135deg, #17b89a, #0d9578);
  border-color: rgba(45, 212, 191, .58);
}

html[data-theme="dark"] .expense-wizard-summary-grid div,
html[data-theme="dark"] .expense-wizard-check-row {
  background: rgba(17, 26, 46, .62);
  border-color: rgba(148, 163, 184, .14);
}

@media(max-width:899px) {
  #expense-save-wizard-modal {
    align-items: flex-start !important;
  }
}

@media(max-width:420px) {
  .expense-save-cta-actions {
    grid-template-columns: 1fr
  }

  .expense-save-cta-later {
    grid-column: auto
  }

  #expense-save-wizard-modal {
    padding:
      calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  #expense-save-wizard-modal .expense-save-wizard-sheet {
    width: 100% !important;
    max-height:
      calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
  }

  #expense-save-wizard-modal .modal-header {
    padding: 16px 16px 12px !important;
  }

  #expense-save-wizard-modal .modal-body {
    padding: 10px 16px 16px !important;
  }

  .expense-wizard-summary-grid {
    gap: 8px;
  }

  .expense-wizard-summary-grid div {
    border-radius: 12px;
    padding: 10px 12px;
  }

  .expense-wizard-summary-grid span {
    font-size: 11px;
    margin-bottom: 3px;
  }

  .expense-wizard-summary-grid strong {
    font-size: 14px;
  }

  .expense-wizard-choice-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 86px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .expense-wizard-choice-icon {
    width: 40px;
    height: 40px;
  }

  .expense-wizard-choice-card strong {
    font-size: 14px;
  }

  .expense-wizard-choice-card small {
    font-size: 12px;
    line-height: 1.45;
  }

  .expense-wizard-choice-arrow {
    font-size: 24px;
  }

  .expense-wizard-panel-head {
    gap: 8px;
  }

  .expense-wizard-player-list {
    max-height: min(22vh, 180px);
  }

  .expense-wizard-actions {
    grid-template-columns: 1fr;
  }

  .expense-wizard-panel-head {
    display: grid;
  }
}


/* V17.6: Header polish - balanced app bar and compact settings/status cluster */
.topbar {
  height: 64px !important;
  padding: 0 max(14px, calc((100vw - 520px)/2 + 14px)) !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  justify-content: normal !important;
  gap: 10px !important;
}

.theme-toggle {
  position: static !important;
  grid-column: 1 !important;
  justify-self: start !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(31, 41, 55, .09) !important;
}

.topbar-logo {
  grid-column: 2 !important;
  justify-self: center !important;
  max-width: 100% !important;
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: -.2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 4px !important;
}

.topbar-actions {
  position: relative !important;
  right: auto !important;
  grid-column: 3 !important;
  justify-self: end !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.header-settings-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(31, 41, 55, .09) !important;
}

.header-settings-btn svg {
  width: 18px !important;
  height: 18px !important
}

.topbar-actions .sync-dot {
  position: absolute !important;
  right: 2px !important;
  top: 8px !important;
  width: 9px !important;
  height: 9px !important;
  border: 2px solid var(--card) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .header-settings-btn {
  box-shadow: none !important;
}

html[data-theme="dark"] .topbar-actions .sync-dot {
  border-color: #1a1a2e !important;
}

@media(max-width:420px) {
  .topbar {
    height: 60px !important;
    padding: 0 12px !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    gap: 8px !important;
  }

  .theme-toggle,
  .header-settings-btn {
    width: 35px !important;
    height: 35px !important;
  }

  .topbar-actions {
    width: 38px !important;
    height: 38px !important;
    right: auto !important;
    gap: 0 !important
  }

  .topbar-logo {
    font-size: 14px !important;
    max-width: 100% !important;
    padding: 0 !important
  }

  .topbar-actions .sync-dot {
    right: 1px !important;
    top: 7px !important;
    width: 8px !important;
    height: 8px !important
  }
}


/* V17.7: Desktop header alignment fix
   - Remove oversized dynamic padding from v17.6
   - Make header and bottom nav use the same container width
   - Keep title centered and buttons balanced on desktop/tablet/mobile
*/
.topbar {
  box-sizing: border-box !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  height: 64px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 10px !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 0 20px 20px !important;
}

.topbar .theme-toggle {
  grid-column: 1 !important;
  justify-self: start !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
}

.topbar-logo {
  grid-column: 2 !important;
  justify-self: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 8px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.topbar-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  position: relative !important;
  right: auto !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.header-settings-btn {
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.topbar-actions .sync-dot {
  position: absolute !important;
  right: 2px !important;
  top: 7px !important;
  width: 9px !important;
  height: 9px !important;
  border: 2px solid var(--card) !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  pointer-events: none !important;
}

@media(min-width:720px) {

  .topbar,
  .bottom-nav {
    width: min(calc(100% - 40px), 760px) !important;
    max-width: 760px !important;
  }

  .topbar {
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 16px !important;
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 0 22px 22px !important;
  }

  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

@media(min-width:768px) and (max-width:1023px) {

  .topbar,
  .bottom-nav {
    width: min(calc(100% - 48px), 820px) !important;
    max-width: 820px !important;
  }
}

@media(min-width:1024px) {

  .topbar,
  .bottom-nav {
    width: min(calc(100% - 64px), 920px) !important;
    max-width: 920px !important;
  }

  .topbar {
    height: 62px !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    padding: 0 18px !important;
  }

  .topbar-logo {
    font-size: 16px !important;
    letter-spacing: -.25px !important
  }
}

@media(min-width:1280px) {

  .topbar,
  .bottom-nav {
    width: min(calc(100% - 96px), 1040px) !important;
    max-width: 1040px !important;
  }
}

@media(max-width:420px) {
  .topbar {
    height: 60px !important;
    padding: 0 12px !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    gap: 8px !important;
  }

  .topbar .theme-toggle,
  .header-settings-btn {
    width: 35px !important;
    height: 35px !important;
  }

  .topbar-actions {
    width: 38px !important;
    height: 38px !important
  }

  .topbar-logo {
    font-size: 14px !important;
    padding: 0 4px !important
  }

  .topbar-actions .sync-dot {
    right: 1px !important;
    top: 6px !important;
    width: 8px !important;
    height: 8px !important
  }
}


/* v17.12: Closed/idle visual state for no active Session */
.session-summary-empty {
  border: 1px solid rgba(148, 163, 184, .30) !important;
  background: linear-gradient(135deg, rgba(148, 163, 184, .13), rgba(248, 113, 113, .055)) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  position: relative !important;
  overflow: hidden !important;
}

.session-summary-empty::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #94a3b8;
  position: absolute;
  top: 17px;
  right: 17px;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .14);
}

.session-summary-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 100% 0%, rgba(148, 163, 184, .12), transparent 34%);
}

.session-summary-empty strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 4px;
  padding-right: 28px;
}

.session-summary-empty span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  padding-right: 28px;
}

html[data-theme="dark"] .session-summary-empty {
  background: linear-gradient(135deg, rgba(71, 85, 105, .26), rgba(127, 29, 29, .10)) !important;
  border-color: rgba(148, 163, 184, .20) !important;
}

html[data-theme="dark"] .session-summary-empty::before {
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .12);
}

html[data-theme="dark"] .session-summary-empty::after {
  background: radial-gradient(circle at 100% 0%, rgba(148, 163, 184, .12), transparent 36%);
}

/* V17.13: Session history slide-to-detail flow */
.session-history-modal-sheet {
  max-width: 820px !important;
  width: min(94vw, 820px) !important;
}

.session-history-list {
  display: block !important;
  overflow: hidden !important;
}

.session-history-slider {
  width: 200%;
  display: flex;
  align-items: flex-start;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.session-history-slider.show-detail {
  transform: translateX(-50%);
}

.session-history-panel {
  width: 50%;
  flex: 0 0 50%;
  min-width: 0;
}

.session-history-panel-list,
.session-history-panel-detail {
  padding: 0;
}

.session-history-list-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.session-history-head {
  cursor: pointer;
  align-items: center !important;
}

.session-history-main {
  gap: 8px !important;
}

.session-history-topline {
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.session-history-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  line-height: 1.32 !important;
}

.session-status-mini {
  margin-top: 0 !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

.session-history-meta-row {
  display: none !important;
}

.session-history-players-row {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

.session-history-next-chevron {
  transform: rotate(-90deg);
  margin-left: 2px;
}

.session-history-head:hover .session-history-next-chevron::before,
.session-history-head:hover .session-history-next-chevron::after {
  background: var(--accent);
}

.session-history-expand-hint .session-hint-open {
  display: none !important;
}

.session-history-item.open .session-hint-closed {
  display: inline-flex !important;
}

.session-history-item.open .session-history-expand-hint .session-hint-arrow::before,
.session-history-item.open .session-history-expand-hint .session-hint-arrow::after {
  transform: initial !important;
}

.session-detail-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 2px;
}

.session-detail-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.session-detail-back-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: .15s ease;
}

.session-detail-back-btn:hover {
  border-color: rgba(17, 184, 154, .28);
  background: rgba(17, 184, 154, .08);
  transform: translateX(-1px);
}

.session-detail-back-btn span {
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
}

.session-detail-back-btn strong {
  font-size: 12px;
  font-weight: 900;
}

.session-detail-hero {
  border: 1px solid rgba(17, 184, 154, .20);
  background: linear-gradient(135deg, rgba(17, 184, 154, .10), rgba(109, 93, 252, .045));
  border-radius: 20px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.session-detail-title-wrap {
  min-width: 0;
  flex: 1;
}

.session-detail-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .45px;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.session-detail-scheduled-start {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(17, 184, 154, .22);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(17, 184, 154, .07);
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.session-detail-title {
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.session-detail-players {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.session-detail-summary-grid {
  margin-top: 0 !important;
}

.session-detail-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg3);
}

.session-detail-tab {
  appearance: none;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  min-height: 34px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.session-detail-tab:hover {
  color: var(--text);
  background: rgba(17, 184, 154, .06);
}

.session-detail-tab.active {
  color: var(--text);
  background: var(--card);
  box-shadow: 0 0 0 1px rgba(17, 184, 154, .16), 0 6px 18px rgba(15, 23, 42, .08);
}

.session-detail-tab-panel.hidden {
  display: none;
}

.session-analysis-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Court and Shuttle Profile rows: compact status-first layout */
.court-profile-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
}

.court-profile-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.court-profile-status-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.court-profile-row.is-disabled {
  opacity: .62;
}

.court-profile-toggle {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.court-profile-toggle .qbad-toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--border);
  transition: background-color .16s ease;
}

.court-profile-toggle .qbad-toggle-slider::before {
  position: absolute;
  content: "";
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  transition: transform .16s ease;
}

.court-profile-toggle[aria-checked="true"] .qbad-toggle-slider {
  background: var(--accent);
}

.court-profile-toggle[aria-checked="true"] .qbad-toggle-slider::before {
  transform: translateX(16px);
}

.court-profile-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 3px;
}

.court-profile-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  flex-wrap: nowrap;
}

.court-profile-edit-btn,
.court-profile-default-btn,
.court-profile-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 6px 9px;
  line-height: 1.2;
}

.court-profile-edit-btn {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  color: var(--accent);
}

.court-profile-edit-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

.court-profile-edit-btn .material-symbols-outlined,
.court-profile-default-btn .material-symbols-outlined,
.court-profile-delete-btn .material-symbols-outlined {
  font-size: 15px;
  line-height: 1;
}

.court-profile-default-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  font-size: 10.5px;
  color: var(--muted);
  border-color: color-mix(in srgb, var(--muted) 24%, var(--border));
  background: color-mix(in srgb, var(--muted) 5%, var(--card));
}

.court-profile-default-btn:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

.court-profile-default-btn.is-current {
  width: auto;
  min-width: 0;
  padding: 6px 8px;
  color: var(--playing);
  border-color: color-mix(in srgb, var(--playing) 30%, var(--border));
  background: color-mix(in srgb, var(--playing) 12%, var(--card));
  cursor: default;
  pointer-events: none;
}

.court-profile-delete-btn {
  align-self: auto;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
}

html[data-theme="dark"] .court-profile-edit-btn {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
  color: #5eead4;
}

html[data-theme="dark"] .court-profile-default-btn.is-current {
  color: #fbbf24;
}

@media(max-width: 520px) {
  .court-profile-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 11px 8px;
  }

  .court-profile-actions {
    min-width: 0;
  }

  .court-profile-edit-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
  }

  .court-profile-edit-btn span:last-child {
    display: none;
  }

  .court-profile-default-btn.is-current {
    padding-inline: 7px;
    font-size: 10px;
  }
}

.session-analysis-guide-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 184, 154, .24);
  border-radius: 14px;
  background: rgba(17, 184, 154, .06);
  color: var(--accent);
  text-decoration: none;
}

.session-analysis-guide-tip > .material-symbols-outlined:first-child {
  font-size: 20px;
}

.session-analysis-guide-tip > .material-symbols-outlined:last-child {
  font-size: 18px;
}

.session-analysis-guide-tip strong,
.session-analysis-guide-tip small {
  display: block;
}

.session-analysis-guide-tip strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.session-analysis-guide-tip small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
}

.session-analysis-guide-tip:hover {
  border-color: rgba(17, 184, 154, .42);
  background: rgba(17, 184, 154, .09);
}

.session-analysis-kpi-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
}

.session-analysis-kpi {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 13px 14px;
  min-width: 0;
}

.session-analysis-kpi span,
.session-analysis-section-head span,
.session-analysis-bucket em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.session-analysis-kpi strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.session-analysis-kpi em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
}

.session-analysis-kpi.primary {
  border-color: rgba(17, 184, 154, .28);
  background: linear-gradient(135deg, rgba(17, 184, 154, .10), rgba(99, 102, 241, .045));
}

.session-analysis-buckets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.session-analysis-bucket {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 9px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--bg3);
}

.session-analysis-bucket strong,
.session-analysis-grade {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.session-analysis-bucket span {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.session-analysis-bucket em {
  grid-column: 2;
  font-style: normal;
}

.session-analysis-grade {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  margin-right: 6px;
  font-size: 11px;
}

.session-analysis-bucket.tone-high strong,
.session-analysis-grade.tone-high {
  background: #ef4444;
}

.session-analysis-bucket.tone-mid strong,
.session-analysis-grade.tone-mid {
  background: #f59e0b;
}

.session-analysis-bucket.tone-low strong,
.session-analysis-grade.tone-low {
  background: #64748b;
}

.session-analysis-section {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
}

.session-analysis-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
}

.session-analysis-section-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.session-analysis-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.session-analysis-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.session-analysis-table th,
.session-analysis-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.session-analysis-table th {
  color: var(--muted);
  background: var(--bg3);
  font-size: 10px;
  font-weight: 900;
}

.session-analysis-table .col-no {
  width: 28px;
}

.session-analysis-table.game-table .col-match {
  width: 40%;
}

.session-analysis-table.game-table .col-total {
  width: 36px;
}

.session-analysis-table.game-table .col-score {
  width: 74px;
}

.session-analysis-table.game-table .col-balance {
  width: 54px;
}

.session-analysis-table.game-table .col-carry {
  width: 70px;
}

.session-analysis-table.player-table .col-player {
  width: 20%;
}

.session-analysis-table.player-table .col-level {
  width: 14%;
}

.session-analysis-table.player-table .col-carried {
  width: 52px;
}

.session-analysis-table.player-table .col-by,
.session-analysis-table.player-table .col-carries {
  width: 18%;
}

.session-analysis-table.player-table .col-status {
  width: 70px;
}

.session-analysis-table td:first-child,
.session-analysis-table.game-table td:nth-child(3),
.session-analysis-table.player-table td:nth-child(3) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.session-analysis-table td:nth-child(2) {
  min-width: 0;
}

.session-analysis-table td:nth-child(2) strong {
  font-weight: 850;
}

.session-analysis-table td:nth-child(2) span {
  display: inline-block;
  margin: 0 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.session-analysis-table tr:last-child td {
  border-bottom: 0;
}

.session-analysis-table.player-table {
  min-width: 0;
}

.session-analysis-table.player-table td:nth-child(3) strong {
  display: inline-block;
  font-weight: 950;
}

.session-analysis-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(17, 184, 154, .10);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.session-analysis-status.is-warning {
  background: rgba(245, 158, 11, .12);
  color: #b45309;
}

.session-analysis-note,
.session-analysis-empty {
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--bg3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .session-detail-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .session-detail-tab {
    width: 100%;
    padding-inline: 10px;
  }

  .session-analysis-kpi-grid,
  .session-analysis-buckets {
    grid-template-columns: 1fr;
  }

  .session-analysis-section-head {
    display: block;
  }

  .session-analysis-section-head span {
    margin-top: 3px;
  }

  .session-analysis-table th,
  .session-analysis-table td {
    padding: 8px 6px;
    font-size: 10px;
  }

  .session-analysis-table.game-table .col-match {
    width: 36%;
  }

  .session-analysis-table.game-table .col-score {
    width: 66px;
  }

  .session-analysis-table.game-table .col-balance,
  .session-analysis-table.game-table .col-carry,
  .session-analysis-table.player-table .col-status {
    width: 56px;
  }

  .session-analysis-table.player-table .col-level {
    width: 15%;
  }

  .session-analysis-table.player-table .col-carried {
    width: 48px;
  }

  .session-analysis-status {
    justify-content: center;
    padding-inline: 5px;
    font-size: 10px;
    text-align: center;
    white-space: normal;
  }
}

.session-detail-actions {
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
}

.session-detail-action-primary,
.session-detail-action-footer {
  width: 100%;
}

.session-detail-action-primary {
  display: flex;
}

.session-detail-action-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.session-detail-action-footer > .session-recycle-muted-btn,
.session-detail-action-footer > .history-copy-btn {
  min-height: 44px;
}

.session-detail-action-footer > .history-copy-btn {
  margin-left: auto;
}

.session-stats-open-btn {
  appearance: none;
  min-height: 44px;
  padding: 9px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
  width: 100%;
}

.session-stats-open-btn .material-symbols-outlined {
  font-size: 18px;
}

.session-stats-open-btn:hover,
.session-stats-open-btn:focus-visible {
  border-color: rgba(17, 184, 154, .22);
  background: rgba(17, 184, 154, .12);
  color: var(--accent);
}

.session-stats-open-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  outline-offset: 2px;
}

.session-stats-open-btn:active {
  background: rgba(17, 184, 154, .15);
}

@media (max-width: 640px) {
  .session-detail-action-footer > .session-recycle-muted-btn,
  .session-detail-action-footer > .history-copy-btn {
    min-width: 0;
  }

  .session-detail-action-footer > .session-recycle-muted-btn {
    flex: 0 0 auto;
    width: fit-content;
  }

  .session-detail-action-footer > .history-copy-btn {
    flex: 0 1 auto;
  }
}

.session-recycle-muted-btn,
.session-recycle-bin-link,
.deleted-session-restore-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  min-height: 34px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: .16s ease;
}

.session-recycle-muted-btn {
  color: #b42318;
  border-color: rgba(220, 38, 38, .24);
  background: rgba(254, 226, 226, .58);
}

/* Secondary history access: quiet teal treatment that matches the product CI. */
.session-recycle-bin-link {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  min-height: 32px;
  padding: 6px 9px;
  font-size: 10.5px;
  white-space: nowrap;
}

.deleted-session-restore-btn {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  white-space: nowrap;
}

.session-recycle-muted-btn.is-disabled,
.session-recycle-muted-btn.is-disabled:hover {
  opacity: .58;
  cursor: not-allowed;
  color: var(--muted);
  border-color: rgba(117, 130, 151, .2);
  background: transparent;
  box-shadow: none;
}

.session-recycle-muted-btn small {
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.session-recycle-muted-btn:hover,
.session-recycle-bin-link:hover,
.deleted-session-restore-btn:hover {
  color: var(--text);
  border-color: rgba(17, 184, 154, .32);
  background: rgba(17, 184, 154, .06);
}

/* Destructive Session action: make the intent clear on hover/focus. */
.session-recycle-muted-btn:not(.is-disabled):hover,
.session-recycle-muted-btn:not(.is-disabled):focus-visible {
  color: #b42318;
  border-color: rgba(220, 38, 38, .42);
  background: rgba(220, 38, 38, .08);
  box-shadow: 0 4px 12px rgba(220, 38, 38, .12);
}

/* Keep the deleted-session list action in the product's teal CI color. */
.session-recycle-bin-link:hover,
.session-recycle-bin-link:focus-visible {
  color: var(--accent);
  border-color: rgba(0, 168, 132, .34);
  background: rgba(0, 168, 132, .08);
  box-shadow: 0 4px 12px rgba(0, 168, 132, .10);
}

.session-recycle-muted-btn .material-symbols-outlined,
.session-recycle-bin-link .material-symbols-outlined,
.deleted-session-restore-btn .material-symbols-outlined {
  font-size: 16px;
}

.session-history-header-actions {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .session-expense-utility-actions {
    width: 100%;
  }

  .session-expense-utility-actions > button {
    flex: 0 1 auto;
  }

  .session-expense-section-head {
    gap: 8px;
  }

  .session-expense-section-head .expense-detail-title {
    min-width: 0;
  }

  .session-recycle-bin-link {
    padding-inline: 8px;
  }
}

.session-recycle-bin-modal-sheet {
  max-width: 620px !important;
  width: min(94vw, 620px) !important;
}

.deleted-session-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deleted-session-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
}

@media (min-width: 721px) {
  .deleted-session-history-row {
    height: 100%;
  }
}

html[data-theme="dark"] .session-expense-primary-action.history-view-expense-btn {
  border-color: rgba(45, 212, 191, .25);
  background: rgba(45, 212, 191, .10);
  color: #5eead4;
}

html[data-theme="dark"] .session-expense-primary-action.history-view-expense-btn:hover,
html[data-theme="dark"] .session-expense-primary-action.history-view-expense-btn:focus-visible {
  border-color: rgba(45, 212, 191, .40);
  background: rgba(45, 212, 191, .15);
}

html[data-theme="dark"] .session-expense-copy-btn.history-copy-btn,
html[data-theme="dark"] .session-expense-delete-btn {
  border: 0;
  background: transparent;
  color: #94a3b8;
}

html[data-theme="dark"] .session-expense-copy-btn.history-copy-btn:hover,
html[data-theme="dark"] .session-expense-copy-btn.history-copy-btn:focus-visible {
  border: 0;
  background: rgba(148, 163, 184, .10);
  color: #e2e8f0;
}

html[data-theme="dark"] .session-recycle-muted-btn {
  color: #fda4af;
  border-color: rgba(251, 113, 133, .30);
  background: rgba(127, 29, 29, .18);
}

html[data-theme="dark"] .session-expense-delete-btn:hover,
html[data-theme="dark"] .session-expense-delete-btn:focus-visible {
  color: #fecdd3;
  border: 0;
  background: rgba(127, 29, 29, .24);
}

html[data-theme="dark"] .session-recycle-muted-btn:not(.is-disabled):hover,
html[data-theme="dark"] .session-recycle-muted-btn:not(.is-disabled):focus-visible {
  color: #fecdd3;
  border-color: rgba(251, 113, 133, .48);
  background: rgba(127, 29, 29, .30);
}

html[data-theme="dark"] .recycle-swipe-actions {
  background: rgba(127, 29, 29, .34);
}

html[data-theme="dark"] .recycle-permanent-delete-btn {
  color: #fda4af;
}

@media (min-width: 721px) {
  html[data-theme="dark"] .recycle-swipe-actions {
    background: color-mix(in srgb, var(--bg3) 88%, var(--card));
    border-left-color: var(--border);
  }

  html[data-theme="dark"] .recycle-permanent-delete-btn {
    color: var(--muted);
  }

  html[data-theme="dark"] .recycle-permanent-delete-btn:hover,
  html[data-theme="dark"] .recycle-permanent-delete-btn:focus-visible {
    color: #fecdd3;
    background: rgba(127, 29, 29, .30);
  }
}

.deleted-session-history-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deleted-session-history-info strong {
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.deleted-session-history-info span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.deleted-session-restore-btn {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .24);
  background: rgba(17, 184, 154, .06);
  flex: 0 0 auto;
}

.session-detail-empty {
  border: 1px dashed var(--border);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  background: var(--bg3);
}

html[data-theme="dark"] .session-detail-hero {
  background: linear-gradient(135deg, rgba(17, 184, 154, .12), rgba(99, 102, 241, .10));
  border-color: rgba(94, 234, 212, .22);
}

@media(max-width:820px) {
  .session-history-head {
    align-items: stretch !important;
  }

  .session-history-next-chevron {
    display: none !important;
  }

  .session-history-expand-hint .session-hint-arrow {
    transform: rotate(-90deg);
  }

  .session-history-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
}

@media(max-width:680px) {
  .session-history-modal-sheet {
    width: min(94vw, 620px) !important;
  }

  .session-detail-title {
    font-size: 18px;
  }

  .session-detail-hero {
    padding: 14px;
    border-radius: 18px;
  }
}

@media(max-width:520px) {
  .session-detail-hero {
    flex-direction: column;
    gap: 10px;
  }

  .session-detail-hero .session-status-mini {
    margin-left: 0 !important;
  }
}


/* V17.15: Session history slide animation + minimal match expand/collapse */
.session-history-slider {
  transform: translateX(0);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1) !important;
}

.session-history-slider.show-detail {
  transform: translateX(-50%);
}

.session-history-slider.is-animating .session-history-panel {
  transition: opacity .24s ease, transform .34s cubic-bezier(.22, .61, .36, 1);
}

.session-history-slider:not(.show-detail).is-animating .session-history-panel-detail,
.session-history-slider.show-detail.is-animating .session-history-panel-list {
  opacity: .28;
  transform: scale(.985);
}

.session-history-slider.show-detail.is-animating .session-history-panel-detail,
.session-history-slider:not(.show-detail).is-animating .session-history-panel-list {
  opacity: 1;
  transform: scale(1);
}

/* Prevent height of the inactive panel from creating empty scrollable space */
.session-history-slider:not(.show-detail):not(.is-animating) .session-history-panel-detail {
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

.session-history-slider.show-detail:not(.is-animating) .session-history-panel-list {
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

.session-match-main-rows,
.session-match-extra-wrap {
  display: flex;
  flex-direction: column;
}

.session-match-extra-wrap {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease;
}

.session-match-list.is-expanded .session-match-extra-wrap {
  max-height: 2400px;
  opacity: 1;
}

.session-match-list.is-collapsed .session-match-main-rows .session-match-row:last-child {
  border-bottom: 0;
}

.session-match-list.is-expanded .session-match-extra-wrap .session-match-row:last-child {
  border-bottom: 0;
}

.session-match-toggle-link {
  margin: 8px auto 0;
  padding: 5px 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s ease, opacity .15s ease;
}

.session-match-toggle-link:hover {
  color: var(--accent);
}

.session-match-toggle-link:active {
  opacity: .72;
}

.session-match-toggle-link.open .session-match-toggle-link.open html[data-theme="dark"] .session-match-toggle-link {
  color: rgba(230, 238, 252, .62);
}

html[data-theme="dark"] .session-match-toggle-link:hover {
  color: var(--accent);
}

@media(prefers-reduced-motion:reduce) {
  .session-history-slider,
  .session-history-slider.is-animating .session-history-panel,
  .session-match-extra-wrap,
}


/* V17.18: text-only match history expand/collapse */
.session-match-toggle-link {
  gap: 0 !important;
  display: inline-flex !important;
  width: auto !important;
}

.session-match-toggle-link .session-match-toggle-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.session-match-toggle-link .session-match-chevron,
.session-match-toggle-link .collapse-chevron {
  display: none !important;
}

/* =========================================================
   Check-in fairness update v18.3
   - ปุ่มเดียวสำหรับเริ่มรอบและอัปเดตผู้เข้าร่วมภายหลัง
   - ล็อกผู้เล่นที่เริ่มเล่น / อยู่ในคิว เพื่อป้องกันสถิติเพี้ยน
   ========================================================= */
.queue-generate-btn {
  white-space: nowrap;
}

.checkin-mode-note {
  border: 1px solid rgba(245, 158, 11, .24);
  background: rgba(245, 158, 11, .09);
  color: #92400e;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  margin-bottom: 12px;
}

.checkin-mode-note strong,
.checkin-mode-note b {
  font-weight: 900;
}

.late-checkin-badge,
.checkin-lock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 5px;
  font-size: 10.5px;
  font-weight: 900;
  vertical-align: middle;
  white-space: nowrap;
}

.late-checkin-badge {
  background: rgba(245, 158, 11, .12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, .22);
}

.checkin-lock-badge {
  background: rgba(125, 132, 145, .10);
  color: var(--muted);
  border: 1px solid rgba(125, 132, 145, .20);
}

.ready-player-chip.is-late-player {
  background: rgba(245, 158, 11, .045);
  border-radius: 12px;
  padding-left: 7px !important;
  padding-right: 7px !important;
}

#checkin-modal.checkin-update-mode .checkin-player-row.will-join-later.selected {
  border-color: rgba(245, 158, 11, .38) !important;
  background: rgba(245, 158, 11, .10) !important;
}

#checkin-modal.checkin-update-mode .checkin-player-row.will-join-later input:checked+.checkin-box {
  border-color: #f59e0b !important;
  background: #f59e0b !important;
}

.checkin-player-row.is-locked {
  cursor: not-allowed;
  opacity: .78;
}

.checkin-player-row.is-locked .checkin-box {
  border-color: rgba(125, 132, 145, .32) !important;
  background: rgba(125, 132, 145, .22) !important;
}

.checkin-player-row.is-locked input:checked+.checkin-box::after {
  border-color: var(--muted) !important;
}

html[data-theme="dark"] .checkin-mode-note {
  color: #f6c177;
  border-color: rgba(246, 179, 95, .25);
  background: rgba(246, 179, 95, .11);
}

html[data-theme="dark"] .late-checkin-badge {
  color: #f6c177;
  border-color: rgba(246, 179, 95, .26);
  background: rgba(246, 179, 95, .13);
}

html[data-theme="dark"] .checkin-lock-badge {
  background: rgba(148, 163, 184, .10);
  border-color: rgba(148, 163, 184, .22);
  color: #aab7ca;
}

html[data-theme="dark"] .ready-player-chip.is-late-player {
  background: rgba(246, 179, 95, .065);
}

@media(max-width:520px) {
  .checkin-player-name {
    white-space: normal !important;
    line-height: 1.35;
  }

  .checkin-player-meta {
    line-height: 1.45;
  }
}

/* V18.1: reuse previous session players for new Check-in */
.session-player-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.session-player-section-head .expense-detail-title {
  margin-bottom: 2px !important;
}

.session-reuse-hint {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
}

.session-reuse-checkin-btn {
  border: 1px solid rgba(17, 184, 154, .24);
  background: rgba(17, 184, 154, .08);
  color: var(--accent);
  border-radius: 999px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}

.session-reuse-checkin-btn:hover:not(:disabled) {
  background: rgba(17, 184, 154, .14);
  border-color: rgba(17, 184, 154, .36);
  transform: translateY(-1px);
}

.session-reuse-checkin-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: saturate(.5);
}

html[data-theme="dark"] .session-reuse-checkin-btn {
  background: rgba(45, 212, 191, .10);
  border-color: rgba(45, 212, 191, .25);
  color: #5eead4;
}

html[data-theme="dark"] .session-reuse-checkin-btn:hover:not(:disabled) {
  background: rgba(45, 212, 191, .16);
  border-color: rgba(45, 212, 191, .38);
}

@media(max-width:560px) {
  .session-player-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .session-reuse-checkin-btn {
    width: 100%;
    justify-content: center;
  }
}

/* v19 Auth Gate + Room Context */
body.auth-checking,
body.auth-required,
body.auth-no-access {
  min-height: 100vh;
  overflow: hidden;
}

body.auth-checking .topbar,
body.auth-checking .page,
body.auth-checking .bottom-nav,
body.auth-required .topbar,
body.auth-required .page,
body.auth-required .bottom-nav,
body.auth-no-access .topbar,
body.auth-no-access .page,
body.auth-no-access .bottom-nav {
  display: none !important;
}

.auth-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 450;
  padding: 22px;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  background: radial-gradient(circle at 15% 15%, rgba(17, 184, 154, .18), transparent 34%), radial-gradient(circle at 88% 8%, rgba(139, 124, 246, .18), transparent 32%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

body.auth-checking .auth-screen,
body.auth-required .auth-screen,
body.auth-no-access .auth-screen {
  display: flex !important;
}

body.auth-ready .auth-screen {
  display: none !important;
}

/* Boot host mirrors #viewer-no-session-modal so mobile/desktop stay on the same axis. */
.auth-boot-host {
  display: none;
  width: min(100%, 420px);
  margin: auto;
}

.auth-boot-panel {
  display: none;
  gap: 0;
  text-align: center;
  justify-items: center;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.auth-boot-spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto;
  border-radius: 999px;
  border: 3px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-top-color: var(--accent);
  animation: auth-boot-spin .8s linear infinite;
}

.auth-boot-copy {
  display: grid;
  gap: 0;
  width: 100%;
  justify-items: center;
  text-align: center;
}

.auth-boot-copy .auth-panel-title {
  margin: 0;
  text-align: center;
}

.auth-boot-copy .auth-panel-desc {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

@keyframes auth-boot-spin {
  to { transform: rotate(360deg); }
}

body.auth-checking .auth-card,
body.auth-checking .auth-bg-orb {
  display: none !important;
}

body.auth-checking .auth-screen {
  z-index: 1500 !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba(8, 11, 20, .42) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body.auth-checking .auth-boot-host {
  display: block !important;
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(calc(100% - 24px), 420px) !important;
  margin: 0 !important;
  z-index: 1501 !important;
}

body.auth-checking #auth-boot-panel {
  display: grid !important;
  width: 100% !important;
  padding: 30px 24px 24px !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  background: var(--card) !important;
  box-shadow: 0 24px 70px rgba(31, 41, 55, .18) !important;
  justify-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

body.auth-checking #auth-boot-panel .auth-boot-spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto 16px;
}

body.auth-checking #auth-boot-panel .auth-panel-title {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -.25px;
}

body.auth-checking #auth-boot-panel .auth-panel-desc {
  max-width: 310px;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.55;
}

/* Keep the no-session sheet pinned to the same viewport center as the boot card. */
#viewer-no-session-modal.modal-backdrop:not(.hidden) {
  display: block !important;
  padding: 0 !important;
  background: rgba(8, 11, 20, .42) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#viewer-no-session-modal .viewer-no-session-sheet {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(calc(100% - 24px), 420px) !important;
  max-width: min(calc(100% - 24px), 420px) !important;
  margin: 0 !important;
  animation: none !important;
}

body.auth-required .auth-boot-host,
body.auth-no-access .auth-boot-host,
body.auth-ready .auth-boot-host,
body.auth-required #auth-boot-panel,
body.auth-no-access #auth-boot-panel,
body.auth-ready #auth-boot-panel {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .auth-boot-spinner {
    animation: none;
  }
}

@media (max-width: 480px) {
  body.auth-checking .auth-boot-host {
    width: min(calc(100% - 24px), 420px) !important;
  }

  body.auth-checking #auth-boot-panel {
    padding: 26px 18px 18px !important;
  }
}

.auth-bg-orb {
  position: fixed;
  border-radius: 999px;
  filter: blur(2px);
  pointer-events: none;
  opacity: .55;
}

.auth-orb-a {
  width: 220px;
  height: 220px;
  left: -70px;
  top: 10%;
  background: rgba(17, 184, 154, .18);
}

.auth-orb-b {
  width: 260px;
  height: 260px;
  right: -90px;
  bottom: 8%;
  background: rgba(139, 124, 246, .14);
}

.auth-card {
  position: relative;
  width: min(100%, 440px);
  border: 1px solid rgba(125, 132, 145, .18);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(31, 41, 55, .14);
  padding: 22px;
}

.auth-theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(125, 132, 145, .18);
  background: rgba(255, 255, 255, .58);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 10px 24px rgba(31, 41, 55, .08);
}

.auth-theme-toggle svg {
  width: 17px;
  height: 17px;
}

.auth-theme-toggle:hover {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .32);
  background: rgba(17, 184, 154, .08);
}

.auth-theme-toggle:active {
  transform: scale(.96);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
  padding-right: 48px;
}

.auth-logo-mark {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(17, 184, 154, .16), rgba(139, 124, 246, .12));
  border: 1px solid rgba(17, 184, 154, .18);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.25px;
  color: var(--accent);
}

.auth-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.45px;
  color: var(--text);
  line-height: 1.2;
}

.auth-subtitle {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.45;
}

.auth-panel {
  border: 1px solid rgba(125, 132, 145, .14);
  background: rgba(255, 255, 255, .62);
  border-radius: 22px;
  padding: 16px;
}

.auth-panel-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.25px;
}

.auth-panel-desc {
  font-size: 12.5px;
  color: var(--muted);
  margin: 3px 0 14px;
  line-height: 1.45;
}

.auth-field {
  margin-bottom: 12px;
}

.auth-field label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 6px;
}

.auth-field input {
  width: 100%;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-family: inherit;
  font-size: 15px;
}

.auth-field-help {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.auth-error {
  margin: 8px 0 12px;
  border: 1px solid rgba(220, 38, 38, .18);
  background: rgba(220, 38, 38, .07);
  color: var(--out);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  white-space: pre-line;
}

.auth-submit-btn,
.auth-secondary-btn {
  width: 100%;
  border: 0;
  border-radius: 15px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

.auth-submit-btn {
  background: linear-gradient(135deg, #18c5a8, #0ea889);
  color: #fff;
  box-shadow: 0 14px 28px rgba(17, 184, 154, .18);
}

.auth-secondary-btn {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  margin-top: 12px;
}

.auth-submit-btn:active,
.auth-secondary-btn:active {
  transform: scale(.98);
}

.auth-submit-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.auth-footnote {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 12px;
  text-align: center;
}

.auth-room-list {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.auth-room-card {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  border-radius: 16px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.auth-room-icon {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 184, 154, .10);
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.2px;
  border: 1px solid rgba(17, 184, 154, .14);
}

.auth-room-main {
  min-width: 0;
}

.auth-room-main strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-room-main em {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 1px;
}

.auth-room-arrow {
  color: var(--accent);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.room-user-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  max-width: 190px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 5px 11px;
  line-height: 1.1;
}

.room-user-chip span,
.room-user-chip small {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-user-chip span {
  font-size: 11.5px;
  font-weight: 900;
  color: var(--text);
}

.room-user-chip small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.header-logout-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}

.header-logout-btn svg {
  width: 17px;
  height: 17px;
}

.header-logout-btn:hover {
  color: var(--out);
  border-color: rgba(220, 38, 38, .24);
  background: rgba(220, 38, 38, .07);
}

html[data-theme="dark"] .auth-screen {
  background: radial-gradient(circle at 15% 15%, rgba(45, 212, 191, .16), transparent 34%), radial-gradient(circle at 88% 8%, rgba(139, 92, 246, .18), transparent 32%), linear-gradient(180deg, #080b14 0%, #0b1020 100%) !important;
}

html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-panel {
  background: rgba(18, 26, 43, .86);
  border-color: rgba(148, 163, 184, .16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .auth-theme-toggle {
  background: rgba(17, 26, 46, .78);
  border-color: rgba(148, 163, 184, .16);
  color: #aab7ca;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .auth-theme-toggle:hover {
  color: var(--accent);
  border-color: rgba(45, 212, 191, .34);
  background: rgba(45, 212, 191, .10);
}

html[data-theme="dark"] .auth-logo-mark,
html[data-theme="dark"] .auth-room-icon {
  background: rgba(45, 212, 191, .10);
  border-color: rgba(45, 212, 191, .18);
  color: #5eead4;
}

html[data-theme="dark"] .auth-submit-btn {
  color: #06110f;
  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
}

html[data-theme="dark"] .auth-room-card,
html[data-theme="dark"] .auth-secondary-btn,
html[data-theme="dark"] .room-user-chip,
html[data-theme="dark"] .header-logout-btn {
  background: rgba(17, 26, 46, .78);
  border-color: rgba(148, 163, 184, .16);
}

@media(max-width:720px) {
  .room-user-chip {
    display: none !important;
  }
}

@media(max-width:520px) {
  .auth-screen {
    padding: 14px;
    align-items: flex-start;
  }

  .auth-card {
    margin-top: 18px;
    border-radius: 24px;
    padding: 18px;
  }

  .auth-theme-toggle {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
  }

  .auth-brand {
    padding-right: 44px;
  }

  .auth-title {
    font-size: 18px;
  }

  .auth-panel {
    border-radius: 20px;
    padding: 14px;
  }

  .auth-footnote {
    text-align: left;
  }

  .topbar-actions {
    gap: 7px !important;
  }

  .header-logout-btn,
  .header-settings-btn {
    width: 34px !important;
    height: 34px !important;
  }
}

.topbar-actions {
  width: auto !important;
  height: auto !important;
  right: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

@media(max-width:520px) {
  .topbar-actions {
    width: auto !important;
    height: auto !important;
    right: 10px !important;
    gap: 7px !important;
  }

  .topbar-logo {
    padding: 0 8px !important;
  }
}

/* v20 Access management + Guest view */
.auth-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px
}

.auth-register-btn {
  border-color: rgba(99, 102, 241, .24) !important;
  color: var(--rest) !important;
  background: rgba(99, 102, 241, .08) !important
}

.auth-success-note {
  font-size: 12px;
  color: var(--ready);
  font-weight: 800;
  text-align: center;
  margin-top: 8px
}

.guest-mode .header-settings-btn,
.guest-mode #nav-expense,
.guest-mode .queue-main-actions,
.guest-mode .ready-players-card .collapse-toggle[onclick*="toggleReadyPlayers"]+.collapse-content .ready-player-chip button,
.guest-mode .court-selector,
.guest-mode .player-actions,
.guest-mode .title-actions,
.guest-mode .settings-tabs,
.guest-mode .expense-actions,
.guest-mode .match-delete-btn,
.guest-mode .court-header-actions button,
.guest-mode .winner-pick-panel,
.guest-mode .custom-court-hint,
.guest-mode .btn-start-game,
.guest-mode .btn-save-result,
.guest-mode .checkin-mini-btn {
  display: none !important
}

body.read-only-mode .header-settings-btn,
body.read-only-mode [data-nav-target^="settings-"],
body.read-only-mode #nav-expense,
body.read-only-mode [data-nav-target="expense"],
body.read-only-mode .queue-main-actions,
body.read-only-mode .court-selector,
body.read-only-mode .player-actions,
body.read-only-mode .title-actions,
body.read-only-mode .settings-tabs,
body.read-only-mode .expense-actions,
body.read-only-mode .match-delete-btn,
body.read-only-mode .winner-pick-panel,
body.read-only-mode .custom-court-hint,
body.read-only-mode .btn-start-game,
body.read-only-mode .btn-save-result,
body.read-only-mode .checkin-mini-btn,
body.read-only-mode .court-icon-btn,
body.read-only-mode .empty-action-btn,
body.read-only-mode .edit-player-actions,
body.read-only-mode .edit-player-delete-link,
body.read-only-mode .add-player-card,
body.read-only-mode .deleted-open-btn,
body.read-only-mode .bulk-action-bar {
  display: none !important
}

body.read-only-mode .bottom-nav {
  grid-template-columns: repeat(2, 1fr) !important
}

body.read-only-mode #nav-queue,
body.read-only-mode #nav-stats {
  display: flex !important
}

.guest-mode .bottom-nav {
  grid-template-columns: repeat(2, 1fr) !important
}

.guest-mode #nav-queue,
.guest-mode #nav-stats {
  display: flex !important
}

.guest-mode .topbar-logo::after {
  content: none;
  display: none
}

.access-management-panel .settings-panel-head {
  align-items: center
}

.access-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px
}

.access-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px
}

.generated-password-card {
  margin-top: 12px;
  border: 1px solid rgba(17, 184, 154, .22);
  background: rgba(17, 184, 154, .08);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.generated-password-card span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .45px
}

.generated-password-card strong {
  font-size: 16px;
  color: var(--text);
  word-break: break-all
}

.generated-password-card button,
.access-approve-btn,
.access-reject-btn,
.access-remove-btn {
  border-radius: 999px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap
}

.generated-password-card button,
.access-approve-btn {
  background: rgba(17, 184, 154, .10);
  border-color: rgba(17, 184, 154, .24);
  color: var(--ready)
}

.access-reject-btn,
.access-remove-btn {
  background: rgba(220, 38, 38, .07);
  border-color: rgba(220, 38, 38, .18);
  color: var(--out)
}

.access-list {
  display: grid;
  gap: 8px
}

.access-row {
  border: 1px solid rgba(125, 132, 145, .14);
  background: rgba(125, 132, 145, .045);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between
}

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

.access-name {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
}

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

.access-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.access-date {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px
}

.access-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.access-role-select {
  min-width: 112px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  border-radius: 999px !important
}

.access-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: 900;
  flex-shrink: 0;
  overflow: hidden;
}

.access-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.access-avatar.has-image {
  background: rgba(125, 132, 145, .10);
  color: transparent !important;
  border-color: rgba(125, 132, 145, .18);
}

.access-member-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.access-role-pill,
.access-self-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--muted)
}

.access-self-badge {
  margin-left: 6px;
  color: var(--accent);
  background: rgba(17, 184, 154, .09);
  border-color: rgba(17, 184, 154, .20)
}

.access-role-pill.role-owner {
  color: #b45309;
  background: rgba(245, 158, 11, .11);
  border-color: rgba(245, 158, 11, .20)
}

.access-role-pill.role-super_admin {
  color: #7c3aed;
  background: rgba(124, 58, 237, .10);
  border-color: rgba(124, 58, 237, .20)
}

.access-role-pill.role-admin {
  color: var(--rest);
  background: rgba(99, 102, 241, .10);
  border-color: rgba(99, 102, 241, .20)
}

.access-role-pill.role-member {
  color: var(--ready);
  background: rgba(17, 184, 154, .09);
  border-color: rgba(17, 184, 154, .20)
}

.access-role-pill.role-viewer {
  color: var(--muted)
}

html[data-theme="dark"] .access-row {
  background: rgba(17, 26, 46, .48);
  border-color: rgba(148, 163, 184, .14)
}

html[data-theme="dark"] .generated-password-card {
  background: rgba(45, 212, 191, .10);
  border-color: rgba(45, 212, 191, .22)
}

@media(min-width:720px) {
  .access-grid {
    grid-template-columns: .9fr 1.1fr
  }

  .access-form-grid {
    grid-template-columns: 1fr 1fr
  }

  .access-form-grid .form-group:last-child {
    grid-column: 1 / -1
  }

  .access-management-panel {
    max-width: 860px;
    margin: 0 auto
  }
}

@media(max-width:520px) {
  .auth-action-grid {
    grid-template-columns: 1fr
  }

  .access-row {
    align-items: flex-start;
    flex-direction: column
  }

  .access-actions,
  .access-member-side {
    width: 100%;
    justify-content: flex-start
  }

  .access-role-select {
    width: 100% !important
  }

  .access-approve-btn,
  .access-reject-btn,
  .access-remove-btn {
    flex: 1
  }

  .generated-password-card {
    align-items: flex-start;
    flex-direction: column
  }

  .generated-password-card button {
    width: 100%
  }
}

/* v20.5 Access Management polish + edit user modal */
input[type=email] {
  width: 100%;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  color: var(--text) !important;
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input[type=email]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .10) !important;
}

html[data-theme="light"] input[type=email] {
  background: #f7f8fb !important;
  border-color: #e2e8f0 !important;
  color: var(--text) !important;
}

html[data-theme="dark"] input[type=email] {
  background: rgba(17, 26, 46, .78) !important;
  border-color: rgba(148, 163, 184, .16) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] input[type=email]:focus {
  border-color: rgba(45, 212, 191, .62) !important;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, .11) !important;
}

.settings-tab.access-tab-btn {
  position: relative;
}

.settings-tab.access-tab-btn.has-pending::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-block;
  margin-right: 7px;
  box-shadow: 0 0 0 5px rgba(45, 212, 191, .10);
  vertical-align: middle;
}

.settings-tab.access-tab-btn.active {
  color: #06110f !important;
  background: linear-gradient(135deg, #5eead4, #2dd4bf) !important;
  box-shadow: 0 12px 26px rgba(45, 212, 191, .18) !important;
}

.settings-tab.access-tab-btn.has-pending.active::before {
  background: #06110f;
  box-shadow: none;
}

html[data-theme="light"] .settings-tab.access-tab-btn.active {
  color: #064e45 !important;
  background: linear-gradient(135deg, #d9fff7, #9ff5e7) !important;
  border: 1px solid rgba(17, 184, 154, .22);
}

.access-management-panel .settings-panel-head {
  border: 1px solid rgba(148, 163, 184, .12);
  background: linear-gradient(135deg, rgba(45, 212, 191, .10), rgba(139, 92, 246, .07));
  border-radius: 22px;
  padding: 16px;
}

.access-management-panel .settings-panel-title {
  font-size: 18px;
  letter-spacing: -.25px;
}

.access-management-panel .btn-sm {
  border-radius: 999px;
}

.access-grid {
  gap: 14px !important;
}

.access-subtabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 1px 3px;
  scrollbar-width: none;
}

.access-subtabs::-webkit-scrollbar {
  display: none;
}

.access-subtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid rgba(125, 132, 145, .16);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--muted);
  background: var(--card, #fff);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(70, 76, 90, .05);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.access-subtab:hover {
  color: var(--text);
  border-color: rgba(20, 184, 166, .24);
}

.access-subtab.active {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(20, 184, 166, .18);
}

.access-subtab:focus-visible {
  outline: 3px solid rgba(20, 184, 166, .20);
  outline-offset: 2px;
}

.access-subtab .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 18px;
}

.access-subtab-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 5px;
  color: #fff;
  background: var(--danger, #ef4444);
  font-size: 10px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.access-section {
  display: none;
}

.access-section.active {
  display: grid;
  gap: 14px;
}

.access-card {
  border-radius: 22px !important;
}

.add-player-card.permission-disabled {
  opacity: .72;
}

.add-player-card.permission-disabled .collapse-toggle::after {
  content: 'Admin ยังไม่ได้เปิดสิทธิ์เพิ่มผู้เล่น';
  display: block;
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.member-permissions-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(20, 184, 166, .18);
  background: linear-gradient(135deg, rgba(20, 184, 166, .055), rgba(255, 255, 255, .82));
  border-radius: 22px !important;
  padding: 18px !important;
}

.permission-role-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2, rgba(148, 163, 184, .08));
}

.permission-role-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.permission-role-tab.active {
  color: var(--accent);
  border-color: rgba(20, 184, 166, .20);
  background: var(--card, #fff);
}

.permission-role-tab:focus-visible {
  outline: 3px solid rgba(20, 184, 166, .20);
  outline-offset: 2px;
}

.permission-role-tab .material-symbols-outlined {
  font-size: 18px;
}

.permission-role-panel {
  display: none;
  gap: 16px;
}

.permission-role-panel.active {
  display: grid;
}

.member-permissions-head,
.member-permissions-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.permission-role-panel > .member-permissions-head {
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.member-permissions-card .card-title {
  color: var(--text);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.3;
}

.member-permissions-intro {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.member-permissions-badge {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  background: var(--surface-2, rgba(148, 163, 184, .08));
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.member-permissions-grid {
  display: grid;
  gap: 10px;
}

.viewer-guest-permissions-list {
  display: grid;
  gap: 14px;
}

.permission-section {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card, #fff);
  transition: border-color .18s ease;
}

.permission-section[open] {
  border-color: rgba(20, 184, 166, .30);
}

.permission-section-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 11px 14px;
  color: var(--text);
  background: var(--surface-2, rgba(148, 163, 184, .06));
  cursor: pointer;
  list-style: none;
  user-select: none;
  touch-action: manipulation;
}

.permission-section[open] > .permission-section-summary {
  background: rgba(20, 184, 166, .055);
}

.permission-section-summary::-webkit-details-marker {
  display: none;
}

.permission-section-summary::after {
  flex: 0 0 auto;
  margin-left: 2px;
  color: var(--muted);
  content: 'expand_more';
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  font-weight: 400;
  transition: transform .18s ease;
}

.permission-section[open] > .permission-section-summary::after {
  transform: rotate(180deg);
}

.permission-section-summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: -3px;
}

.permission-section-heading {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 2px;
}

.permission-section-heading strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-section-heading span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-section-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
}

.permission-section-reset {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: var(--card, #fff);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.permission-section-reset[hidden] {
  display: none;
}

.permission-section-reset:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

.permission-section-reset:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 2px;
}

.permission-section-reset .material-symbols-outlined {
  font-size: 15px;
}

.permission-section-meta {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  background: var(--card, #fff);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.permission-section-meta--all {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
}

.permission-section-meta--partial {
  border-color: color-mix(in srgb, var(--playing, #d97706) 34%, var(--border));
  color: var(--playing, #d97706);
  background: color-mix(in srgb, var(--playing, #d97706) 9%, var(--card));
}

.permission-section-meta--none {
  border-color: var(--border);
  color: var(--muted);
  background: var(--surface-2, rgba(148, 163, 184, .08));
}

.permission-section-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 10px 10px;
}

.permission-section[open] > .permission-section-body {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.viewer-guest-permission-group {
  display: grid;
}

.member-permission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .68);
  transition: border-color .18s ease, background .18s ease;
}

.member-permission-row:hover {
  border-color: rgba(20, 184, 166, .28);
  background: rgba(20, 184, 166, .035);
}

.member-permission-row.is-dependent-disabled {
  opacity: .52;
  background: rgba(148, 163, 184, .08);
}

.member-permission-row.is-wide {
  grid-column: 1 / -1;
}

.member-permission-copy {
  min-width: 0;
}

.member-permission-copy strong,
.member-permission-copy span {
  display: block;
}

.member-permission-copy strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.member-permission-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.qbad-toggle-switch.member-permission-switch {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.qbad-toggle-switch.member-permission-switch .qbad-toggle-slider {
  position: relative;
  inset: auto;
  display: block;
  width: 40px;
  height: 22px;
}

.member-permissions-footer {
  padding-top: 2px;
}

.member-permissions-footer > span {
  color: var(--muted);
  font-size: 11px;
}

.member-permissions-footer > span.is-error {
  color: var(--danger, #dc2626);
  font-weight: 700;
}

.member-permissions-footer .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

html[data-theme="dark"] .member-permissions-card {
  background: linear-gradient(135deg, rgba(20, 184, 166, .09), rgba(15, 23, 42, .46));
}

html[data-theme="dark"] .member-permission-row {
  background: rgba(15, 23, 42, .36);
}

html[data-theme="dark"] .permission-section {
  background: rgba(15, 23, 42, .28);
}

html[data-theme="dark"] .permission-section-summary {
  background: rgba(30, 41, 59, .62);
}

html[data-theme="dark"] .permission-section[open] > .permission-section-summary {
  background: rgba(20, 184, 166, .10);
}

html[data-theme="dark"] .permission-section-meta,
html[data-theme="dark"] .member-permissions-badge {
  background: rgba(30, 41, 59, .75);
}

html[data-theme="dark"] .permission-section-reset {
  background: rgba(15, 23, 42, .68);
}

html[data-theme="dark"] .permission-section-meta--all {
  border-color: rgba(45, 212, 191, .32);
  color: #5eead4;
  background: rgba(20, 184, 166, .13);
}

html[data-theme="dark"] .permission-section-meta--partial {
  border-color: rgba(251, 191, 36, .34);
  color: #fbbf24;
  background: rgba(217, 119, 6, .14);
}

html[data-theme="dark"] .permission-section-meta--none {
  border-color: rgba(148, 163, 184, .24);
  color: #94a3b8;
  background: rgba(30, 41, 59, .75);
}

html[data-theme="dark"] .member-permission-row:hover {
  border-color: rgba(45, 212, 191, .34);
  background: rgba(45, 212, 191, .075);
}

body.viewer-guest-queue-ready-hidden #page-queue .desktop-queue-left,
body.viewer-guest-queue-courts-hidden #page-queue .desktop-queue-right {
  display: none !important;
}

.viewer-permission-hidden {
  display: none !important;
}

@media (min-width: 769px) {
  body.viewer-guest-queue-ready-hidden #page-queue .desktop-queue-layout,
  body.viewer-guest-queue-courts-hidden #page-queue .desktop-queue-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.access-card .card-title {
  color: var(--text);
  font-size: 12px;
  letter-spacing: .7px;
}

.access-form-grid {
  gap: 12px !important;
}

.access-form-grid .form-group {
  margin-bottom: 0;
}

.access-card .btn-primary[onclick="createAccessUser()"] {
  min-height: 48px;
  border-radius: 14px !important;
  margin-top: 14px;
  box-shadow: 0 14px 28px rgba(20, 184, 166, .16) !important;
}

.generated-password-card {
  border-radius: 18px !important;
}

.access-list {
  gap: 10px !important;
}

.access-row {
  border-radius: 18px !important;
  padding: 14px !important;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.access-row:hover {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, .28) !important;
  background: rgba(45, 212, 191, .055) !important;
}

.access-avatar {
  width: 42px !important;
  height: 42px !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .15), rgba(139, 92, 246, .12)) !important;
}

.access-member-side {
  gap: 7px !important;
}

.access-edit-btn {
  border-radius: 999px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid rgba(99, 102, 241, .22);
  background: rgba(99, 102, 241, .08);
  color: var(--rest);
  white-space: nowrap;
}

.access-edit-btn:hover {
  background: rgba(99, 102, 241, .14);
  border-color: rgba(99, 102, 241, .35);
}

.access-remove-btn {
  padding-left: 11px !important;
  padding-right: 11px !important;
}

.access-block-btn,
.access-edit-block-btn {
  border: 1px solid rgba(220, 38, 38, .18);
  border-radius: 999px;
  background: rgba(220, 38, 38, .055);
  color: var(--out, #dc2626);
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.access-block-btn {
  min-height: 32px;
  padding: 5px 10px;
}

.access-block-btn:hover,
.access-block-btn:focus-visible,
.access-edit-block-btn:hover,
.access-edit-block-btn:focus-visible {
  background: rgba(220, 38, 38, .10);
  border-color: rgba(220, 38, 38, .32);
}

.access-member-block-btn {
  padding-left: 9px;
  padding-right: 9px;
}

.access-edit-block-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
}

.access-edit-sheet {
  max-width: 480px;
}

.access-edit-form {
  display: grid;
  gap: 12px;
}

.access-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

#access-edit-role:disabled {
  opacity: .72;
  cursor: not-allowed;
}

html[data-theme="dark"] .access-management-panel .settings-panel-head {
  border-color: rgba(148, 163, 184, .14);
  background: linear-gradient(135deg, rgba(45, 212, 191, .10), rgba(139, 92, 246, .09));
}

html[data-theme="dark"] .access-row:hover {
  background: rgba(45, 212, 191, .075) !important;
}

html[data-theme="dark"] .access-edit-btn {
  background: rgba(139, 140, 255, .12);
  border-color: rgba(139, 140, 255, .26);
  color: #b8b9ff;
}

@media(min-width:720px) {
  .access-form-grid {
    grid-template-columns: 1fr 1.15fr !important;
    align-items: end;
  }

  .access-form-grid .form-group:last-child {
    grid-column: 1 / -1;
  }
}

@media(max-width:520px) {
  .access-management-panel .settings-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .access-card .btn-primary[onclick="createAccessUser()"] {
    width: 100%;
  }

  .access-edit-actions {
    grid-template-columns: 1fr;
  }

  .access-edit-btn,
  .access-remove-btn {
    flex: 1;
    text-align: center;
  }

  .member-permissions-card {
    padding: 14px !important;
    gap: 12px;
  }

  .member-permissions-head,
  .member-permissions-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .member-permissions-badge {
    align-self: flex-start;
  }

  .member-permissions-grid,
  .permission-section-body {
    grid-template-columns: 1fr;
  }

  .permission-section-summary {
    min-height: 60px;
    padding: 10px 12px;
  }

  .permission-section-actions {
    gap: 4px;
  }

  .permission-section-reset {
    min-height: 26px;
    padding-inline: 6px;
  }

  .permission-section-reset > span:last-child {
    display: none;
  }

  .member-permissions-card .card-title {
    font-size: 15px;
  }

  .permission-section-heading span {
    white-space: normal;
  }

  .permission-section-body {
    padding-inline: 8px;
  }

  .member-permissions-footer .btn {
    width: 100%;
  }

  .access-subtabs {
    margin-bottom: 8px;
  }

  .access-subtab {
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .permission-section-summary::after,
  .member-permission-row {
    transition: none;
  }
}


/* v20.6 Room picker role display fix */
.auth-room-card {
  grid-template-columns: 36px minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
}

.auth-room-main em {
  color: var(--muted) !important;
  font-size: 11.5px !important;
}

.auth-room-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1px;
  border: 1px solid rgba(125, 132, 145, .14);
  background: rgba(125, 132, 145, .08);
  color: var(--muted);
  white-space: nowrap;
}

.auth-room-role.role-owner {
  color: #b45309;
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .24);
}

.auth-room-role.role-super_admin {
  color: #7c3aed;
  background: rgba(124, 58, 237, .10);
  border-color: rgba(124, 58, 237, .20);
}

.auth-room-role.role-admin {
  color: #2563eb;
  background: rgba(59, 130, 246, .10);
  border-color: rgba(59, 130, 246, .20);
}

.auth-room-role.role-member {
  color: var(--accent);
  background: rgba(17, 184, 154, .10);
  border-color: rgba(17, 184, 154, .20);
}

.auth-room-role.role-viewer {
  color: var(--rest);
  background: rgba(99, 102, 241, .10);
  border-color: rgba(99, 102, 241, .20);
}

html[data-theme="dark"] .auth-room-role.role-owner {
  color: #fbbf24;
  background: rgba(245, 158, 11, .14);
  border-color: rgba(245, 158, 11, .26)
}

html[data-theme="dark"] .auth-room-role.role-super_admin {
  color: #c4b5fd;
  background: rgba(124, 58, 237, .16);
  border-color: rgba(167, 139, 250, .28)
}

html[data-theme="dark"] .auth-room-role.role-admin {
  color: #93c5fd;
  background: rgba(59, 130, 246, .14);
  border-color: rgba(59, 130, 246, .28)
}

html[data-theme="dark"] .auth-room-role.role-member {
  color: #5eead4;
  background: rgba(45, 212, 191, .12);
  border-color: rgba(45, 212, 191, .26)
}

@media(max-width:420px) {
  .auth-room-card {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
  }

  .auth-room-role {
    grid-column: 2 / 3;
    justify-self: start;
    margin-top: 2px;
    height: 24px;
    min-width: 56px;
    font-size: 10.5px;
  }

  .auth-room-arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* v20.7 System password management + collapsible danger action */
.system-collapse-card {
  padding: 0 !important;
  overflow: hidden;
}

.system-collapse-toggle,
.system-collapse-static-head {
  padding: 15px 16px !important;
  align-items: center !important;
}

.system-collapse-static-head {
  display: flex;
  justify-content: space-between;
}

.system-collapse-toggle>span:first-child,
.system-collapse-static-head>span:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-width: 0;
}

.system-collapse-toggle strong,
.system-collapse-static-head strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.25;
}

.system-collapse-toggle small,
.system-collapse-static-head small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.system-collapse-content.open {
  padding: 0 16px 16px !important;
}

.system-notification-expand {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.system-notification-expand-copy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
  min-width: 0;
}

.system-notification-expand-hint {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--out);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
}

.system-notification-expand-hint::before {
  content: "|";
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  margin-right: 1px;
}

.system-notification-expand-hint .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;
}

.system-notification-expand-hint.is-complete {
  color: var(--ready);
}

.system-notification-expand .collapse-chevron {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Keep the notification expander's Chevron in sync with its open state.
   This button uses the same collapse helper as the reset-session card but
   intentionally keeps its own compact layout class. */
.system-notification-expand.open .collapse-chevron::before {
  transform: rotate(-40deg);
}

.system-notification-expand.open .collapse-chevron::after {
  transform: rotate(40deg);
}

.personal-queue-details.system-collapse-content.open {
  padding: 12px 0 0 !important;
}

.system-collapse-toggle:focus-visible,
.system-notification-expand:focus-visible,
.qbad-toggle-switch input:focus-visible + .qbad-toggle-slider {
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 3px;
}

.password-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Player identity onboarding */
.player-identity-onboarding-backdrop {
  z-index: 1500 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.player-identity-onboarding-sheet {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
}

.pending-player-mapping-backdrop {
  z-index: 1550 !important;
  padding: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.pending-player-mapping-sheet {
  width: min(100%, 500px) !important;
  max-width: 500px !important;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.pending-player-mapping-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 12px;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.pending-player-mapping-body > .pending-player-mapping-target,
.pending-player-mapping-body > .pending-player-mapping-tabs,
.pending-player-mapping-body > .auth-error {
  flex: 0 0 auto;
}

#pending-player-mapping-panel-existing {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 8px;
  min-height: 0 !important;
  overflow: hidden !important;
}

#pending-player-mapping-panel-create {
  display: grid;
  gap: 8px;
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#pending-player-mapping-panel-existing.hidden,
#pending-player-mapping-panel-create.hidden {
  display: none !important;
}

#pending-player-mapping-modal .player-identity-options {
  flex: 1 1 auto !important;
  min-height: 160px !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}

.pending-player-mapping-target {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(17, 184, 154, .18);
  border-radius: 13px;
  background: rgba(17, 184, 154, .055);
}

.pending-player-mapping-target > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(17, 184, 154, .12);
  color: var(--accent);
  font-size: 20px;
}

.pending-player-mapping-target div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pending-player-mapping-target strong,
.pending-player-mapping-target small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-player-mapping-target strong {
  color: var(--text);
  font-size: 13px;
}

.pending-player-mapping-target small {
  color: var(--muted);
  font-size: 11.5px;
}

.pending-player-mapping-footer {
  flex: 0 0 auto !important;
  justify-content: flex-end;
}

.approve-all-preview-sheet {
  width: min(640px, calc(100vw - 24px));
  max-height: min(86dvh, 760px);
}

.approve-all-preview-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.approve-all-preview-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(217, 119, 6, .26);
  border-radius: 12px;
  background: rgba(245, 158, 11, .09);
  color: #9a5b05;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.approve-all-preview-warning .material-symbols-outlined {
  flex: 0 0 auto;
  color: #d97706;
  font-size: 19px;
}

.approve-all-preview-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding: 1px 2px 2px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.approve-all-preview-row {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 13px;
  background: var(--card);
  transition: border-color .16s ease, opacity .16s ease, background-color .16s ease;
}

.approve-all-preview-row.is-mapped {
  border-color: color-mix(in srgb, var(--ready) 28%, var(--border));
  background: color-mix(in srgb, var(--card) 96%, var(--ready));
}

.approve-all-preview-row.is-unmapped {
  border-color: color-mix(in srgb, #f59e0b 32%, var(--border));
  background: color-mix(in srgb, var(--card) 97%, #f59e0b);
}

.approve-all-preview-row.is-excluded {
  opacity: .58;
  background: color-mix(in srgb, var(--card) 94%, var(--muted));
}

.approve-all-preview-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.approve-all-preview-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.approve-all-preview-identity > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.approve-all-preview-identity strong,
.approve-all-preview-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approve-all-preview-identity strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.approve-all-preview-identity small {
  color: var(--muted);
  font-size: 11px;
}

.approve-all-preview-status {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: rgba(245, 158, 11, .12);
  color: #d97706;
  font-size: 18px;
}

.approve-all-preview-row.is-mapped .approve-all-preview-status {
  background: rgba(16, 185, 129, .12);
  color: var(--ready);
}

.approve-all-preview-row.is-excluded .approve-all-preview-status {
  background: rgba(100, 116, 139, .12);
  color: var(--muted);
}

.approve-all-preview-exclude {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, #ef4444 24%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--card) 94%, #ef4444);
  color: #b91c1c;
  font: inherit;
  font-size: 19px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.approve-all-preview-exclude:hover,
.approve-all-preview-exclude:focus-visible {
  border-color: #ef4444;
  background: rgba(239, 68, 68, .12);
}

.approve-all-preview-row.is-excluded .approve-all-preview-exclude {
  min-width: auto;
  color: var(--ready);
  border-color: color-mix(in srgb, var(--ready) 30%, var(--border));
  background: color-mix(in srgb, var(--card) 94%, var(--ready));
  font-size: 11px;
}

.approve-all-preview-controls {
  display: grid;
  grid-template-columns: minmax(110px, .55fr) minmax(0, 1fr);
  gap: 8px;
}

.approve-all-preview-controls label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
}

.approve-all-preview-controls select {
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--input-bg, var(--card));
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
}

.approve-all-preview-mapping-disabled,
.approve-all-preview-mapping-saving {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.approve-all-preview-mapping-saving {
  color: var(--accent);
}

.approve-all-preview-state {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.approve-all-preview-state.is-mapped {
  color: var(--primary-dark, #0f7d55);
}

.approve-all-preview-state.is-unmapped {
  color: #9a5b05;
}

.approve-all-preview-state strong {
  font-weight: 850;
}

.approve-all-preview-footer {
  justify-content: flex-end;
  gap: 8px;
}

.approve-all-preview-footer #approve-all-preview-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.approve-all-preview-footer #approve-all-preview-confirm .material-symbols-outlined {
  font-size: 18px;
}

@media (max-width: 520px) {
  .approve-all-preview-sheet {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .approve-all-preview-controls {
    grid-template-columns: 1fr;
  }
}

@supports not (height: 100dvh) {
  .pending-player-mapping-sheet {
    max-height: calc(100vh - 24px) !important;
  }

  .approve-all-preview-sheet {
    max-height: calc(100vh - 16px);
  }
}

.player-identity-onboarding-body {
  display: grid;
  gap: 14px;
  padding-top: 16px;
}

.player-identity-onboarding-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid rgba(17, 184, 154, .18);
  border-radius: 13px;
  background: rgba(17, 184, 154, .055);
}

.player-identity-onboarding-note > .material-symbols-outlined {
  color: var(--accent);
  font-size: 22px;
}

.player-identity-onboarding-note p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.player-identity-onboarding-note strong {
  color: var(--text);
}

.player-identity-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 4px;
  border: 1px solid rgba(125, 132, 145, .14);
  border-radius: 12px;
  background: rgba(125, 132, 145, .045);
}

.player-identity-tab {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.player-identity-tab.active {
  border-color: rgba(17, 184, 154, .24);
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}

.player-identity-onboarding-body > section {
  display: grid;
  gap: 8px;
}

.player-identity-search,
.player-identity-new-name,
.player-identity-new-skill {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.player-identity-search {
  appearance: none;
  background: var(--bg) !important;
  box-shadow: none;
}

.player-identity-search:-webkit-autofill,
.player-identity-new-name:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  -webkit-text-fill-color: var(--text);
}

.player-identity-options {
  display: grid;
  gap: 8px;
  max-height: 38vh;
  overflow: auto;
  padding: 2px;
}

.player-identity-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg2);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.player-identity-option:hover:not(:disabled) {
  border-color: rgba(17, 184, 154, .34);
  transform: translateY(-1px);
}

.player-identity-option.selected {
  border-color: rgba(17, 184, 154, .52);
  background: rgba(17, 184, 154, .07);
}

.player-identity-option:disabled {
  cursor: not-allowed;
  opacity: .56;
}

.player-identity-option.used {
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
}

.player-identity-avatar {
  width: 34px;
  height: 34px;
  border-width: 1px;
  font-size: 13px;
}

.player-identity-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.player-identity-option-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.player-identity-option-copy small,
.player-identity-empty {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.player-identity-option-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.player-identity-used-tag {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 2px 7px;
  border: 1px solid rgba(125, 132, 145, .22);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.player-identity-option-icon {
  color: var(--muted);
  font-size: 19px;
}

.player-identity-option.selected .player-identity-option-icon {
  color: var(--accent);
}

.player-identity-empty {
  padding: 16px 8px;
  text-align: center;
}

.player-identity-onboarding-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 18px;
  border-top: 1px solid rgba(125, 132, 145, .12);
}

.player-identity-onboarding-footer > .btn {
  width: auto;
  min-width: 160px;
}

.my-player-mapping-lock-note {
  display: block;
  min-height: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.my-player-mapping-lock-note:not(:empty) {
  color: var(--warning, #a16207);
}

/* Scheduled sessions + self check-in */
.scheduled-sessions-card {
  margin-bottom: 0;
}

.scheduled-sessions-card .system-collapse-static-head .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.scheduled-sessions-content.open {
  padding-top: 14px !important;
}

.scheduled-sessions-toolbar,
.scheduled-session-player-toolbar,
.scheduled-session-wizard-footer,
.scheduled-session-link-row,
.checkin-gate-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scheduled-sessions-toolbar {
  justify-content: space-between;
  padding: 2px 0 12px;
  border-bottom: 1px solid rgba(125, 132, 145, .12);
}

.scheduled-sessions-toolbar > div:first-child,
.scheduled-session-player-toolbar > div:first-child {
  min-width: 0;
}

.scheduled-sessions-toolbar .help,
.scheduled-session-player-toolbar small {
  display: block;
  margin-top: 3px;
  line-height: 1.4;
}

.scheduled-sessions-live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.scheduled-sessions-live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--muted);
}

.scheduled-sessions-live-status.is-live {
  color: var(--ready);
}

.scheduled-sessions-live-status.is-live .scheduled-sessions-live-dot {
  background: var(--ready);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ready) 14%, transparent);
}

.scheduled-sessions-live-status.is-syncing {
  color: var(--playing);
}

.scheduled-sessions-live-status.is-syncing .scheduled-sessions-live-dot {
  background: var(--playing);
}

.scheduled-sessions-live-status.is-error {
  color: var(--warning, #a16207);
}

.scheduled-sessions-live-status.is-error .scheduled-sessions-live-dot {
  background: var(--warning, #a16207);
}

.scheduled-sessions-toolbar .btn {
  flex-shrink: 0;
}

.scheduled-sessions-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.scheduled-session-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.scheduled-session-card.is-focus-target {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 12px 28px rgba(0, 168, 132, .12);
}

.scheduled-session-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.scheduled-session-card-head > div {
  min-width: 0;
}

.scheduled-session-card-head strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled-session-card-date,
.scheduled-session-card-meta span,
.scheduled-session-card-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.scheduled-session-card-date {
  margin-top: 3px;
}

.scheduled-session-card-date .material-symbols-outlined,
.scheduled-session-card-meta .material-symbols-outlined,
.scheduled-session-card-mode .material-symbols-outlined {
  font-size: 15px;
}

.scheduled-session-card-edit,
.scheduled-session-card-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.scheduled-session-card-edit:hover,
.scheduled-session-card-edit:focus-visible {
  background: var(--bg);
  color: var(--text);
}

.scheduled-session-card-edit:focus-visible,
.scheduled-session-card-delete:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.scheduled-session-card-edit .material-symbols-outlined,
.scheduled-session-card-delete .material-symbols-outlined {
  font-size: 17px;
}

.scheduled-session-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
}

.scheduled-session-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.scheduled-session-card-mode {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--bg);
  font-weight: 800;
}

.scheduled-session-card-mode.is-invite {
  color: var(--accent);
  border: 1px solid rgba(17, 184, 154, .22);
  background: rgba(17, 184, 154, .07);
}

.scheduled-session-card-mode.is-admin {
  color: #4f5ed7;
  border: 1px solid rgba(79, 94, 215, .22);
  background: rgba(79, 94, 215, .08);
}

html[data-theme="dark"] .scheduled-session-card-mode.is-admin {
  color: #98a4ff;
  border-color: rgba(152, 164, 255, .26);
  background: rgba(152, 164, 255, .12);
}

.scheduled-session-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 8%, var(--card));
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.scheduled-session-card-status .material-symbols-outlined {
  font-size: 15px;
}

.scheduled-session-card-status.is-open {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--ready);
}

.scheduled-session-card-status.is-upcoming {
  background: color-mix(in srgb, var(--playing) 10%, var(--card));
  color: var(--playing);
}

.scheduled-session-card-status.is-closed {
  background: color-mix(in srgb, var(--muted) 9%, var(--card));
  color: var(--muted);
}

.scheduled-session-card-status.is-overdue {
  background: color-mix(in srgb, #f59e0b 13%, var(--card));
  color: #b45309;
}

html[data-theme="dark"] .scheduled-session-card-status.is-overdue {
  color: #fbbf24;
}

.scheduled-session-card-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 2px 0;
}

.scheduled-session-card-stats > span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 5px;
}

.scheduled-session-card-stats strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.scheduled-session-card-stats small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.scheduled-session-card-stats .is-checked-in strong {
  color: var(--ready);
}

.scheduled-session-card-links {
  display: grid;
  gap: 7px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.scheduled-session-card-section-label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.scheduled-session-card-links > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.scheduled-session-card-links .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 10px;
  font-size: 11.5px;
}

.scheduled-session-card-links .material-symbols-outlined {
  color: var(--accent);
  font-size: 17px;
}

.scheduled-session-start-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.scheduled-session-start-btn .material-symbols-outlined {
  font-size: 20px;
}

.scheduled-session-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.scheduled-session-limit-card {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.scheduled-session-limit-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 40px;
}

.scheduled-session-limit-head > .material-symbols-outlined {
  color: var(--accent);
  font-size: 20px;
}

.scheduled-session-limit-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.scheduled-session-limit-copy strong {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
}

.scheduled-session-limit-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.scheduled-session-limit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.scheduled-session-limit-card #sched-rsvp-limit-field {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.scheduled-session-limit-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scheduled-session-limit-field-label {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.scheduled-session-limit-stepper {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}

.scheduled-session-limit-stepper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.scheduled-session-limit-stepper button:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
}

.scheduled-session-limit-stepper button .material-symbols-outlined {
  font-size: 18px;
}

.scheduled-session-limit-stepper input {
  width: 56px;
  height: 36px;
  padding: 0 4px;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.scheduled-session-limit-stepper input::-webkit-outer-spin-button,
.scheduled-session-limit-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.scheduled-session-limit-stepper input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.scheduled-session-limit-unit {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.scheduled-session-card-checkin-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.scheduled-session-card-checkin-toggle > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled-session-card-delete {
  flex-shrink: 0;
  color: var(--muted);
  background: transparent;
  transition: color .15s ease, background-color .15s ease;
}

.scheduled-session-card-delete:hover,
.scheduled-session-card-delete:focus-visible {
  color: var(--danger, #dc2626);
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
}

.scheduled-session-card-delete:hover .material-symbols-outlined,
.scheduled-session-card-delete:focus-visible .material-symbols-outlined,
.scheduled-session-card-delete:hover > span,
.scheduled-session-card-delete:focus-visible > span {
  color: inherit;
}

.scheduled-session-roster,
.scheduled-session-roster-empty {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.scheduled-session-roster summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 10px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.scheduled-session-roster summary::-webkit-details-marker {
  display: none;
}

.scheduled-session-roster summary > .material-symbols-outlined:first-child {
  color: var(--accent);
  font-size: 17px;
}

.scheduled-session-roster summary strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.scheduled-session-roster-chevron {
  color: var(--muted);
  font-size: 18px;
  transition: transform 160ms ease-out;
}

.scheduled-session-roster[open] .scheduled-session-roster-chevron {
  transform: rotate(180deg);
}

.scheduled-session-roster-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border);
}

.scheduled-session-roster-player {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 11.5px;
}

.scheduled-session-roster-player > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled-session-roster-player small {
  flex-shrink: 0;
  color: var(--ready);
  font-size: 9.5px;
  font-weight: 700;
}

.scheduled-session-roster-player small.is-prepared {
  color: var(--accent);
}

.scheduled-session-roster-empty {
  padding: 9px 10px;
  color: var(--muted);
  font-size: 11.5px;
}

#sched-start-confirm-modal {
  z-index: 1400 !important;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom)) !important;
}

#sched-early-start-alert-modal {
  z-index: 1450 !important;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom)) !important;
}

#sched-start-confirm-modal .scheduled-session-start-sheet {
  position: relative;
  z-index: 1410;
  display: flex;
  flex-direction: column;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

.scheduled-session-start-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 12px;
  overflow: hidden;
}

.scheduled-session-conflict-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(245, 158, 11, .32);
  border-radius: 12px;
  background: rgba(245, 158, 11, .10);
  color: var(--text);
}

.scheduled-session-conflict-warning > .material-symbols-outlined {
  margin-top: 1px;
  color: var(--warning, #a16207);
  font-size: 21px;
}

.scheduled-session-conflict-warning strong,
.scheduled-session-conflict-warning small,
.scheduled-session-conflict-warning em {
  display: block;
}

.scheduled-session-conflict-warning strong {
  font-size: 12.5px;
}

.scheduled-session-conflict-warning small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.45;
}

.scheduled-session-conflict-warning em {
  margin-top: 6px;
  color: var(--warning, #a16207);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.scheduled-early-start-alert-sheet {
  width: min(100%, 520px);
  max-width: 520px;
}

.scheduled-early-start-alert-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 20px 18px;
}

.scheduled-early-start-alert-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(245, 158, 11, .26);
  border-radius: 14px;
  background: rgba(245, 158, 11, .12);
  color: #a16207;
}

.scheduled-early-start-alert-icon .material-symbols-outlined {
  font-size: 23px;
}

.scheduled-early-start-alert-copy {
  min-width: 0;
}

.scheduled-early-start-alert-copy strong {
  display: block;
  color: #a16207;
  font-size: 15px;
  line-height: 1.35;
}

.scheduled-early-start-alert-copy p {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.scheduled-early-start-alert-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(245, 158, 11, .18);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.scheduled-early-start-alert-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(125, 132, 145, .12);
}

.scheduled-early-start-alert-footer .btn {
  min-width: 132px;
}

html[data-theme="dark"] .scheduled-early-start-alert-icon {
  border-color: rgba(251, 191, 36, .30);
  background: rgba(245, 158, 11, .14);
  color: #fcd34d;
}

html[data-theme="dark"] .scheduled-early-start-alert-copy strong {
  color: #fcd34d;
}

html[data-theme="dark"] .scheduled-early-start-alert-note {
  border-color: rgba(251, 191, 36, .20);
}

html[data-theme="dark"] .scheduled-early-start-alert-footer {
  border-color: rgba(148, 163, 184, .12);
}

@media (max-width: 420px) {
  .scheduled-early-start-alert-body {
    padding: 18px 16px;
  }

  .scheduled-early-start-alert-footer {
    flex-direction: column-reverse;
  }

  .scheduled-early-start-alert-footer .btn {
    width: 100%;
  }
}

.scheduled-session-start-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 184, 154, .22);
  border-radius: 12px;
  background: rgba(17, 184, 154, .06);
}

.scheduled-session-start-note > .material-symbols-outlined {
  color: var(--accent);
  font-size: 21px;
}

.scheduled-session-start-note strong,
.scheduled-session-start-note small {
  display: block;
}

.scheduled-session-start-note strong {
  color: var(--text);
  font-size: 12.5px;
}

.scheduled-session-start-note small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.scheduled-session-start-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.scheduled-session-start-toolbar > span:last-child {
  display: flex;
  gap: 10px;
}

.scheduled-session-start-toolbar button {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.scheduled-session-start-toolbar button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.scheduled-session-start-list {
  flex: 1 1 auto;
  min-height: 130px;
  max-height: 46vh;
}

.scheduled-session-start-player {
  position: relative;
}

.scheduled-session-start-status {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
}

.scheduled-session-start-status.is-checked {
  background: rgba(17, 184, 154, .10);
  color: var(--ready);
}

.scheduled-session-start-warning {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(245, 158, 11, .10);
  color: var(--warning, #a16207);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.scheduled-session-start-footer {
  flex: 0 0 auto;
  padding: 12px 18px 18px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.scheduled-session-start-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.scheduled-session-start-footer .btn.is-session-conflict {
  background: #d97706;
  color: #fff;
  box-shadow: 0 8px 18px rgba(217, 119, 6, .28);
}

.scheduled-session-start-footer .btn.is-session-conflict:hover {
  background: #c2620a;
}

.scheduled-session-start-footer .btn.is-session-conflict:disabled {
  background: #d97706;
  opacity: .6;
  box-shadow: none;
}

.scheduled-session-start-footer .material-symbols-outlined {
  font-size: 19px;
}

@media (max-width: 520px) {
  .scheduled-session-card-links > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .scheduled-session-card-links .btn {
    width: 100%;
  }

  .scheduled-session-card-footer {
    align-items: flex-start;
  }

  .scheduled-session-start-status {
    display: none;
  }
}

.scheduled-session-wizard-sheet {
  max-width: 600px;
}

#sched-create-wizard-modal,
#sched-qr-modal {
  z-index: 1400 !important;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom)) !important;
}

#sched-create-wizard-modal .scheduled-session-wizard-sheet,
#sched-qr-modal .scheduled-session-qr-sheet {
  position: relative;
  z-index: 1410;
}

#sched-create-wizard-modal .scheduled-session-wizard-sheet {
  display: flex;
  flex-direction: column;
  width: min(100%, 600px) !important;
  max-width: 600px !important;
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

#sched-create-wizard-modal .scheduled-session-wizard-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}

#sched-create-wizard-modal .scheduled-session-wizard-footer {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  background: var(--card);
}

#sched-create-wizard-modal .flatpickr-calendar {
  z-index: 1420 !important;
}

.flatpickr-calendar.scheduled-session-picker-calendar {
  z-index: 1420 !important;
}

#sched-create-wizard-modal.scheduled-picker-open {
  background: rgba(8, 11, 20, .46) !important;
  backdrop-filter: blur(12px) saturate(.78);
}

html[data-theme="dark"] #sched-create-wizard-modal.scheduled-picker-open {
  background: rgba(0, 0, 0, .58) !important;
}

#sched-create-wizard-modal.scheduled-picker-open .scheduled-session-wizard-sheet {
  isolation: isolate;
}

#sched-create-wizard-modal.scheduled-picker-open .scheduled-session-wizard-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: rgba(8, 11, 20, .24);
  pointer-events: none;
}

html[data-theme="dark"] #sched-create-wizard-modal.scheduled-picker-open .scheduled-session-wizard-sheet::after {
  background: rgba(0, 0, 0, .32);
}

#sched-create-wizard-modal.scheduled-picker-open .scheduled-session-wizard-sheet.scheduled-picker-focus-mode > .modal-header,
#sched-create-wizard-modal.scheduled-picker-open .scheduled-session-wizard-sheet.scheduled-picker-focus-mode > .scheduled-session-wizard-footer,
#sched-create-wizard-modal.scheduled-picker-open .scheduled-session-wizard-sheet.scheduled-picker-focus-mode .sched-wizard-panel:not(.hidden) > .form-group,
#sched-create-wizard-modal.scheduled-picker-open .scheduled-session-wizard-sheet.scheduled-picker-focus-mode .sched-wizard-panel:not(.hidden) > .scheduled-session-mode-group,
#sched-create-wizard-modal.scheduled-picker-open .scheduled-session-wizard-sheet.scheduled-picker-focus-mode .scheduled-session-time-section > .scheduled-session-time-section-head,
#sched-create-wizard-modal.scheduled-picker-open .scheduled-session-wizard-sheet.scheduled-picker-focus-mode .scheduled-session-time-section > .form-group,
#sched-create-wizard-modal.scheduled-picker-open .scheduled-session-wizard-sheet.scheduled-picker-focus-mode .scheduled-session-toggle-row,
#sched-create-wizard-modal.scheduled-picker-open .scheduled-session-wizard-sheet.scheduled-picker-focus-mode .scheduled-session-player-toolbar {
  filter: blur(3px);
  opacity: .34;
  pointer-events: none;
  transition: filter .18s ease, opacity .18s ease;
}

#sched-create-wizard-modal.scheduled-picker-open .scheduled-picker-focus-group {
  position: relative;
  z-index: 5;
  margin: -10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: background .18s ease, box-shadow .18s ease;
}

#sched-create-wizard-modal.scheduled-picker-open .scheduled-picker-focus-control {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(17, 184, 154, .15), 0 8px 20px rgba(17, 184, 154, .1) !important;
}

#sched-create-wizard-modal.scheduled-picker-open .scheduled-picker-focus-label {
  color: var(--text) !important;
}

@media(max-width:560px) {
  .flatpickr-calendar.scheduled-session-picker-calendar {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(336px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: var(--scheduled-picker-max-height, calc(100dvh - 24px)) !important;
    margin: 0 !important;
    top: var(--scheduled-picker-top, 50%) !important;
    left: var(--scheduled-picker-left, 50%) !important;
    transform: var(--scheduled-picker-transform, translate(-50%, -50%)) !important;
  }
}

.scheduled-session-wizard-body {
  padding-top: 16px;
}

.scheduled-session-wizard-body .form-group {
  margin-bottom: 0;
}

#sched-create-wizard-modal #sched-wizard-step-3 {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#sched-create-wizard-modal #sched-wizard-step-3 .scheduled-session-player-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.sched-wizard-panel {
  display: grid;
  gap: 14px;
}

.scheduled-session-time-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(125, 132, 145, .16);
  border-radius: 14px;
  background: rgba(125, 132, 145, .035);
}

.scheduled-session-checkin-timing {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.scheduled-session-checkin-open-time {
  transition: opacity .16s ease;
}

.scheduled-session-checkin-open-time.is-disabled {
  opacity: .46;
}

.scheduled-session-checkin-open-time.is-disabled .scheduled-session-picker-control,
.scheduled-session-checkin-open-time.is-disabled .scheduled-session-picker-control > input {
  cursor: not-allowed;
}

.scheduled-session-timing-disabled-note {
  margin: -4px 2px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.scheduled-session-field-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.scheduled-session-time-section-close {
  border-color: rgba(125, 132, 145, .12);
  background: rgba(125, 132, 145, .02);
}

.scheduled-session-time-section-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.scheduled-session-time-section-head > .material-symbols-outlined {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent);
  font-size: 19px;
}

.scheduled-session-time-section-head > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.scheduled-session-time-section-head small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.scheduled-session-picker-control {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg3);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.scheduled-session-picker-control:focus-within {
  border-color: rgba(17, 184, 154, .55);
  box-shadow: 0 0 0 3px rgba(17, 184, 154, .12);
  background: var(--bg2);
}

.scheduled-session-picker-control > .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 19px;
}

.scheduled-session-picker-control > input.flatpickr-input,
.scheduled-session-picker-control > input.scheduled-session-picker-input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.scheduled-session-picker-control > input.flatpickr-input:focus,
.scheduled-session-picker-control > input.scheduled-session-picker-input:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}

.scheduled-session-picker-control > input.flatpickr-input::placeholder,
.scheduled-session-picker-control > input.scheduled-session-picker-input::placeholder {
  color: var(--muted);
}

.flatpickr-calendar {
  overflow: hidden;
  width: min(100%, 336px) !important;
  max-width: calc(100vw - 24px) !important;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card, var(--bg2));
  color: var(--text);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
  font-family: 'Noto Sans Thai', sans-serif;
}

.flatpickr-months {
  padding: 8px 10px 3px;
}

.flatpickr-weekdays {
  padding: 0 8px;
}

.flatpickr-days {
  padding: 0 8px 8px;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none;
}

.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-time {
  background: transparent;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month {
  background: transparent !important;
}

.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer {
  min-width: 0;
  max-width: 100%;
}

.flatpickr-calendar .dayContainer {
  width: 100% !important;
}

.flatpickr-current-month,
.flatpickr-months .flatpickr-month,
.flatpickr-weekday,
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: var(--text);
}

.flatpickr-current-month {
  font-size: 14px;
  font-weight: 850;
}

.flatpickr-weekday {
  font-size: 10.5px;
  font-weight: 850;
}

.flatpickr-current-month .numInputWrapper:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(17, 184, 154, .08);
}

.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month input.cur-year {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
}

.flatpickr-day {
  border-radius: 9px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  border-color: rgba(17, 184, 154, .18);
  background: rgba(17, 184, 154, .10);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.flatpickr-day.today:not(.selected) {
  border-color: rgba(17, 184, 154, .42);
  color: var(--accent);
}

.flatpickr-time {
  border-top-color: var(--border);
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: rgba(17, 184, 154, .08);
}

html[data-theme="dark"] .flatpickr-calendar {
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled {
  color: rgba(230, 237, 247, .34);
}

.scheduled-session-native-time {
  display: none !important;
}

.flatpickr-calendar.scheduled-session-picker-time-step .flatpickr-months,
.flatpickr-calendar.scheduled-session-picker-time-step .flatpickr-innerContainer {
  display: none !important;
}

.scheduled-time-wheel {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  padding: 9px 10px 8px;
  overflow: hidden;
  border-top: 1px solid rgba(17, 184, 154, .18);
  background: rgba(17, 184, 154, .035);
}

.scheduled-time-wheel[hidden] {
  display: none !important;
}

.scheduled-time-single-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 11px;
  border: 1px solid rgba(17, 184, 154, .22);
  border-radius: 12px;
  background: rgba(17, 184, 154, .07);
}

.scheduled-time-single-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.scheduled-time-single-summary strong {
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.scheduled-time-wheel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 1px;
}

.scheduled-time-wheel-hint {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.scheduled-time-wheel-confirm {
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.scheduled-time-wheel-confirm:hover,
.scheduled-time-wheel-confirm:focus-visible {
  filter: brightness(.96);
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 184, 154, .16);
}

.scheduled-time-wheel-confirm:disabled {
  border-color: rgba(125, 132, 145, .18);
  background: rgba(125, 132, 145, .14);
  color: var(--muted);
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}

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

.scheduled-time-wheel-title {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.scheduled-time-wheel-head strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.scheduled-time-wheel-title small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
}

.scheduled-time-wheel-back {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(125, 132, 145, .18);
  border-radius: 10px;
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

.scheduled-time-wheel-back:hover,
.scheduled-time-wheel-back:focus-visible {
  border-color: rgba(17, 184, 154, .30);
  color: var(--accent);
  outline: none;
}

.scheduled-time-wheel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: start;
  width: 100%;
  min-width: 0;
  gap: 8px;
}

.scheduled-time-wheel-column {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.scheduled-time-wheel-label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
}

.scheduled-time-hour-column .scheduled-time-wheel-label {
  color: var(--accent);
}

.scheduled-time-minute-column .scheduled-time-wheel-label {
  color: var(--accent2);
}

.scheduled-time-hour-carousel {
  display: flex;
  scrollbar-width: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.scheduled-time-hour-carousel::-webkit-scrollbar {
  display: none;
}

.scheduled-time-hour-carousel {
  gap: 4px;
  overflow-x: auto;
  padding: 3px calc((100% - 44px) / 2);
  border: 1px solid rgba(17, 184, 154, .16);
  border-radius: 12px;
  background: rgba(17, 184, 154, .055);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100% - 44px) / 2);
  touch-action: pan-x;
  cursor: grab;
}

.scheduled-time-hour-carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.scheduled-time-minute-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 3px;
  border: 1px solid rgba(109, 93, 252, .18);
  border-radius: 12px;
  background: rgba(109, 93, 252, .055);
}

.scheduled-time-wheel-option {
  flex: 0 0 44px;
  width: 44px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: color-mix(in srgb, var(--text) 56%, var(--muted));
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 34px;
  text-align: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.scheduled-time-minute-options .scheduled-time-wheel-option {
  min-width: 0;
  width: 100%;
  height: 36px;
  line-height: 36px;
}

.scheduled-time-wheel-option:hover,
.scheduled-time-wheel-option:focus-visible {
  border-color: rgba(17, 184, 154, .28);
  color: var(--text);
  outline: none;
}

.scheduled-time-wheel-option.is-selected {
  border-color: #1f2937;
  background: #1f2937;
  color: #fff;
  box-shadow: 0 7px 15px rgba(15, 23, 42, .16);
  transform: scale(1.02);
}

.scheduled-time-hour-column .scheduled-time-wheel-option.is-selected {
  border-color: #147f70;
  background: #147f70;
}

.scheduled-time-minute-column .scheduled-time-wheel-option.is-selected {
  border-color: #6557d9;
  background: #6557d9;
}

html[data-theme="dark"] .scheduled-time-wheel {
  border-top-color: rgba(45, 212, 191, .20);
  background: rgba(45, 212, 191, .055);
}

html[data-theme="dark"] .scheduled-time-wheel-confirm:disabled {
  background: rgba(148, 163, 184, .16);
}

html[data-theme="dark"] .scheduled-time-wheel-option {
  color: rgba(230, 237, 247, .58);
}

html[data-theme="dark"] .scheduled-time-wheel-option:hover,
html[data-theme="dark"] .scheduled-time-wheel-option:focus-visible {
  border-color: rgba(45, 212, 191, .32);
  color: var(--text);
}

html[data-theme="dark"] .scheduled-time-wheel-option.is-selected {
  border-color: #080b14;
  background: #080b14;
  color: #e6edf7;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .scheduled-time-hour-carousel {
  border-color: rgba(45, 212, 191, .24);
  background: rgba(45, 212, 191, .08);
}

html[data-theme="dark"] .scheduled-time-minute-options {
  border-color: rgba(139, 124, 246, .26);
  background: rgba(139, 124, 246, .10);
}

html[data-theme="dark"] .scheduled-time-hour-column .scheduled-time-wheel-option.is-selected {
  border-color: #159f8c;
  background: #159f8c;
  color: #061512;
}

html[data-theme="dark"] .scheduled-time-minute-column .scheduled-time-wheel-option.is-selected {
  border-color: #8176f4;
  background: #8176f4;
  color: #0d1020;
}

@media(max-width:520px) {
  .flatpickr-calendar {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .scheduled-time-wheel-back {
    min-height: 34px;
  }
}

@media(max-width:420px) {
  .scheduled-time-wheel {
    padding-right: 9px;
    padding-left: 9px;
  }

  .scheduled-time-wheel-grid {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 6px;
  }

  .scheduled-time-single-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .scheduled-time-single-summary strong {
    text-align: left;
  }

  .scheduled-time-wheel-actions {
    align-items: stretch;
  }

  .scheduled-time-wheel-hint {
    line-height: 1.35;
  }

  .scheduled-time-wheel-option {
    flex-basis: 40px;
    width: 40px;
    height: 32px;
    line-height: 32px;
  }

  .scheduled-time-minute-options .scheduled-time-wheel-option {
    flex-basis: auto;
    width: 100%;
  }
}

.scheduled-session-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(125, 132, 145, .16);
  border-radius: 14px;
  background: rgba(125, 132, 145, .045);
  cursor: pointer;
}

.scheduled-session-toggle-row > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.scheduled-session-mode-group {
  display: grid;
  gap: 8px;
}

.scheduled-session-mode-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(125, 132, 145, .16);
  border-radius: 12px;
  background: rgba(125, 132, 145, .045);
  cursor: pointer;
}

.scheduled-session-mode-option:hover {
  border-color: rgba(125, 132, 145, .28);
}

.scheduled-session-mode-option:has(input:checked) {
  border-color: rgba(17, 184, 154, .45);
  background: rgba(17, 184, 154, .045);
}

.scheduled-session-mode-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.scheduled-session-mode-option::before {
  content: '';
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-top: 0;
  box-sizing: border-box;
  border: 1.5px solid rgba(125, 132, 145, .48);
  border-radius: 50%;
  background: var(--card-bg);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.scheduled-session-mode-option:has(input:checked)::before {
  border: 5px solid var(--accent);
  background: var(--card-bg);
}

.scheduled-session-mode-option:focus-within::before {
  box-shadow: 0 0 0 3px rgba(17, 184, 154, .14);
}

.scheduled-session-mode-option > .scheduled-session-mode-icon {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 0;
  border-radius: 10px;
  background: rgba(17, 184, 154, .10);
  color: var(--accent);
  font-size: 19px;
}

.scheduled-session-mode-option:has(input:checked) > .scheduled-session-mode-icon {
  background: rgba(17, 184, 154, .16);
}

.scheduled-session-mode-option span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.scheduled-session-mode-option > .scheduled-session-mode-copy {
  flex: 1;
  min-width: 0;
}

.scheduled-session-mode-option small,
.scheduled-session-url-preview p {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.scheduled-session-url-preview {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(17, 184, 154, .24);
  border-radius: 14px;
  background: rgba(17, 184, 154, .07);
  color: var(--text);
}

.scheduled-session-url-preview .material-symbols-outlined {
  color: var(--accent);
  font-size: 28px;
}

.scheduled-session-url-preview p {
  margin: 0;
}

.scheduled-session-toggle-row small,
.scheduled-session-player-toolbar small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.scheduled-session-player-toolbar {
  align-items: flex-start;
  justify-content: space-between;
}

.scheduled-session-player-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.scheduled-session-player-search {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

#sched-admin-player-selection {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.scheduled-session-player-list {
  display: grid;
  gap: 10px;
  max-height: 38vh;
  overflow: auto;
  padding: 2px 6px 2px 2px;
}

.scheduled-session-player-list .checkin-player-row {
  padding: 11px 12px;
}

.scheduled-session-wizard-footer {
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 12px 18px 18px;
  border-top: 1px solid rgba(125, 132, 145, .12);
}

.scheduled-session-wizard-status {
  flex: 0 0 100%;
  width: 100%;
  margin: -2px 0 2px;
  padding: 10px 12px;
  border: 1px solid rgba(220, 38, 38, .28);
  border-radius: 12px;
  background: rgba(220, 38, 38, .08);
  color: #b91c1c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.scheduled-session-wizard-status.is-success {
  border-color: rgba(0, 168, 132, .28);
  background: rgba(0, 168, 132, .08);
  color: #047857;
}

.scheduled-session-wizard-footer .btn.is-loading {
  cursor: wait;
  opacity: .78;
}

html[data-theme="dark"] .scheduled-session-wizard-status {
  border-color: rgba(248, 113, 113, .32);
  background: rgba(248, 113, 113, .10);
  color: #fca5a5;
}

html[data-theme="dark"] .scheduled-session-wizard-status.is-success {
  border-color: rgba(94, 234, 212, .28);
  background: rgba(20, 184, 166, .10);
  color: #5eead4;
}

.scheduled-session-wizard-spacer {
  flex: 1;
}

.scheduled-session-qr-sheet {
  max-width: 440px;
}

.scheduled-session-qr-body {
  gap: 14px;
  padding-top: 2px;
}

.scheduled-session-qr-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 184, 154, .22);
  border-radius: 12px;
  background: rgba(17, 184, 154, .06);
}

.scheduled-session-qr-context > .material-symbols-outlined {
  color: var(--accent);
  font-size: 20px;
}

.scheduled-session-qr-context strong,
.scheduled-session-qr-context small {
  display: block;
}

.scheduled-session-qr-context strong {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
}

.scheduled-session-qr-context small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.scheduled-session-qr-container {
  width: 216px;
  height: 216px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: #fff;
}

.scheduled-session-qr-container canvas,
.scheduled-session-qr-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

.scheduled-session-link-row {
  align-items: stretch;
}

.scheduled-session-link-row input {
  min-width: 0;
  flex: 1;
}

.checkin-gate-overlay {
  z-index: 700;
  align-items: center;
}

.checkin-gate-sheet {
  max-width: 480px;
}

.checkin-gate-body {
  padding-top: 20px;
}

.checkin-gate-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.checkin-gate-back-btn .material-symbols-outlined {
  font-size: 16px;
}

.checkin-gate-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.checkin-gate-state p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.checkin-gate-state-icon {
  color: var(--accent);
  font-size: 42px;
  line-height: 1;
}

.checkin-gate-state-icon.is-success {
  color: var(--ready);
}

.checkin-gate-state-icon.is-error {
  color: var(--out);
}

.scheduled-checkin-success-card {
  width: min(100%, 360px);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  text-align: left;
}

.scheduled-checkin-success-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg2));
  color: var(--accent);
  font-size: 17px;
}

.scheduled-checkin-success-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.scheduled-checkin-success-copy strong,
.scheduled-checkin-success-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled-checkin-success-copy strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.scheduled-checkin-success-copy small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.scheduled-checkin-success-status {
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ready) 12%, var(--card));
  color: var(--ready);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

@media(max-width:420px) {
  .scheduled-checkin-success-card {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .scheduled-checkin-success-status {
    grid-column: 2;
    justify-self: start;
  }
}

.checkin-gate-player-card {
  width: min(100%, 320px);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 8px;
  padding: 12px;
  border: 1px solid rgba(17, 184, 154, .20);
  border-radius: 14px;
  background: rgba(17, 184, 154, .07);
  text-align: left;
}

.checkin-gate-avatar .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.checkin-gate-player-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.checkin-gate-player-card strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkin-gate-player-card .player-skill-pill {
  width: fit-content;
}

.checkin-gate-actions {
  justify-content: center;
  flex-wrap: wrap;
}

#checkin-modal .checkin-gate-actions .btn {
  flex: 1 1 150px;
  min-width: 0;
  white-space: nowrap;
  padding-inline: 12px;
}

@media (max-width: 420px) {
  #checkin-modal .checkin-gate-actions {
    flex-direction: column;
    gap: 8px;
    width: min(100%, 340px);
  }

  #checkin-modal .checkin-gate-actions .btn {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* =========================================================
   Court scoreboard modal — touch-first tablet layout
========================================================= */

html.court-scoreboard-open,
html.court-scoreboard-open body {
  width: 100%;
  height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none;
}

#court-scoreboard-modal.court-scoreboard-backdrop {
  z-index: 10000 !important;
  width: 100%;
  height: 100dvh;
  max-width: 100%;
  max-height: 100dvh;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  contain: layout paint;
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] #court-scoreboard-modal.court-scoreboard-backdrop {
  background:
    radial-gradient(circle at top left, rgba(209, 241, 235, .95) 0, rgba(209, 241, 235, 0) 36%),
    linear-gradient(180deg, #f7f9fc 0%, #f8fbff 48%, #ffffff 100%) !important;
}

html[data-theme="dark"] #court-scoreboard-modal.court-scoreboard-backdrop {
  background:
    radial-gradient(circle at 16% -10%, rgba(45, 212, 191, .18) 0, rgba(45, 212, 191, 0) 32%),
    radial-gradient(circle at 92% 8%, rgba(139, 92, 246, .16) 0, rgba(139, 92, 246, 0) 34%),
    linear-gradient(180deg, #080b14 0%, #0b1020 48%, #080b14 100%) !important;
}

#court-scoreboard-modal .court-scoreboard-sheet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: clamp(20px, 2.4vw, 28px) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  box-shadow: 0 24px 64px rgba(34, 48, 72, .14) !important;
}

#court-scoreboard-modal .court-scoreboard-body::before {
  content: attr(data-court-watermark);
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  opacity: .04;
  box-sizing: border-box;
  overflow: hidden;
  padding-inline: var(--court-scoreboard-watermark-padding, 0);
  font-size: var(--court-scoreboard-watermark-size, clamp(240px, 72vmin, 760px));
  font-weight: 950;
  line-height: var(--court-scoreboard-watermark-line-height, .72);
  letter-spacing: var(--court-scoreboard-watermark-letter-spacing, -.07em);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  user-select: none;
}

#court-scoreboard-modal .court-scoreboard-topbar,
#court-scoreboard-modal .court-scoreboard-body,
#court-scoreboard-modal .court-scoreboard-footer {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] #court-scoreboard-modal .court-scoreboard-sheet {
  border-color: color-mix(in srgb, var(--border) 92%, transparent) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .36) !important;
}

html[data-theme="dark"] #court-scoreboard-modal .court-scoreboard-body::before {
  opacity: .045;
}

#court-scoreboard-modal .court-scoreboard-topbar {
  min-height: calc(76px + env(safe-area-inset-top));
  padding: calc(12px + env(safe-area-inset-top)) max(76px, calc(24px + env(safe-area-inset-right))) 12px max(76px, calc(24px + env(safe-area-inset-left)));
  border-bottom-color: color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--card) 96%, var(--bg3));
}

#court-scoreboard-modal .court-scoreboard-close-btn {
  top: calc(14px + env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  left: auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
}

#court-scoreboard-modal .court-scoreboard-topbar-heading {
  display: grid;
  justify-items: center;
  gap: 2px;
}

#court-scoreboard-modal .court-scoreboard-topbar-heading > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

#court-scoreboard-modal .court-scoreboard-close-btn:hover,
#court-scoreboard-modal .court-scoreboard-close-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg3));
  color: var(--accent);
}

#court-scoreboard-modal .court-scoreboard-topbar-title {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 900;
}

#court-scoreboard-modal .court-scoreboard-body {
  --court-scoreboard-watermark-size: clamp(240px, 72vmin, 760px);
  --court-scoreboard-watermark-line-height: .72;
  --court-scoreboard-watermark-letter-spacing: -.07em;
  --court-scoreboard-watermark-padding: 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  gap: clamp(14px, 2.2vh, 24px);
  justify-content: center;
  padding: clamp(18px, 3vh, 36px) max(clamp(20px, 4vw, 64px), env(safe-area-inset-right)) clamp(18px, 3vh, 32px) max(clamp(20px, 4vw, 64px), env(safe-area-inset-left));
  overflow: hidden !important;
  overflow: clip !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

#court-scoreboard-modal .court-scoreboard-body[data-court-watermark-size="short"] {
  --court-scoreboard-watermark-size: clamp(104px, 34vmin, 360px);
  --court-scoreboard-watermark-line-height: .84;
  --court-scoreboard-watermark-letter-spacing: -.045em;
  --court-scoreboard-watermark-padding: clamp(20px, 5vw, 84px);
}

#court-scoreboard-modal .court-scoreboard-body[data-court-watermark-size="medium"] {
  --court-scoreboard-watermark-size: clamp(64px, 18vmin, 220px);
  --court-scoreboard-watermark-line-height: .88;
  --court-scoreboard-watermark-letter-spacing: -.035em;
  --court-scoreboard-watermark-padding: clamp(24px, 6vw, 96px);
}

#court-scoreboard-modal .court-scoreboard-body[data-court-watermark-size="long"] {
  --court-scoreboard-watermark-size: clamp(38px, 10vmin, 128px);
  --court-scoreboard-watermark-line-height: .92;
  --court-scoreboard-watermark-letter-spacing: -.025em;
  --court-scoreboard-watermark-padding: clamp(28px, 7vw, 112px);
}

#court-scoreboard-modal .court-scoreboard-body > :not(.court-scoreboard-court-reveal) {
  position: relative;
  z-index: 1;
}

#court-scoreboard-modal .court-scoreboard-court-reveal {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: color-mix(in srgb, var(--text) 88%, var(--accent));
  opacity: 0;
  transform: scale(.92);
  box-sizing: border-box;
  padding-inline: var(--court-scoreboard-watermark-padding, 0);
  font-size: var(--court-scoreboard-watermark-size, clamp(240px, 72vmin, 760px));
  font-weight: 950;
  line-height: var(--court-scoreboard-watermark-line-height, .72);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--court-scoreboard-watermark-letter-spacing, -.07em);
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
}

#court-scoreboard-modal .court-scoreboard-body.is-court-transitioning {
  will-change: transform, opacity;
}

#court-scoreboard-modal .court-scoreboard-sheet {
  transform-origin: 50% 46%;
}

#court-scoreboard-modal .court-scoreboard-score-value {
  transform-origin: center;
}

#court-scoreboard-modal .court-scoreboard-meta {
  min-height: 32px;
}

#court-scoreboard-modal .court-scoreboard-scoreboard {
  width: min(100%, 1180px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: stretch;
}

#court-scoreboard-modal .court-scoreboard-score-control {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(54px, auto) auto auto;
  gap: clamp(14px, 2vh, 22px);
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg3) 58%, transparent);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

#court-scoreboard-modal .court-scoreboard-score-control.team-a {
  --scoreboard-team-color: var(--teamA);
  border-color: color-mix(in srgb, var(--teamA) 42%, var(--border));
  background: color-mix(in srgb, var(--teamA) 8%, var(--card));
}

#court-scoreboard-modal .court-scoreboard-score-control.team-b {
  --scoreboard-team-color: var(--teamB);
  border-color: color-mix(in srgb, var(--teamB) 42%, var(--border));
  background: color-mix(in srgb, var(--teamB) 8%, var(--card));
}

#court-scoreboard-modal .court-scoreboard-score-control.is-winner {
  border-color: color-mix(in srgb, var(--scoreboard-team-color) 68%, var(--border));
  background: color-mix(in srgb, var(--scoreboard-team-color) 8%, var(--card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--scoreboard-team-color) 18%, transparent);
}

#court-scoreboard-modal .court-scoreboard-team-heading {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: color-mix(in srgb, var(--scoreboard-team-color) 84%, var(--text));
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .03em;
}

#court-scoreboard-modal .court-scoreboard-selected-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--scoreboard-team-color) 14%, transparent);
  color: var(--scoreboard-team-color);
  font-size: 12px;
  letter-spacing: 0;
}

#court-scoreboard-modal .court-scoreboard-selected-badge .material-symbols-outlined {
  font-size: 17px;
}

#court-scoreboard-modal .court-scoreboard-team-players {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  color: color-mix(in srgb, var(--scoreboard-team-color) 76%, var(--text));
  font-size: clamp(17px, 2.3vw, 22px);
  font-weight: 800;
  line-height: 1.3;
}

#court-scoreboard-modal .court-scoreboard-player-line {
  min-width: 0;
  width: min(100%, 340px);
  min-height: 52px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--scoreboard-team-color) 30%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--scoreboard-team-color) 10%, var(--card));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--scoreboard-team-color) 8%, transparent);
}

#court-scoreboard-modal .court-scoreboard-player-line > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

#court-scoreboard-modal .court-scoreboard-player-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-color: color-mix(in srgb, var(--scoreboard-team-color) 28%, var(--border));
  background: color-mix(in srgb, var(--scoreboard-team-color) 12%, var(--card));
  color: color-mix(in srgb, var(--scoreboard-team-color) 84%, var(--text));
  font-size: 13px;
  font-weight: 800;
}

#court-scoreboard-modal .court-scoreboard-stepper {
  display: grid;
  grid-template-columns: 64px 112px 64px;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

#court-scoreboard-modal .court-scoreboard-stepper button {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  color: var(--scoreboard-team-color);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

#court-scoreboard-modal .court-scoreboard-stepper button .material-symbols-outlined {
  font-size: 30px;
  font-weight: 500;
}

#court-scoreboard-modal .court-scoreboard-stepper button:hover,
#court-scoreboard-modal .court-scoreboard-stepper button:focus-visible {
  border-color: var(--scoreboard-team-color);
  background: color-mix(in srgb, var(--scoreboard-team-color) 10%, var(--card));
}

#court-scoreboard-modal .court-scoreboard-stepper button:active {
  transform: scale(.96);
}

#court-scoreboard-modal .court-scoreboard-stepper button:disabled {
  border-color: var(--border);
  color: var(--muted);
  cursor: not-allowed;
  opacity: .42;
}

#court-scoreboard-modal .court-scoreboard-stepper .court-scoreboard-score-value {
  width: 112px;
  height: auto;
  min-width: 0;
  min-height: 76px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--scoreboard-team-color);
  font-size: clamp(64px, 8vw, 96px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-indent: 0;
  cursor: pointer;
  touch-action: manipulation;
}

#court-scoreboard-modal .court-scoreboard-stepper .court-scoreboard-score-value:hover,
#court-scoreboard-modal .court-scoreboard-stepper .court-scoreboard-score-value:focus-visible {
  background: color-mix(in srgb, var(--scoreboard-team-color) 7%, transparent);
  color: var(--scoreboard-team-color);
  outline: 2px solid color-mix(in srgb, var(--scoreboard-team-color) 42%, transparent);
  outline-offset: 2px;
}

#court-scoreboard-modal .court-scoreboard-stepper .court-scoreboard-score-value:disabled {
  background: transparent;
  color: var(--scoreboard-team-color);
  opacity: 1;
}

#court-scoreboard-modal .court-scoreboard-winner-btn {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--scoreboard-team-color) 42%, var(--border));
  border-radius: 14px;
  background: transparent;
  color: var(--scoreboard-team-color);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

#court-scoreboard-modal .court-scoreboard-winner-btn[aria-pressed="true"] {
  border-color: var(--scoreboard-team-color);
  background: var(--scoreboard-team-color);
  color: #fff;
}

#court-scoreboard-modal .court-scoreboard-winner-btn:disabled {
  cursor: not-allowed;
  opacity: .42;
}

#court-scoreboard-modal .court-scoreboard-vs {
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg3);
  color: var(--muted);
  font-size: 12px;
}

#court-scoreboard-modal .court-scoreboard-help {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

#court-scoreboard-modal .court-scoreboard-queue-card {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg3) 52%, var(--card));
  box-shadow: none;
}

#court-scoreboard-modal .court-scoreboard-queue-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
}

#court-scoreboard-modal .court-scoreboard-queue-teams .team-col {
  display: grid;
  gap: 12px;
}

#court-scoreboard-modal .court-scoreboard-queue-teams .team-a {
  --scoreboard-team-color: var(--teamA);
}

#court-scoreboard-modal .court-scoreboard-queue-teams .team-b {
  --scoreboard-team-color: var(--teamB);
}

#court-scoreboard-modal .court-scoreboard-queue-teams .court-scoreboard-team-heading {
  min-height: 0;
}

#court-scoreboard-modal .court-scoreboard-queue-teams .court-scoreboard-team-heading > span {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--scoreboard-team-color) 34%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--scoreboard-team-color) 11%, var(--card));
  color: var(--scoreboard-team-color);
  font-size: 12px;
  line-height: 1;
}

#court-scoreboard-modal .court-scoreboard-queue-teams .team-a {
  grid-column: 1;
}

#court-scoreboard-modal .court-scoreboard-queue-teams > .court-scoreboard-vs {
  grid-column: 2;
}

#court-scoreboard-modal .court-scoreboard-queue-teams .team-b {
  grid-column: 3;
}

#court-scoreboard-modal .court-scoreboard-player-chip {
  min-width: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 15px;
  background: var(--card);
  color: var(--text);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 850;
  text-align: left;
  touch-action: none;
}

#court-scoreboard-modal .court-scoreboard-player-chip.manual-draft-player-chip {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

#court-scoreboard-modal .court-scoreboard-player-chip.player-chip-pick {
  cursor: grab;
}

#court-scoreboard-modal .court-scoreboard-player-chip.player-chip-pick:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 36%, transparent);
  outline-offset: 2px;
}

#court-scoreboard-modal .court-scoreboard-player-chip.team-chip-a {
  border-inline-start: 4px solid var(--teamA);
}

#court-scoreboard-modal .court-scoreboard-player-chip.team-chip-b {
  border-inline-start: 4px solid var(--teamB);
}

#court-scoreboard-modal .court-scoreboard-player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#court-scoreboard-modal .court-scoreboard-drag-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

#court-scoreboard-modal .court-scoreboard-drag-help .material-symbols-outlined {
  font-size: 16px;
}

#court-scoreboard-modal .court-scoreboard-empty {
  width: min(100%, 620px);
  min-height: min(42vh, 360px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 32px;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  touch-action: pan-y;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

#court-scoreboard-modal .court-scoreboard-empty:hover,
#court-scoreboard-modal .court-scoreboard-empty:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  box-shadow: 0 16px 44px color-mix(in srgb, var(--accent) 12%, transparent);
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 3px;
}

#court-scoreboard-modal .court-scoreboard-empty:active:not(:disabled) {
  transform: scale(.985);
}

#court-scoreboard-modal .court-scoreboard-empty:disabled {
  cursor: not-allowed;
  opacity: .58;
}

#court-scoreboard-modal .court-scoreboard-empty > .material-symbols-outlined {
  color: var(--accent);
  font-size: 48px;
}

#court-scoreboard-modal .court-scoreboard-empty strong {
  font-size: clamp(22px, 3vw, 30px);
}

#court-scoreboard-modal .court-scoreboard-empty-description {
  margin: 0;
  color: var(--muted);
}

#court-scoreboard-modal .court-scoreboard-empty-action {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

#court-scoreboard-modal .court-scoreboard-empty:disabled .court-scoreboard-empty-action {
  background: var(--bg3);
  color: var(--muted);
}

#court-scoreboard-modal .court-scoreboard-footer {
  grid-template-columns: minmax(0, 1fr) minmax(380px, 620px);
  align-items: end;
  gap: clamp(16px, 3vw, 36px);
  padding: 14px max(24px, env(safe-area-inset-right)) max(18px, calc(14px + env(safe-area-inset-bottom))) max(24px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--card) 94%, var(--bg3));
}

#court-scoreboard-modal .court-scoreboard-court-switcher {
  display: grid;
  justify-items: start;
  gap: 8px;
}

#court-scoreboard-modal .court-scoreboard-court-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

#court-scoreboard-modal .court-scoreboard-court-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

#court-scoreboard-modal .court-scoreboard-swipe-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

#court-scoreboard-modal .court-scoreboard-swipe-hint.hidden {
  display: none;
}

#court-scoreboard-modal .court-scoreboard-swipe-hint .material-symbols-outlined {
  font-size: 17px;
}

#court-scoreboard-modal .court-scoreboard-pills {
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

#court-scoreboard-modal .court-scoreboard-pills::-webkit-scrollbar {
  display: none;
}

#court-score-picker-modal.court-score-picker-backdrop {
  z-index: 10020 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
  background: rgba(8, 11, 20, .68) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#court-score-picker-modal .court-score-picker-sheet {
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  background: var(--card) !important;
  color: var(--text) !important;
  box-shadow: 0 24px 72px rgba(8, 11, 20, .32) !important;
}

#court-score-picker-modal .modal-header {
  padding: 18px 20px 14px;
}

#court-score-picker-modal .modal-body {
  padding: 16px 20px 20px;
}

#court-score-picker-modal .court-score-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

#court-score-picker-modal .court-score-picker-option {
  min-width: 48px;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .1s ease;
}

#court-score-picker-modal .court-score-picker-option:hover,
#court-score-picker-modal .court-score-picker-option:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--bg3));
}

#court-score-picker-modal .court-score-picker-option.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

#court-score-picker-modal .court-score-picker-option:active {
  transform: scale(.96);
}

#court-scoreboard-modal .court-scoreboard-pill:disabled {
  cursor: not-allowed;
  opacity: .34;
}

#court-scoreboard-modal .court-scoreboard-pill {
  position: relative;
  width: auto;
  min-width: 48px;
  max-width: 112px;
  height: 48px;
  min-height: 48px;
  padding: 0 10px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

#court-scoreboard-modal .court-scoreboard-pill-number {
  display: block;
  min-width: 0;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}

#court-scoreboard-modal .court-scoreboard-pill-state {
  position: absolute;
  inset-inline: 0;
  bottom: 3px;
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

#court-scoreboard-modal .court-scoreboard-footer-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

#court-scoreboard-modal .court-scoreboard-goto-btn,
#court-scoreboard-modal .court-scoreboard-skip-btn,
#court-scoreboard-modal .court-scoreboard-save-btn {
  min-height: 54px;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 900;
  touch-action: manipulation;
}

#court-scoreboard-modal .court-scoreboard-skip-btn.hidden {
  display: none;
}

#court-scoreboard-modal .court-scoreboard-save-btn:disabled {
  cursor: not-allowed;
  opacity: .42;
}

#court-scoreboard-modal .court-scoreboard-save-btn.is-below-target:not(:disabled) {
  background: linear-gradient(180deg, #f59e0b, #d97706);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(217, 119, 6, .28);
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 820px) {
  #court-scoreboard-modal.court-scoreboard-backdrop {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  }

  #court-scoreboard-modal .court-scoreboard-sheet {
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 20px !important;
  }

  #court-scoreboard-modal .court-scoreboard-topbar {
    min-height: calc(64px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) max(66px, calc(18px + env(safe-area-inset-right))) 10px max(66px, calc(18px + env(safe-area-inset-left)));
  }

  #court-scoreboard-modal .court-scoreboard-close-btn {
    top: calc(8px + env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }

  #court-scoreboard-modal .court-scoreboard-body {
    gap: 12px;
    padding: 14px max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left));
  }

  #court-scoreboard-modal .court-scoreboard-scoreboard {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 8px;
  }

  #court-scoreboard-modal .court-scoreboard-queue-card {
    padding: 14px;
    border-radius: 18px;
  }

  #court-scoreboard-modal .court-scoreboard-queue-teams {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 8px;
  }

  #court-scoreboard-modal .court-scoreboard-player-chip {
    min-height: 58px;
    padding: 8px 10px;
    font-size: 15px;
  }

  #court-scoreboard-modal .court-scoreboard-score-control {
    gap: 10px;
    padding: 14px 10px;
    border-radius: 18px;
  }

  #court-scoreboard-modal .court-scoreboard-stepper {
    grid-template-columns: 50px minmax(68px, 82px) 50px;
    justify-content: center;
    gap: 6px;
  }

  #court-scoreboard-modal .court-scoreboard-stepper button {
    width: 50px;
    height: 54px;
    border-radius: 15px;
  }

  #court-scoreboard-modal .court-scoreboard-stepper button .material-symbols-outlined {
    font-size: 30px;
  }

  #court-scoreboard-modal .court-scoreboard-stepper .court-scoreboard-score-value {
    width: 100%;
    min-height: 58px;
    font-size: clamp(46px, 11vw, 64px);
  }

  #court-scoreboard-modal .court-scoreboard-player-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 12px;
  }

  #court-scoreboard-modal .court-scoreboard-player-line {
    width: min(100%, 280px);
    min-height: 48px;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    justify-content: center;
    gap: 7px;
    padding: 7px 9px;
    border-radius: 13px;
  }

  #court-scoreboard-modal .court-scoreboard-team-players {
    gap: 8px;
    font-size: clamp(15px, 3.7vw, 19px);
  }

  #court-scoreboard-modal .court-scoreboard-vs {
    width: 28px;
    height: 40px;
    background: transparent;
    font-size: 10px;
  }

  #court-scoreboard-modal .court-scoreboard-selected-badge {
    padding: 3px 6px;
    font-size: 10px;
  }

  #court-scoreboard-modal .court-scoreboard-winner-btn {
    min-height: 50px;
    padding: 8px;
    font-size: 12px;
  }

  #court-scoreboard-modal .court-scoreboard-footer {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 10px max(14px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  #court-scoreboard-modal .court-scoreboard-court-switcher {
    justify-items: center;
  }

  #court-scoreboard-modal .court-scoreboard-court-context {
    justify-content: center;
  }

  #court-scoreboard-modal .court-scoreboard-pills {
    justify-content: safe center;
  }

  #court-scoreboard-modal .court-scoreboard-footer-actions {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .queue-courts-heading-row {
    align-items: stretch;
  }

  .global-court-scoreboard-btn {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .queue-preview-open-btn {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  #court-score-picker-modal .court-score-picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  #court-score-picker-modal .modal-body {
    padding: 14px;
  }
}

@media (max-width: 540px) {
  #court-scoreboard-modal .court-scoreboard-scoreboard {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #court-scoreboard-modal .court-scoreboard-queue-teams {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #court-scoreboard-modal .court-scoreboard-queue-teams .team-b {
    grid-column: 2;
  }

  #court-scoreboard-modal .court-scoreboard-vs {
    display: none;
  }

  #court-scoreboard-modal .court-scoreboard-team-heading {
    min-width: 0;
  }

  #court-scoreboard-modal .court-scoreboard-stepper {
    width: 100%;
    min-width: 0;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    justify-content: center;
    gap: 4px;
  }

  #court-scoreboard-modal .court-scoreboard-stepper button {
    width: 44px;
    min-width: 44px;
    height: 48px;
    border-radius: 13px;
  }

  #court-scoreboard-modal .court-scoreboard-score-control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    padding: 10px 6px;
    overflow: hidden;
  }

  #court-scoreboard-modal .court-scoreboard-stepper .court-scoreboard-score-value {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    font-size: clamp(38px, 11vw, 48px);
    line-height: 1;
    letter-spacing: -.04em;
  }

  #court-scoreboard-modal .court-scoreboard-player-line {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 4px;
    min-height: 42px;
    padding: 5px 4px;
  }

  #court-scoreboard-modal .court-scoreboard-player-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  #court-scoreboard-modal .court-scoreboard-team-players {
    font-size: clamp(14px, 4vw, 17px);
  }

  #court-scoreboard-modal .court-scoreboard-goto-btn {
    display: none;
  }

  #court-scoreboard-modal .court-scoreboard-footer-actions {
    display: flex;
  }

  #court-scoreboard-modal .court-scoreboard-skip-btn,
  #court-scoreboard-modal .court-scoreboard-save-btn {
    min-width: 0;
    flex: 1 1 0;
  }

  #court-scoreboard-modal .court-scoreboard-save-btn:only-child,
  #court-scoreboard-modal .court-scoreboard-skip-btn.hidden + .court-scoreboard-save-btn {
    flex-basis: 100%;
  }

  #court-scoreboard-modal .court-scoreboard-winner-btn .material-symbols-outlined {
    display: none;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  #court-scoreboard-modal.court-scoreboard-backdrop {
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  }

  #court-scoreboard-modal .court-scoreboard-sheet {
    border-radius: 20px !important;
  }

  #court-scoreboard-modal .court-scoreboard-topbar {
    min-height: calc(58px + env(safe-area-inset-top));
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: 8px;
  }

  #court-scoreboard-modal .court-scoreboard-close-btn {
    top: calc(5px + env(safe-area-inset-top));
  }

  #court-scoreboard-modal .court-scoreboard-body {
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #court-scoreboard-modal .court-scoreboard-score-control {
    grid-template-columns: minmax(110px, .75fr) minmax(120px, 1fr) minmax(160px, .9fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 8px 14px;
    padding: 12px 16px;
  }

  #court-scoreboard-modal .court-scoreboard-queue-card {
    padding: 12px 18px;
  }

  #court-scoreboard-modal .court-scoreboard-player-chip {
    min-height: 50px;
    padding-block: 6px;
  }

  #court-scoreboard-modal .court-scoreboard-drag-help {
    margin-top: 10px;
  }

  #court-scoreboard-modal .court-scoreboard-team-heading,
  #court-scoreboard-modal .court-scoreboard-team-players {
    grid-column: 1;
  }

  #court-scoreboard-modal .court-scoreboard-stepper {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  #court-scoreboard-modal .court-scoreboard-winner-btn {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  #court-scoreboard-modal .court-scoreboard-scoreboard {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #court-scoreboard-modal .court-scoreboard-vs,
  #court-scoreboard-modal .court-scoreboard-help {
    display: none;
  }

  #court-scoreboard-modal .court-scoreboard-footer {
    grid-template-columns: auto minmax(360px, 1fr);
    align-items: center;
    padding-top: 9px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom));
  }

  #court-scoreboard-modal .court-scoreboard-pills {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  #court-scoreboard-modal .court-scoreboard-score-control,
  #court-scoreboard-modal .court-scoreboard-stepper button {
    transition: none;
  }
}

#checkin-gate-state-map select {
  width: min(100%, 340px);
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

html[data-theme="dark"] .scheduled-session-toggle-row,
html[data-theme="dark"] .scheduled-session-player-search,
html[data-theme="dark"] .scheduled-session-link-row input,
html[data-theme="dark"] #checkin-gate-state-map select {
  background: rgba(17, 26, 46, .62);
}

@media(max-width:560px) {
  .scheduled-sessions-toolbar,
  .scheduled-session-player-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .scheduled-sessions-toolbar .btn {
    width: 100%;
  }

  .scheduled-session-player-actions {
    width: 100%;
  }

  .scheduled-session-player-actions .btn {
    flex: 1;
  }

  .scheduled-session-wizard-footer {
    flex-wrap: wrap;
  }

  .scheduled-session-wizard-footer > .btn {
    flex: 1;
  }

  .scheduled-session-wizard-spacer {
    display: none;
  }

  .scheduled-session-link-row {
    align-items: stretch;
    flex-direction: column;
  }

  .scheduled-session-link-row .btn {
    width: 100%;
  }
}

/* Player identity onboarding: keep the shell fixed and scroll only the roster. */
#player-identity-onboarding-modal .player-identity-onboarding-sheet {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

#player-identity-onboarding-modal .player-identity-onboarding-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.player-identity-onboarding-sheet #player-identity-panel-existing {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.player-identity-onboarding-sheet #player-identity-panel-existing.hidden,
.player-identity-onboarding-sheet #player-identity-panel-create.hidden {
  display: none !important;
}

.player-identity-onboarding-sheet .player-identity-options {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.player-identity-onboarding-sheet .player-identity-onboarding-footer {
  flex: 0 0 auto !important;
  justify-content: space-between;
}

.player-identity-skip-btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 32px;
  padding: 5px 0 !important;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.player-identity-skip-btn:hover,
.player-identity-skip-btn:focus-visible {
  color: var(--text);
  text-decoration: underline;
  outline: none;
}

.password-card .btn-primary {
  margin-top: 2px;
}

.reset-session-toggle strong {
  color: var(--out);
}

#password-reset-member:disabled {
  opacity: .65;
  cursor: not-allowed;
}

html[data-theme="dark"] .system-collapse-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)), rgba(18, 26, 43, .88) !important;
  border-color: rgba(148, 163, 184, .16) !important;
}

.personal-queue-alert-setting-card,
.court-game-timer-setting-card {
  display: grid;
  gap: 14px;
  padding: 16px !important;
}

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

.personal-queue-setting-title {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
}

.personal-queue-setting-title .material-symbols-outlined {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  color: var(--accent);
  font-size: 20px;
}

.personal-queue-setting-title strong,
.personal-queue-alert-setting-copy strong {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.25;
}

.personal-queue-setting-title small,
.personal-queue-alert-setting-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
}

.personal-queue-alert-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.court-scoreboard-format-setting {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

#court-scoreboard-setting-card > .personal-queue-alert-toggle-row,
#personal-queue-alert-setting-card > .personal-queue-alert-toggle-row {
  border-bottom: 0;
}

.court-scoreboard-format-setting.hidden {
  display: none;
}

.queue-spread-warning-setting-card {
  gap: 10px !important;
}

.queue-spread-warning-setting-body {
  display: grid;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.queue-spread-warning-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.queue-spread-warning-setting-row + .queue-spread-warning-setting-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
}

.queue-spread-warning-limit-setting.hidden {
  display: none;
}

.queue-spread-warning-limit-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.queue-spread-warning-limit-input {
  width: 52px;
  min-width: 52px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 10px;
  background: var(--bg2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.queue-spread-warning-limit-input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 1px;
}

.queue-spread-warning-limit-input:disabled {
  opacity: 0.55;
}

.queue-spread-warning-limit-suffix {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.court-scoreboard-format-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg3);
}

.court-scoreboard-format-options button {
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.court-scoreboard-format-options button:hover,
.court-scoreboard-format-options button:focus-visible {
  color: var(--text);
}

.court-scoreboard-format-options button.active {
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 78%, transparent), 0 1px 3px rgba(8, 11, 20, .06);
}

.court-scoreboard-format-options button:active {
  transform: scale(.97);
}

.personal-queue-alert-setting-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

html[data-theme="dark"] .personal-queue-alert-setting-card,
html[data-theme="dark"] .court-game-timer-setting-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)), rgba(18, 26, 43, .88) !important;
  border-color: rgba(148, 163, 184, .16) !important;
}

.personal-queue-alert-setting-card.is-attention {
  animation: notificationSettingsAttention 1.05s ease;
}

@keyframes notificationSettingsAttention {
  0%,
  100% {
    box-shadow: none;
  }

  35% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  }
}

@media(max-width:520px) {
  .password-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .system-collapse-toggle,
  .system-collapse-static-head {
    padding: 14px !important;
  }

  .system-collapse-content.open {
    padding: 0 14px 14px !important;
  }

  .personal-queue-alert-setting-card,
  .court-game-timer-setting-card {
    padding: 14px !important;
  }

  .personal-queue-alert-toggle-row {
    align-items: flex-start;
  }

  .queue-spread-warning-setting-row {
    align-items: flex-start;
  }
}

/* v20.8 Membership request password badges */
.request-password-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 7px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  vertical-align: middle;
  border: 1px solid transparent;
  white-space: nowrap;
}

.request-password-badge.ok {
  color: var(--ready);
  background: rgba(17, 184, 154, .10);
  border-color: rgba(17, 184, 154, .22);
}

.request-password-badge.warn {
  color: var(--playing);
  background: rgba(245, 158, 11, .11);
  border-color: rgba(245, 158, 11, .24);
}

.request-row.request-legacy {
  opacity: .82;
}

html[data-theme="dark"] .request-password-badge.ok {
  color: #5eead4;
  background: rgba(45, 212, 191, .12);
  border-color: rgba(45, 212, 191, .26);
}

html[data-theme="dark"] .request-password-badge.warn {
  color: #f6c177;
  background: rgba(246, 179, 95, .12);
  border-color: rgba(246, 179, 95, .26);
}

@media(max-width:420px) {
  .request-password-badge {
    margin-left: 0;
    margin-top: 4px;
  }

  .request-row .access-name {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
  }
}


/* v20.9 Login polish: remove the decorative BQ logo block for a cleaner non-AI-looking auth header */
.auth-brand {
  gap: 0 !important;
  padding-right: 52px !important;
  margin-bottom: 20px !important;
}

.auth-logo-mark {
  display: none !important;
}

.auth-title {
  letter-spacing: -.35px !important;
}

@media(max-width:520px) {
  .auth-brand {
    padding-right: 44px !important;
  }
}


/* v21.1 Register request success UX */
.auth-register-success-panel {
  text-align: center;
  animation: authSuccessIn .26s cubic-bezier(.22, 1, .36, 1);
}

@keyframes authSuccessIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.985)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

.register-success-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(45, 212, 191, .18), rgba(20, 184, 166, .08));
  border: 1px solid rgba(45, 212, 191, .28);
  color: var(--accent);
  box-shadow: 0 16px 34px rgba(45, 212, 191, .12);
}

.register-success-icon svg {
  width: 30px;
  height: 30px;
}

.register-success-title {
  margin-bottom: 4px;
}

.register-success-desc {
  max-width: 380px;
  margin: 0 auto 14px;
  line-height: 1.65;
}

.register-success-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(125, 132, 145, .07);
  border: 1px solid rgba(125, 132, 145, .14);
  margin: 14px 0 12px;
  text-align: left;
}

.register-success-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.register-success-summary strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.register-success-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
}

.register-success-steps div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(45, 212, 191, .06);
  border: 1px solid rgba(45, 212, 191, .13);
  text-align: left;
}

.register-success-steps strong {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #06110f;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}

.register-success-steps span {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

html[data-theme="light"] .register-success-icon {
  background: linear-gradient(135deg, rgba(17, 184, 154, .18), rgba(17, 184, 154, .07));
  border-color: rgba(17, 184, 154, .28);
}

html[data-theme="light"] .register-success-steps div {
  background: rgba(17, 184, 154, .06);
  border-color: rgba(17, 184, 154, .14);
}

@media(max-width:420px) {
  .register-success-steps {
    grid-template-columns: 1fr;
  }

  .register-success-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* v21.5 Access UX polish */
.settings-tabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 6px !important;
  padding: 5px !important;
  border-radius: 20px !important;
  overflow: visible !important;
  background: rgba(125, 132, 145, .065);
  border: 1px solid rgba(125, 132, 145, .11);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.settings-tab {
  min-width: 0;
  min-height: 56px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  gap: 4px !important;
  padding: 8px 4px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
  transition: all .18s cubic-bezier(.4, 0, .2, 1) !important;
}

.settings-tab.active {
  color: var(--text) !important;
  background: var(--card) !important;
  border-color: rgba(125, 132, 145, .06) !important;
  box-shadow: 0 6px 14px rgba(70, 76, 90, .05) !important;
}

.settings-tab .tab-icon {
  font-size: 22px !important;
  color: var(--muted);
  transition: all .18s ease !important;
  display: inline-block;
  line-height: 1;
}

.settings-tab.active .tab-icon {
  color: var(--accent) !important;
  font-variation-settings: 'FILL' 1, 'wght' 400;
  transform: scale(1.05);
}

.settings-tab .tab-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2;
}

.request-row {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 14px !important;
  align-items: stretch !important;
}

.request-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

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

.request-name-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  white-space: normal !important;
  overflow: visible !important;
}

.request-user-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.request-email {
  margin-top: 4px !important;
  white-space: normal !important;
  word-break: break-word;
}

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

.request-detail-item {
  border: 1px solid rgba(125, 132, 145, .14);
  background: rgba(125, 132, 145, .06);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 0;
}

.request-note-item {
  grid-column: 1 / -1;
}

.request-detail-label {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .45px;
  margin-bottom: 4px;
  font-weight: 800;
}

.request-detail-item strong {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  font-weight: 800;
  word-break: break-word;
}

.request-actions-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.request-options-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.request-role-field {
  margin-bottom: 0 !important;
}

.request-mapping-field {
  min-width: 0;
  margin-bottom: 0 !important;
  padding: 12px;
  border: 1px solid rgba(17, 184, 154, .18);
  border-radius: 14px;
  background: rgba(17, 184, 154, .045);
}

.request-field-heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin-bottom: 9px;
}

.request-mapping-status {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-mapping-status.is-mapped {
  color: var(--accent-strong, var(--accent));
}

.request-mapping-trigger {
  width: 100%;
  min-width: 0 !important;
  min-height: 38px !important;
}

.request-mapping-disabled {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.request-role-field .form-label {
  margin-bottom: 6px;
}

.request-actions {
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.request-actions .access-map-player-btn,
.request-mapping-field .access-map-player-btn,
.request-actions .access-approve-btn,
.request-actions .access-reject-btn {
  min-width: 96px;
  min-height: 40px;
}

.request-actions .access-block-btn {
  min-width: 64px;
}

.request-actions .access-map-player-btn,
.request-mapping-field .access-map-player-btn {
  border: 1px solid rgba(17, 184, 154, .25);
  border-radius: 10px;
  padding: 8px 12px;
  background: rgba(17, 184, 154, .08);
  color: var(--accent-strong, var(--accent));
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.request-actions .access-map-player-btn:hover,
.request-actions .access-map-player-btn:focus-visible,
.request-mapping-field .access-map-player-btn:hover,
.request-mapping-field .access-map-player-btn:focus-visible {
  border-color: rgba(17, 184, 154, .48);
  background: rgba(17, 184, 154, .14);
}

.request-mapping-item {
  grid-column: 1 / -1;
  border-color: rgba(17, 184, 154, .2);
  background: rgba(17, 184, 154, .055);
}

.request-mapping-item strong {
  color: var(--accent-strong, var(--accent));
}

.request-row .access-role-select {
  width: 100%;
  min-width: 0 !important;
  min-height: 42px;
  border-radius: 14px !important;
}

@media(max-width:720px) {
  .request-detail-grid {
    grid-template-columns: 1fr;
  }

  .request-options-grid {
    grid-template-columns: 1fr;
  }

  .request-actions-panel {
    grid-template-columns: 1fr;
  }

  .request-actions {
    justify-content: stretch !important;
  }

  .request-actions .access-approve-btn,
  .request-actions .access-reject-btn,
  .request-actions .access-map-player-btn,
  .request-mapping-field .access-map-player-btn {
    flex: 1;
  }
}

.access-edit-mapping-group {
  display: grid;
  gap: 8px;
}

.access-edit-mapping-group .access-edit-mapping-trigger {
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid rgba(125, 132, 145, .16);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 92%, var(--bg3));
}

.access-edit-mapping-group .access-edit-mapping-trigger:hover:not(:disabled) {
  background: rgba(0, 168, 132, .06);
  border-color: rgba(17, 184, 154, .28);
}

.access-edit-mapping-clear {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.access-edit-mapping-clear:hover {
  color: var(--danger, #dc2626);
}

.access-edit-mapping-clear.hidden {
  display: none !important;
}

.access-edit-block:first-of-type {
  margin-top: 14px;
}

.access-edit-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.access-edit-block-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: .2px;
}

.access-edit-block-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.access-edit-reset-block .btn-primary {
  margin-top: 4px;
}

.access-edit-reset-block .generated-password-card {
  margin-top: 14px;
}

.access-edit-sheet {
  max-width: 560px !important;
}

@media(max-width:520px) {
  .access-edit-block {
    margin-top: 16px;
    padding-top: 14px;
  }
}

/* v21.6 Removed Access Trash */
.access-card-title-actions {
  gap: 10px;
}

.access-approve-all-btn {
  min-height: 40px;
  padding: 7px 11px 7px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--ready) 28%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--ready) 8%, var(--card));
  color: var(--ready);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}

.access-approve-all-btn .material-symbols-outlined {
  font-size: 17px;
  line-height: 1;
}

.access-approve-all-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ready) 48%, var(--border));
  background: color-mix(in srgb, var(--ready) 13%, var(--card));
}

.access-approve-all-btn:active:not(:disabled) {
  transform: scale(.97);
}

.access-approve-all-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ready) 28%, transparent);
  outline-offset: 2px;
}

.access-approve-all-btn:disabled,
.access-approve-all-btn[aria-busy="true"] {
  opacity: .5;
  cursor: not-allowed;
}

.pending-request-float-alert {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 720;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  transition: transform .14s cubic-bezier(.23, 1, .32, 1), opacity .16s ease;
}

.pending-request-float-alert.hidden {
  display: none !important;
}

.pending-request-float-alert:hover {
  transform: translateY(-2px);
}

.pending-request-float-alert:active {
  transform: scale(.97);
}

.pending-request-float-alert:focus-visible {
  outline: none;
}

.pending-request-float-alert:focus-visible .pending-request-float-orb {
  outline: 3px solid color-mix(in srgb, #f59e0b 34%, transparent);
  outline-offset: 4px;
}

.pending-request-float-copy {
  min-width: 146px;
  min-height: 48px;
  padding: 8px 12px;
  display: grid;
  align-content: center;
  gap: 1px;
  border: 1px solid color-mix(in srgb, #f59e0b 28%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 96%, #f59e0b);
  box-shadow: 0 0 0 1px rgba(180, 83, 9, .04), 0 7px 20px rgba(15, 23, 42, .13);
}

.pending-request-float-copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.pending-request-float-copy small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
}

.pending-request-float-connector {
  position: relative;
  width: 13px;
  height: 2px;
  flex: 0 0 13px;
  margin-inline-end: 6px;
  background: color-mix(in srgb, #f59e0b 55%, var(--border));
}

.pending-request-float-connector::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  transform: translate(50%, -50%);
}

.pending-request-float-orb {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 1px rgba(180, 83, 9, .12), 0 8px 22px rgba(180, 83, 9, .24);
  color: #fff;
}

.pending-request-float-icon {
  position: relative;
  z-index: 2;
  font-size: 24px;
  line-height: 1;
}

.pending-request-float-count {
  position: absolute;
  z-index: 3;
  top: -5px;
  right: -5px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pending-request-radar,
.pending-request-radar::before,
.pending-request-radar::after {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(245, 158, 11, .56);
  border-radius: 50%;
  pointer-events: none;
}

.pending-request-radar {
  border: 0;
}

.pending-request-radar::before,
.pending-request-radar::after {
  content: '';
  animation: pendingRequestRadarPulse 2.2s cubic-bezier(.23, 1, .32, 1) infinite;
}

.pending-request-radar::after {
  animation-delay: 1.1s;
}

@keyframes pendingRequestRadarPulse {
  0% {
    opacity: .72;
    transform: scale(.88);
  }

  72%,
  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}

body.modal-open .pending-request-float-alert,
html.court-scoreboard-open .pending-request-float-alert,
body:not(.auth-ready) .pending-request-float-alert {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 899px) {
  .pending-request-float-alert {
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  }

  .pending-request-float-copy {
    min-width: 132px;
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pending-request-float-alert,
  .pending-request-radar::before,
  .pending-request-radar::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

.access-trash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(125, 132, 145, .18);
  background: rgba(125, 132, 145, .06);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 11px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.access-trash-btn svg {
  width: 15px;
  height: 15px;
}

.access-trash-btn:hover {
  color: var(--out);
  background: rgba(220, 38, 38, .07);
  border-color: rgba(220, 38, 38, .20);
}

.removed-access-sheet {
  max-width: 640px !important;
}

.removed-access-note {
  border: 1px solid rgba(125, 132, 145, .14);
  background: rgba(125, 132, 145, .055);
  color: var(--muted);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 12px;
}

.removed-access-row {
  align-items: flex-start !important;
}

.removed-access-avatar {
  opacity: .72;
  filter: saturate(.55);
}

.removed-access-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.access-restore-btn,
.access-permanent-delete-btn {
  border-radius: 999px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all .15s;
}

.access-restore-btn {
  background: rgba(17, 184, 154, .10);
  border-color: rgba(17, 184, 154, .24);
  color: var(--ready);
}

.access-restore-btn:hover:not(:disabled) {
  background: rgba(17, 184, 154, .15);
  border-color: rgba(17, 184, 154, .34);
}

.access-restore-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: saturate(.6);
}

.access-permanent-delete-btn {
  background: rgba(220, 38, 38, .07);
  border-color: rgba(220, 38, 38, .18);
  color: var(--out);
}

.access-permanent-delete-btn:hover {
  background: rgba(220, 38, 38, .12);
  border-color: rgba(220, 38, 38, .30);
}

html[data-theme="dark"] .access-trash-btn {
  background: rgba(17, 26, 46, .72);
  border-color: rgba(148, 163, 184, .16);
}

html[data-theme="dark"] .removed-access-note {
  background: rgba(17, 26, 46, .48);
  border-color: rgba(148, 163, 184, .14);
}

html[data-theme="dark"] .access-restore-btn {
  background: rgba(45, 212, 191, .10);
  border-color: rgba(45, 212, 191, .24);
  color: #5eead4;
}

html[data-theme="dark"] .access-permanent-delete-btn {
  background: rgba(251, 113, 133, .10);
  border-color: rgba(251, 113, 133, .24);
  color: #fda4af;
}

@media(max-width:620px) {
  .access-trash-btn span {
    display: none;
  }

  .removed-access-row {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .removed-access-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .access-restore-btn,
  .access-permanent-delete-btn {
    flex: 1;
    text-align: center;
  }
}

/* v22 Desktop / tablet-landscape left navigation inspired by compact app sidebar */
.desktop-sidebar {
  display: none;
}

.desktop-theme-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.desktop-theme-icon svg {
  width: 18px;
  height: 18px;
}

@media (min-width:900px) and (min-height:560px),
(min-width:768px) and (orientation:landscape) and (min-height:560px) {
  :root {
    --desktop-sidebar-width: 280px;
    --desktop-shell-gap: 28px;
  }

  body.auth-ready {
    padding-left: calc(var(--desktop-sidebar-width) + var(--desktop-shell-gap));
    min-height: 100vh;
  }

  body.auth-ready .topbar,
  body.auth-ready .bottom-nav {
    display: none !important;
  }

  body.auth-ready .desktop-sidebar {
    display: flex;
    position: fixed;
    left: 22px;
    top: 22px;
    bottom: 22px;
    width: var(--desktop-sidebar-width);
    z-index: 180;
    flex-direction: column;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(125, 132, 145, .16);
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 28px 70px rgba(31, 41, 55, .13);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  html[data-theme="dark"] body.auth-ready .desktop-sidebar {
    background: rgba(12, 18, 30, .84);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .36);
  }

  .desktop-window-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 20px 8px;
    flex: 0 0 auto;
  }

  .desktop-window-dots span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: block;
  }

  .desktop-window-dots span:nth-child(1) {
    background: #ef6a5b;
  }

  .desktop-window-dots span:nth-child(2) {
    background: #f6bf4f;
  }

  .desktop-window-dots span:nth-child(3) {
    background: #63c96b;
  }

  .desktop-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 18px;
    min-width: 0;
  }

  .desktop-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    background: rgba(17, 184, 154, .10);
    border: 1px solid rgba(17, 184, 154, .14);
    flex: 0 0 auto;
  }

  .desktop-brand-mark svg {
    width: 24px;
    height: 24px;
  }

  .desktop-brand strong {
    display: block;
    color: var(--text);
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -.45px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desktop-brand span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }

  html[data-theme="dark"] .desktop-brand-mark {
    background: rgba(45, 212, 191, .11);
    border-color: rgba(45, 212, 191, .16);
    color: #e6edf7;
  }

  .desktop-nav-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 2px 14px 14px;
    scrollbar-width: none;
  }

  .desktop-nav-scroll::-webkit-scrollbar {
    display: none;
  }

  .desktop-nav-section {
    padding: 12px 0;
    border-top: 1px solid rgba(125, 132, 145, .14);
  }

  .desktop-nav-section:first-child {
    border-top: 0;
    padding-top: 4px;
  }

  html[data-theme="dark"] .desktop-nav-section {
    border-top-color: rgba(148, 163, 184, .13);
  }

  .desktop-nav-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 0 6px 8px;
    opacity: .78;
  }

  .desktop-nav-item {
    width: 100%;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
    text-align: left;
    position: relative;
  }

  .desktop-nav-item+.desktop-nav-item {
    margin-top: 5px;
  }

  .desktop-nav-item svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    stroke: currentColor;
  }

  .desktop-nav-item span:last-child,
  .desktop-nav-item>span:not(.desktop-theme-icon) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desktop-nav-item:hover {
    background: rgba(125, 132, 145, .075);
    border-color: rgba(125, 132, 145, .10);
    transform: translateX(1px);
  }

  .desktop-nav-item.active {
    color: var(--text);
    background: rgba(255, 255, 255, .66);
    border-color: rgba(125, 132, 145, .22);
    box-shadow: 0 12px 28px rgba(31, 41, 55, .08);
  }

  .desktop-nav-item.active::before {
    content: "";
    position: absolute;
    left: 6px;
    width: 4px;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent), var(--accent2));
  }

  .desktop-nav-item.active svg,
  .desktop-nav-item:hover svg {
    color: var(--accent);
  }

  .desktop-nav-danger:hover {
    color: var(--out);
    background: rgba(220, 38, 38, .075);
    border-color: rgba(220, 38, 38, .14);
  }

  html[data-theme="dark"] .desktop-nav-item {
    color: #d7e1ee;
  }

  html[data-theme="dark"] .desktop-nav-item:hover {
    background: rgba(45, 212, 191, .07);
    border-color: rgba(45, 212, 191, .10);
  }

  html[data-theme="dark"] .desktop-nav-item.active {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(148, 163, 184, .18);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
  }

  .desktop-user-card {
    width: calc(100% - 28px);
    margin: 0 14px 14px;
    min-height: 58px;
    padding: 9px 10px;
    border-radius: 18px;
    background: rgba(125, 132, 145, .09);
    border: 1px solid rgba(125, 132, 145, .12);
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }

  .desktop-user-card:hover,
  .desktop-account-menu.open .desktop-user-card {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(125, 132, 145, .20);
    box-shadow: 0 12px 28px rgba(31, 41, 55, .08);
  }

  .desktop-user-card:focus-visible {
    outline: 2px solid rgba(17, 184, 154, .44);
    outline-offset: 3px;
  }

  .desktop-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(17, 184, 154, .18), rgba(99, 102, 241, .14));
    border: 1px solid rgba(125, 132, 145, .18);
    color: var(--text);
    font-weight: 950;
    flex: 0 0 auto;
    overflow: hidden;
  }

  .desktop-user-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .desktop-user-avatar.has-image {
    background: rgba(125, 132, 145, .10);
    color: transparent;
  }

  .desktop-user-info {
    min-width: 0;
    flex: 1;
    line-height: 1.15;
  }

  .desktop-user-info strong,
  .desktop-user-info span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desktop-user-info strong {
    font-size: 13px;
    color: var(--text);
    font-weight: 950;
  }

  .desktop-user-info span {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
  }

  .desktop-sync-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
  }

  .desktop-account-menu {
    position: relative;
    flex: 0 0 auto;
  }

  .desktop-account-caret {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    transition: transform .16s ease, color .16s ease;
  }

  .desktop-account-menu.open .desktop-account-caret {
    color: var(--accent);
    transform: rotate(180deg);
  }

  .desktop-account-popover {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: calc(100% + 8px);
    z-index: 920;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 22px 58px rgba(15, 23, 42, .18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform-origin: bottom left;
    animation: desktopAccountMenuIn .16s cubic-bezier(.23, 1, .32, 1);
  }

  @keyframes desktopAccountMenuIn {
    from {
      opacity: 0;
      transform: translateY(6px) scale(.98);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .desktop-account-popover-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
  }

  .desktop-account-popover-avatar {
    width: 34px;
    height: 34px;
  }

  .desktop-account-menu-item {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 0;
    border-bottom: 1px solid rgba(15, 23, 42, .07);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 760;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
  }

  .desktop-account-menu-item:last-child {
    border-bottom: 0;
  }

  .desktop-account-menu-item:hover,
  .desktop-account-menu-item:focus-visible {
    background: rgba(15, 23, 42, .055);
    outline: 0;
  }

  .desktop-account-menu-item svg,
  .desktop-account-menu-item .desktop-theme-icon,
  .desktop-account-menu-item .material-symbols-outlined {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
  }

  .desktop-account-theme-action:hover .desktop-theme-icon,
  .desktop-account-theme-action:focus-visible .desktop-theme-icon {
    color: var(--accent);
  }

  .desktop-account-demo-settings-action {
    display: none !important;
  }

  body.demo-sandbox-active .desktop-account-demo-settings-action {
    display: flex !important;
  }

  .desktop-account-logout-action {
    color: rgb(185, 28, 28);
  }

  .desktop-account-logout-action:hover,
  .desktop-account-logout-action:focus-visible {
    color: rgb(185, 28, 28);
    background: rgba(239, 68, 68, .09);
  }

  html[data-theme="dark"] .desktop-user-card {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(148, 163, 184, .14);
  }

  html[data-theme="dark"] .desktop-user-card:hover,
  html[data-theme="dark"] .desktop-account-menu.open .desktop-user-card {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(148, 163, 184, .22);
  }

  html[data-theme="dark"] .desktop-account-popover {
    background: rgba(10, 16, 30, .96);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .42);
  }

  html[data-theme="dark"] .desktop-account-popover-head,
  html[data-theme="dark"] .desktop-account-menu-item {
    border-bottom-color: rgba(148, 163, 184, .12);
  }

  html[data-theme="dark"] .desktop-account-menu-item:hover,
  html[data-theme="dark"] .desktop-account-menu-item:focus-visible {
    background: rgba(255, 255, 255, .06);
  }

  html[data-theme="dark"] .desktop-account-logout-action {
    color: rgb(248, 113, 113);
  }

  html[data-theme="dark"] .desktop-account-logout-action:hover,
  html[data-theme="dark"] .desktop-account-logout-action:focus-visible {
    color: rgb(248, 113, 113);
    background: rgba(248, 113, 113, .11);
  }

  body.auth-ready .page {
    width: min(calc(100vw - var(--desktop-sidebar-width) - 78px), 1060px) !important;
    max-width: 1060px !important;
    margin: 0 auto !important;
    padding: 30px 22px 48px !important;
  }

  body.auth-ready #page-queue .card,
  body.auth-ready #page-queue .section-heading,
  body.auth-ready #page-queue .queue-filter-tabs,
  body.auth-ready #page-queue #active-courts,
  body.auth-ready #settings-panel-expense .card,
  body.auth-ready #page-stats .card,
  body.auth-ready #page-settings .settings-panel.active {
    max-width: 900px !important;
  }

  body.auth-ready .settings-head,
  body.auth-ready .stats-dashboard-head,
  body.auth-ready .expense-header {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.auth-ready .dashboard-title {
    font-size: 28px;
    letter-spacing: -.75px;
  }

  body.auth-ready .dashboard-subtitle {
    font-size: 13px;
  }

  body.auth-ready .toast {
    bottom: 28px;
  }

  .guest-mode .desktop-nav-member-only,
  .guest-mode .desktop-account-member-only,
  .guest-mode .desktop-nav-item[data-nav-target="expense"],
  .guest-mode .desktop-nav-item[data-nav-target^="settings-"] {
    display: none !important;
  }

  body.demo-sandbox-active .desktop-account-member-only {
    display: none !important;
  }
}

@media (min-width:900px) and (max-width:1099px) and (min-height:560px),
(min-width:768px) and (max-width:1099px) and (orientation:landscape) and (min-height:560px) {
  :root {
    --desktop-sidebar-width: 244px;
    --desktop-shell-gap: 22px;
  }

  body.auth-ready .desktop-sidebar {
    left: 16px;
    top: 16px;
    bottom: 16px;
    border-radius: 24px;
  }

  .desktop-brand {
    padding-left: 16px;
    padding-right: 16px;
  }

  .desktop-brand strong {
    font-size: 16px;
  }

  .desktop-brand span {
    max-width: 145px;
  }

  .desktop-nav-scroll {
    padding-left: 10px;
    padding-right: 10px;
  }

  .desktop-nav-item {
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;
    gap: 10px;
  }

  body.auth-ready .page {
    width: min(calc(100vw - var(--desktop-sidebar-width) - 58px), 860px) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

body.auth-checking .desktop-sidebar,
body.auth-required .desktop-sidebar,
body.auth-no-access .desktop-sidebar {
  display: none !important;
}


/* v23 Desktop layout refinement: tighter sidebar-to-content spacing + desktop-wide polish
   Mobile portrait stays untouched because everything below runs only inside the desktop/tablet-landscape breakpoint. */
@media (min-width:900px) and (min-height:560px),
(min-width:768px) and (orientation:landscape) and (min-height:560px) {
  :root {
    --desktop-sidebar-width: 280px;
    --desktop-sidebar-left: 16px;
    --desktop-sidebar-y: 16px;
    --desktop-content-gap: 14px;
    --desktop-content-right: 24px;
    --desktop-content-left: calc(var(--desktop-sidebar-left) + var(--desktop-sidebar-width) + var(--desktop-content-gap));
  }

  body.auth-ready {
    padding-left: var(--desktop-content-left) !important;
    padding-right: var(--desktop-content-right) !important;
  }

  body.auth-ready .desktop-sidebar {
    left: var(--desktop-sidebar-left) !important;
    top: var(--desktop-sidebar-y) !important;
    bottom: var(--desktop-sidebar-y) !important;
    width: var(--desktop-sidebar-width) !important;
    border-radius: 26px !important;
  }

  body.auth-ready .page {
    width: min(calc(100vw - var(--desktop-content-left) - var(--desktop-content-right)), 1180px) !important;
    max-width: 1180px !important;
    margin: 0 !important;
    padding: 18px 0 48px !important;
  }

  /* Remove the old centered-card feeling on desktop so the content visually belongs to the left nav. */
  body.auth-ready #page-queue .card,
  body.auth-ready #page-queue .section-heading,
  body.auth-ready #page-queue .queue-filter-tabs,
  body.auth-ready #page-queue #active-courts,
  body.auth-ready #settings-panel-expense .card,
  body.auth-ready #page-stats .card,
  body.auth-ready #page-settings .settings-panel.active,
  body.auth-ready .settings-head,
  body.auth-ready .stats-dashboard-head,
  body.auth-ready .expense-header,
  body.auth-ready .access-management-panel {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.auth-ready .settings-head,
  body.auth-ready .stats-dashboard-head,
  body.auth-ready .expense-header {
    margin-bottom: 16px !important;
  }

  body.auth-ready .dashboard-title {
    font-size: 26px !important;
    letter-spacing: -.6px !important;
  }

  body.auth-ready .dashboard-subtitle {
    font-size: 13px !important;
    max-width: 720px;
  }

  body.auth-ready .card,
  body.auth-ready .court-card,
  body.auth-ready .stat-card {
    border-radius: 20px !important;
  }

  body.auth-ready .card {
    padding: 18px !important;
    margin-bottom: 14px !important;
  }

  body.auth-ready .court-card {
    margin-bottom: 14px !important;
  }

  body.auth-ready .queue-filter-tabs,
  body.auth-ready .stats-tabs {
    margin-bottom: 14px !important;
  }

  /* Better use of desktop width without making each form feel stretched. */
  body.auth-ready .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.auth-ready .access-grid {
    grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr) !important;
    gap: 14px !important;
  }

  body.auth-ready .access-form-grid,
  body.auth-ready .password-form-grid,
  body.auth-ready .court-profile-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.auth-ready .access-form-grid .form-group:last-child {
    grid-column: auto !important;
  }

  body.auth-ready .access-row,
  body.auth-ready .deleted-player-card,
  body.auth-ready .expense-history-row {
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(125, 132, 145, .13) !important;
    background: rgba(255, 255, 255, .46) !important;
  }

  html[data-theme="dark"] body.auth-ready .access-row,
  html[data-theme="dark"] body.auth-ready .deleted-player-card,
  html[data-theme="dark"] body.auth-ready .expense-history-row {
    background: rgba(17, 26, 46, .46) !important;
    border-color: rgba(148, 163, 184, .14) !important;
  }

  body.auth-ready .toast {
    left: calc(var(--desktop-content-left) + 50vw - (var(--desktop-content-left) / 2));
    bottom: 24px !important;
  }
}

@media (min-width:900px) and (max-width:1099px) and (min-height:560px),
(min-width:768px) and (max-width:1099px) and (orientation:landscape) and (min-height:560px) {
  :root {
    --desktop-sidebar-width: 244px;
    --desktop-sidebar-left: 14px;
    --desktop-sidebar-y: 14px;
    --desktop-content-gap: 12px;
    --desktop-content-right: 16px;
  }

  body.auth-ready .page {
    width: min(calc(100vw - var(--desktop-content-left) - var(--desktop-content-right)), 920px) !important;
    padding-top: 14px !important;
  }

  body.auth-ready .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.auth-ready .access-grid {
    grid-template-columns: 1fr !important;
  }
}


/* v24 QBAD Pro logo integration */
:root {
  --logo-main: var(--text);
  --logo-accent: var(--accent);
}

.qbad-brand,
.topbar-logo,
.desktop-brand-logo {
  display: flex;
  align-items: center;
}

.qbad-brand-mark,
.topbar-brand-mark,
.desktop-qbad-mark {
  display: block;
  flex-shrink: 0;
  color: var(--logo-main);
}

.qbad-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .34em;
  line-height: 1;
  white-space: nowrap;
}

.qbad-word {
  color: var(--logo-main);
  font-weight: 900;
  letter-spacing: -.05em;
}

.qbad-pro {
  color: var(--logo-accent);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.04em;
}

.qbad-auth-brand {
  padding-right: 48px !important;
}

.qbad-brand-auth {
  gap: 14px;
  align-items: center;
}

.auth-brand-mark-wrap {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17, 184, 154, .12), rgba(17, 184, 154, .03));
  border: 1px solid rgba(17, 184, 154, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(17, 184, 154, .08);
}

.auth-brand-mark {
  width: 44px;
  height: 44px;
}

.auth-brand-copy {
  min-width: 0;
}

.auth-wordmark {
  font-size: 34px;
  letter-spacing: -.04em;
  margin-bottom: 6px;
}

.topbar-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px;
  color: var(--logo-main) !important;
  min-width: 0 !important;
}

.topbar-brand-mark {
  width: 28px;
  height: 28px;
}

.topbar-wordmark {
  font-size: 24px;
}

.desktop-brand {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.desktop-brand-logo {
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.desktop-brand-mark {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(17, 184, 154, .12), rgba(17, 184, 154, .03)) !important;
  border: 1px solid rgba(17, 184, 154, .12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--logo-main) !important;
}

.desktop-qbad-mark {
  width: 34px;
  height: 34px;
}

.desktop-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.desktop-brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

.desktop-brand span#desktop-room-name {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guest-mode .topbar-logo::after {
  margin-left: 4px !important;
}

html[data-theme="dark"] .auth-brand-mark-wrap,
html[data-theme="dark"] .desktop-brand-mark {
  background: linear-gradient(180deg, rgba(45, 212, 191, .12), rgba(45, 212, 191, .04)) !important;
  border-color: rgba(45, 212, 191, .16) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18) !important;
}

@media (max-width:520px) {
  .auth-wordmark {
    font-size: 28px;
  }

  .auth-brand-mark-wrap {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .auth-brand-mark {
    width: 38px;
    height: 38px;
  }

  .topbar-brand-mark {
    width: 24px;
    height: 24px;
  }

  .topbar-wordmark {
    font-size: 20px;
  }
}

@media (max-width:420px) {
  .topbar-logo {
    gap: 6px !important;
  }

  .topbar-brand-mark {
    width: 22px;
    height: 22px;
  }

  .topbar-wordmark {
    font-size: 18px;
  }
}

@media (min-width:900px) and (min-height:560px),
(min-width:768px) and (orientation:landscape) and (min-height:560px) {
  .topbar-logo {
    justify-content: flex-start !important;
  }

  .desktop-brand-wordmark {
    font-size: 22px !important;
  }

  .desktop-brand span#desktop-room-name {
    max-width: 170px;
  }
}


/* v25 Desktop balance pass + no-frame QBAD logo
   Scope: desktop / tablet landscape only. Mobile portrait keeps the existing layout. */

/* Remove decorative frame around the logo everywhere. The SVG itself remains theme-aware. */
.auth-brand-mark-wrap,
.desktop-brand-mark {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

html[data-theme="dark"] .auth-brand-mark-wrap,
html[data-theme="dark"] .desktop-brand-mark {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.auth-brand-mark-wrap {
  width: 56px !important;
  height: 56px !important;
}

.auth-brand-mark {
  width: 54px !important;
  height: 54px !important;
}

.desktop-brand-mark {
  width: 44px !important;
  height: 44px !important;
}

.desktop-qbad-mark {
  width: 42px !important;
  height: 42px !important;
}

/* Queue wrappers should not affect mobile. */
.desktop-queue-layout,
.desktop-queue-left,
.desktop-queue-right {
  display: contents;
}

@media (min-width:900px) and (min-height:560px),
(min-width:768px) and (orientation:landscape) and (min-height:560px) {
  :root {
    --desktop-sidebar-width: 280px;
    --desktop-sidebar-left: 16px;
    --desktop-sidebar-y: 16px;
    --desktop-content-gap: 18px;
    --desktop-content-right: 28px;
    --desktop-content-left: calc(var(--desktop-sidebar-left) + var(--desktop-sidebar-width) + var(--desktop-content-gap));
    --desktop-work-max: 1380px;
  }

  body.auth-ready {
    padding-left: var(--desktop-content-left) !important;
    padding-right: var(--desktop-content-right) !important;
  }

  body.auth-ready .page,
  body.auth-ready #page-queue,
  body.auth-ready #page-stats,
  body.auth-ready #page-settings {
    width: min(calc(100vw - var(--desktop-content-left) - var(--desktop-content-right)), var(--desktop-work-max)) !important;
    max-width: var(--desktop-work-max) !important;
    margin: 0 !important;
    padding: 18px 0 52px !important;
  }

  body.auth-ready .topbar {
    display: none !important;
  }

  /* Global desktop card rhythm */
  body.auth-ready .card,
  body.auth-ready .court-card,
  body.auth-ready .stat-card {
    border-radius: 22px !important;
  }

  body.auth-ready .card {
    padding: 18px !important;
    margin-bottom: 0 !important;
  }

  /* ---------- Queue page ---------- */
  body.auth-ready #page-queue.page.active {
    display: block !important;
  }

  body.auth-ready.queue-checkin-roster-mode #page-queue.page.active {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  body.auth-ready #page-queue .desktop-queue-layout {
    display: grid !important;
    grid-template-columns: minmax(320px, 420px) minmax(520px, 1fr);
    gap: 18px;
    align-items: start;
  }

  body.auth-ready #page-queue .desktop-queue-left,
  body.auth-ready #page-queue .desktop-queue-right {
    display: grid !important;
    gap: 14px;
    align-items: start;
    min-width: 0;
  }

  body.auth-ready #page-queue .desktop-queue-right {
    grid-template-rows: auto auto 1fr;
  }

  body.auth-ready #page-queue .card,
  body.auth-ready #page-queue .section-heading,
  body.auth-ready #page-queue .queue-filter-tabs,
  body.auth-ready #page-queue #active-courts {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.auth-ready #page-queue .section-heading {
    margin: 2px 0 0 !important;
    min-height: 46px;
    align-items: center;
  }

  body.auth-ready #page-queue .queue-filter-tabs {
    margin: 0 !important;
  }

  body.auth-ready #page-queue #active-courts {
    display: grid;
    gap: 14px;
  }

  /* ---------- Stats page ---------- */
  body.auth-ready #page-stats {
    display: none !important;
  }

  body.auth-ready #page-stats.page.active {
    display: block !important;
    max-width: var(--desktop-work-max) !important;
  }

  body.auth-ready #page-stats .stats-dashboard-head,
  body.auth-ready #page-stats .dashboard-summary,
  body.auth-ready #page-stats .stats-tabs,
  body.auth-ready #page-stats .stats-panel,
  body.auth-ready #page-stats .card {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.auth-ready #page-stats .stats-dashboard-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 16px !important;
  }

  body.auth-ready #page-stats .dashboard-summary {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
  }

  body.auth-ready #page-stats .stats-tabs {
    max-width: 640px !important;
    margin-bottom: 16px !important;
  }

  body.auth-ready #page-stats .stats-overview-compact {
    display: grid !important;
    grid-template-columns: minmax(250px, .8fr) minmax(320px, 1.2fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  body.auth-ready #page-stats .compact-status-card,
  body.auth-ready #page-stats .compact-list-card {
    grid-column: auto !important;
    min-height: 154px;
  }

  body.auth-ready #page-stats .status-mini-grid {
    grid-template-columns: 1fr 1fr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.auth-ready #page-stats .today-history-card {
    margin-top: 14px !important;
  }

  body.auth-ready #page-stats #stats-panel-alltime .alltime-players-card {
    max-width: none !important;
    width: 100% !important;
  }

  /* ---------- Settings pages ---------- */
  body.auth-ready #page-settings .settings-head,
  body.auth-ready #page-settings .settings-tabs,
  body.auth-ready #page-settings .settings-panel.active {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.auth-ready #page-settings .settings-tabs {
    margin-bottom: 16px !important;
  }

  body.auth-ready #settings-panel-players.active,
  body.auth-ready #settings-panel-courts.active {
    display: grid !important;
    grid-template-columns: minmax(320px, 420px) minmax(560px, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }

  body.auth-ready #settings-panel-players .settings-panel-head,
  body.auth-ready #settings-panel-courts .settings-panel-head {
    grid-column: 1 / -1 !important;
    margin-bottom: 0 !important;
  }

  body.auth-ready #settings-panel-players>.add-player-card,
  body.auth-ready #settings-panel-courts>.add-player-card {
    grid-column: 1 !important;
  }

  body.auth-ready #settings-panel-players>.card:not(.add-player-card),
  body.auth-ready #settings-panel-courts>.card:not(.add-player-card) {
    grid-column: 2 !important;
  }

  body.auth-ready #settings-panel-system.active {
    display: block !important;
  }

  body.auth-ready .settings-system-layout {
    display: block !important;
  }

  body.auth-ready .settings-system-flow {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    min-width: 0 !important;
    width: min(100%, 1040px) !important;
  }

  body.auth-ready #settings-panel-access.active {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.auth-ready #settings-panel-access .access-grid {
    grid-template-columns: minmax(340px, .9fr) minmax(440px, 1.1fr) !important;
    gap: 16px !important;
  }

  /* Expense is a settings sub-page; give it a dashboard layout instead of one narrow column. */
  body.auth-ready #settings-panel-expense.active {
    display: grid !important;
    grid-template-columns: minmax(340px, .9fr) minmax(460px, 1.1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    max-width: none !important;
    width: 100% !important;
  }

  body.auth-ready #settings-panel-expense .expense-header {
    grid-column: 1 / -1 !important;
    margin-bottom: 0 !important;
  }

  body.auth-ready #settings-panel-expense>.card {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.auth-ready #settings-panel-expense>.card:nth-of-type(1),
  body.auth-ready #settings-panel-expense>.card:nth-of-type(2) {
    grid-column: 1 !important;
  }

  body.auth-ready #settings-panel-expense>.card:nth-of-type(3) {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    position: sticky;
    top: 18px;
  }

  /* Desktop logo sizing without frame */
  body.auth-ready .desktop-brand {
    padding: 18px 18px 12px !important;
  }

  body.auth-ready .desktop-brand-logo {
    gap: 10px !important;
  }

  body.auth-ready .desktop-brand-wordmark {
    font-size: 23px !important;
  }

  body.auth-ready .desktop-brand span#desktop-room-name {
    max-width: 178px !important;
  }
}

@media (min-width:900px) and (max-width:1120px) and (min-height:560px),
(min-width:768px) and (max-width:1120px) and (orientation:landscape) and (min-height:560px) {
  :root {
    --desktop-sidebar-width: 244px;
    --desktop-sidebar-left: 14px;
    --desktop-sidebar-y: 14px;
    --desktop-content-gap: 14px;
    --desktop-content-right: 16px;
    --desktop-work-max: 980px;
  }

  body.auth-ready #page-queue .desktop-queue-layout,
  body.auth-ready #settings-panel-players.active,
  body.auth-ready #settings-panel-courts.active,
  body.auth-ready #settings-panel-expense.active,
  body.auth-ready #settings-panel-access .access-grid {
    grid-template-columns: 1fr !important;
  }

  body.auth-ready #settings-panel-players>.add-player-card,
  body.auth-ready #settings-panel-courts>.add-player-card,
  body.auth-ready #settings-panel-players>.card:not(.add-player-card),
  body.auth-ready #settings-panel-courts>.card:not(.add-player-card),
  body.auth-ready #settings-panel-expense>.card:nth-of-type(1),
  body.auth-ready #settings-panel-expense>.card:nth-of-type(2),
  body.auth-ready #settings-panel-expense>.card:nth-of-type(3) {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: static !important;
  }

  body.auth-ready #page-stats .stats-overview-compact {
    grid-template-columns: 1fr 1fr !important;
  }

  body.auth-ready #page-stats .compact-status-card {
    grid-column: 1 / -1 !important;
  }

  body.auth-ready #page-stats .dashboard-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* v26 logo proportion fix + check-in modal layering polish */
.qbad-brand-mark,
.auth-brand-mark,
.topbar-brand-mark,
.desktop-qbad-mark {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  overflow: visible !important;
  transform: none !important;
}

.qbad-brand-auth,
.topbar-logo,
.desktop-brand-logo {
  flex-wrap: nowrap !important;
}

.auth-brand-mark-wrap,
.desktop-brand-mark {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

.auth-brand-mark-wrap {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
}

.auth-brand-mark {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
}

.topbar-brand-mark {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
}

.desktop-brand-mark {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

.desktop-qbad-mark {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
}

.auth-brand-copy,
.desktop-brand-copy {
  min-width: 0 !important;
}

.qbad-wordmark,
.desktop-brand-wordmark,
.topbar-wordmark,
.auth-wordmark {
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 1 auto !important;
}

.topbar {
  z-index: 720 !important;
}

/* Desktop sidebar should stay above the special Check-in modal, but below regular modals */
@media (min-width:900px) and (min-height:560px),
(min-width:768px) and (orientation:landscape) and (min-height:560px) {
  body.auth-ready .desktop-sidebar {
    z-index: 820 !important;
  }
}

/* Mobile: keep the header visible and tappable while Check-in modal is open */
@media (max-width:767px) {
  body.auth-ready .topbar {
    display: flex !important;
    z-index: 720 !important;
  }

  #checkin-modal.modal-backdrop {
    padding-top: calc(72px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  #checkin-modal .checkin-sheet {
    height: min(760px, calc(100dvh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

@supports not (height:100dvh) {
  @media (max-width:767px) {
    #checkin-modal .checkin-sheet {
      height: min(760px, calc(100vh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
      max-height: calc(100vh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }
  }
}

@media (max-width:520px) {
  .topbar-logo {
    gap: 8px !important;
  }

  .topbar-brand-mark {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  .topbar-wordmark {
    font-size: 19px !important;
  }

  .auth-brand-mark-wrap {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
  }

  .auth-brand-mark {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }
}


/* v27: use uploaded SVG file as the single source of truth for QBAD Pro logo */
.qbad-logo-img {
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  max-width: 100% !important;
  max-height: 100% !important;
  flex: 0 0 auto !important;
  aspect-ratio: 1 / 1 !important;
  transform: none !important;
  filter: none;
}

.auth-brand-mark-wrap,
.desktop-brand-mark {
  overflow: visible !important;
}

.auth-brand-mark {
  width: 52px !important;
  height: 52px !important;
}

.topbar-brand-mark {
  width: 28px !important;
  height: 28px !important;
}

.desktop-qbad-mark {
  width: 38px !important;
  height: 38px !important;
}

/* Keep the uploaded file looking crisp on dark backgrounds without adding any frame. */
html[data-theme="dark"] .qbad-logo-img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18));
}

@media(max-width:520px) {
  .auth-brand-mark {
    width: 50px !important;
    height: 50px !important;
  }

  .topbar-brand-mark {
    width: 26px !important;
    height: 26px !important;
  }
}


/* v28 Desktop navbar polish + SVG logo dark-mode white */
.desktop-window-dots {
  display: none !important;
}

html[data-theme="dark"] .qbad-logo-img {
  filter: brightness(0) invert(1) drop-shadow(0 8px 16px rgba(0, 0, 0, .20)) !important;
  opacity: .96;
}

/* Keep uploaded SVG crisp and proportional */
.qbad-logo-img,
.auth-brand-mark,
.topbar-brand-mark,
.desktop-qbad-mark {
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: 1 / 1 !important;
}

/* Make the brand block fit better inside desktop sidebar */
@media (min-width:900px) and (min-height:560px),
(min-width:768px) and (orientation:landscape) and (min-height:560px) {
  body.auth-ready .desktop-brand {
    padding: 22px 18px 14px !important;
  }

  body.auth-ready .desktop-brand-logo {
    gap: 12px !important;
    align-items: center !important;
  }

  body.auth-ready .desktop-brand-mark {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  body.auth-ready .desktop-qbad-mark {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  body.auth-ready .desktop-brand-copy {
    gap: 3px !important;
  }

  body.auth-ready .desktop-brand-wordmark {
    font-size: 19px !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
  }

  body.auth-ready .desktop-brand span#desktop-room-name {
    max-width: 170px !important;
    font-size: 11.5px !important;
    margin-top: 0 !important;
    color: var(--muted) !important;
  }

  /* Gear moved from Management into the user card */
  body.auth-ready .desktop-user-card {
    min-height: 60px !important;
    padding: 9px 9px 9px 10px !important;
    gap: 9px !important;
  }

  .desktop-user-settings-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(125, 132, 145, .18);
    background: rgba(255, 255, 255, .46);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
    flex: 0 0 auto;
  }

  .desktop-user-settings-btn svg {
    width: 17px;
    height: 17px;
  }

  .desktop-user-settings-btn:hover,
  .desktop-user-settings-btn.active {
    color: var(--accent);
    border-color: rgba(17, 184, 154, .32);
    background: rgba(17, 184, 154, .10);
  }

  html[data-theme="dark"] .desktop-user-settings-btn {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(148, 163, 184, .16);
    color: #aab7ca;
  }

  html[data-theme="dark"] .desktop-user-settings-btn:hover,
  html[data-theme="dark"] .desktop-user-settings-btn.active {
    color: var(--accent);
    border-color: rgba(45, 212, 191, .36);
    background: rgba(45, 212, 191, .10);
  }
}

@media(max-width:520px) {

  html[data-theme="dark"] .topbar-brand-mark,
  html[data-theme="dark"] .auth-brand-mark {
    filter: brightness(0) invert(1) drop-shadow(0 6px 12px rgba(0, 0, 0, .18)) !important;
  }
}


/* v29 Responsive header fit polish
   Scope: mobile + portrait/tablet header only. Desktop sidebar layout remains unchanged. */
@media (max-width:899px),
(orientation:portrait) {

  body.auth-ready .topbar,
  .topbar {
    height: 60px !important;
    min-height: 60px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    border-radius: 0 0 18px 18px !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .topbar .theme-toggle {
    grid-column: 1 !important;
    justify-self: start !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
  }

  .topbar-logo {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .topbar-brand-mark {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
  }

  .topbar-wordmark {
    font-size: 20px !important;
    line-height: 1 !important;
    max-width: 118px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .topbar-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    position: relative !important;
    right: auto !important;
    width: auto !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .header-logout-btn,
  .header-settings-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 36px !important;
  }

  .header-logout-btn svg,
  .header-settings-btn svg,
  .topbar .theme-toggle svg {
    width: 17px !important;
    height: 17px !important;
  }

  .topbar-actions .sync-dot {
    position: absolute !important;
    right: -1px !important;
    top: 5px !important;
    width: 8px !important;
    height: 8px !important;
    border: 2px solid var(--card) !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  .topbar-actions .room-user-chip {
    display: none !important;
  }
}

@media (max-width:380px) {
  .topbar {
    padding: 0 10px !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .topbar .theme-toggle,
  .header-logout-btn,
  .header-settings-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    flex-basis: 34px !important;
  }

  .topbar-logo {
    gap: 6px !important;
  }

  .topbar-brand-mark {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
  }

  .topbar-wordmark {
    font-size: 18px !important;
    max-width: 104px !important;
  }

  .topbar-actions {
    gap: 5px !important;
    height: 38px !important;
  }
}

@media (max-width:340px) {
  .topbar-wordmark {
    max-width: 92px !important;
    font-size: 17px !important;
  }

  .topbar-brand-mark {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }

  .topbar-actions {
    gap: 4px !important;
  }
}

/* v30 Responsive wordmark clipping fix
   Fix: italic "Pro" could be clipped by overflow/max-width in mobile header. */
.topbar-wordmark,
.qbad-wordmark {
  overflow: visible !important;
  text-overflow: clip !important;
  padding-right: .16em !important;
}

.qbad-pro {
  display: inline-block !important;
  padding-right: .14em !important;
  margin-right: -.04em !important;
  line-height: 1.12 !important;
}

.qbad-word {
  display: inline-block !important;
  line-height: 1.12 !important;
}

@media (max-width:899px),
(orientation:portrait) {
  .topbar-logo {
    overflow: visible !important;
  }

  .topbar-wordmark {
    max-width: none !important;
    min-width: max-content !important;
    line-height: 1.12 !important;
  }
}

@media (max-width:380px) {
  .topbar-wordmark {
    max-width: none !important;
    font-size: 17.5px !important;
  }
}

@media (max-width:340px) {
  .topbar-wordmark {
    max-width: none !important;
    font-size: 16.5px !important;
  }
}


/* =========================================================
   QBAD Pro v31
   Desktop Navbar Settings + Account UX Polish
   Desktop only — does not affect responsive/mobile navigation
   ========================================================= */

@media (min-width:900px) and (min-height:560px),
(min-width:768px) and (orientation:landscape) and (min-height:560px) {

  /* Rename is handled in index.html: Management -> Settings */

  .desktop-account-actions {
    padding-top: 10px !important;
    padding-bottom: 4px !important;
    margin-top: 2px !important;
    border-top: 1px solid rgba(125, 132, 145, .12) !important;
  }

  html[data-theme="dark"] .desktop-account-actions {
    border-top-color: rgba(148, 163, 184, .10) !important;
  }

  .desktop-account-actions .desktop-nav-label {
    font-size: 10.5px !important;
    letter-spacing: .8px !important;
    opacity: .48 !important;
    padding-bottom: 6px !important;
  }

  .desktop-account-actions .desktop-nav-item {
    min-height: 38px !important;
    border-radius: 13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    opacity: .64 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .desktop-account-actions .desktop-nav-item+.desktop-nav-item {
    margin-top: 3px !important;
  }

  .desktop-account-actions .desktop-nav-item svg,
  .desktop-account-actions .desktop-theme-icon {
    width: 17px !important;
    height: 17px !important;
    opacity: .78 !important;
  }

  .desktop-account-actions .desktop-nav-item:hover {
    opacity: .94 !important;
    background: rgba(125, 132, 145, .065) !important;
    border-color: rgba(125, 132, 145, .08) !important;
    color: var(--text) !important;
    transform: none !important;
  }

  html[data-theme="dark"] .desktop-account-actions .desktop-nav-item:hover {
    background: rgba(255, 255, 255, .045) !important;
    border-color: rgba(148, 163, 184, .10) !important;
  }

  .desktop-account-actions .desktop-theme-action:hover svg,
  .desktop-account-actions .desktop-theme-action:hover .desktop-theme-icon {
    color: var(--accent) !important;
  }

  .desktop-account-actions .desktop-logout-action {
    color: var(--muted) !important;
    opacity: .50 !important;
  }

  .desktop-account-actions .desktop-logout-action:hover {
    color: var(--out) !important;
    opacity: .86 !important;
    background: rgba(220, 38, 38, .055) !important;
    border-color: rgba(220, 38, 38, .10) !important;
  }

  .desktop-user-card {
    margin-top: 4px !important;
  }
}

/* =========================================================
   Modal Header Theme Fix
   Keeps Light Mode modal headers light, Dark Mode headers dark
   ========================================================= */

html[data-theme="light"] .modal-header,
html[data-theme="light"] .history-modal-header {
  background: rgba(255, 255, 255, .94) !important;
  color: var(--text) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html[data-theme="light"] .modal-header h2,
html[data-theme="light"] .history-modal-header h2,
html[data-theme="light"] .modal-header p,
html[data-theme="light"] .history-modal-header p,
html[data-theme="light"] .modal-title,
html[data-theme="light"] .history-modal-title {
  color: var(--text) !important;
}

html[data-theme="light"] .modal-header .muted,
html[data-theme="light"] .history-modal-header .muted,
html[data-theme="light"] .modal-subtitle,
html[data-theme="light"] .history-modal-subtitle {
  color: var(--muted) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .history-modal-header {
  background: rgba(7, 12, 24, .92) !important;
  color: #f8fafc !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}


/* =========================================================
   QBAD Pro v32 - Desktop top-right account action section
   Desktop only: move Theme + Logout out of sidebar
   ========================================================= */

.desktop-top-actions {
  display: none;
}

@media (min-width:900px) and (min-height:560px),
(min-width:768px) and (orientation:landscape) and (min-height:560px) {

  body.auth-ready .desktop-top-actions {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 830;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  html[data-theme="dark"] body.auth-ready .desktop-top-actions {
    background: rgba(10, 16, 30, .70);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  }

  body.auth-checking .desktop-top-actions,
  body.auth-required .desktop-top-actions,
  body.auth-no-access .desktop-top-actions {
    display: none !important;
  }

  .desktop-top-action-btn {
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(15, 23, 42, .045);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
    opacity: 1;
  }

  .desktop-top-action-btn:hover {
    opacity: 1;
    color: var(--text);
    background: rgba(15, 23, 42, .08);
    border-color: rgba(15, 23, 42, .14);
    transform: translateY(-1px);
  }

  html[data-theme="dark"] .desktop-top-action-btn {
    border-color: rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .07);
    color: var(--text);
  }

  html[data-theme="dark"] .desktop-top-action-btn:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .18);
  }

  .desktop-top-action-btn svg,
  .desktop-top-action-btn .desktop-theme-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  .desktop-top-logout-action {
    color: rgb(220, 38, 38);
    opacity: 1;
  }

  .desktop-top-logout-action:hover {
    color: rgb(220, 38, 38);
    background: rgba(239, 68, 68, .10);
    border-color: rgba(239, 68, 68, .18);
    opacity: 1;
  }

  html[data-theme="dark"] .desktop-top-logout-action {
    color: rgb(248, 113, 113);
    opacity: 1;
  }

  html[data-theme="dark"] .desktop-top-logout-action:hover {
    color: rgb(248, 113, 113);
    background: rgba(248, 113, 113, .12);
    border-color: rgba(248, 113, 113, .20);
  }

  .desktop-top-theme-action .desktop-theme-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
  }

  @media (max-width:1180px) {
    body.auth-ready .desktop-top-actions {
      right: 16px;
      top: 16px;
      padding: 7px;
      gap: 6px;
    }

    .desktop-top-action-btn {
      width: 38px;
      padding: 0;
    }

    .desktop-top-action-btn span:not(.desktop-theme-icon) {
      display: none;
    }
  }
}

@media (max-width:899px),
(orientation:portrait) {
  .desktop-top-actions {
    display: none !important;
  }
}


/* =========================================================
   QBAD Pro v36 — Member Permission + User Card Status Dot Fix
   Scope: visual permission only; JS guard still protects actions.
   ========================================================= */

/* Remove unclear red status dot from desktop user card */
.desktop-user-card .sync-dot,
.desktop-user-card .desktop-sync-dot {
  display: none !important;
}

/* Member role: hide owner/admin-only entry points */
body.role-member-mode #nav-expense,
body.role-member-mode [data-nav-target="expense"],
body.role-member-mode [data-nav-target="settings-courts"],
body.role-member-mode #settings-tab-courts,
body.role-member-mode #settings-tab-access,
body.role-member-mode #settings-panel-players .add-player-card,
body.role-member-mode .deleted-open-btn,
body.role-member-mode .edit-player-delete-link,
body.role-member-mode .bulk-chip.danger {
  display: none !important;
}

/* Guest keeps the same restricted UX */
body.guest-mode #nav-expense,
body.guest-mode [data-nav-target="expense"],
body.guest-mode [data-nav-target="settings-courts"],
body.guest-mode #settings-tab-courts,
body.guest-mode #settings-panel-players .add-player-card,
body.guest-mode .deleted-open-btn,
body.guest-mode .edit-player-delete-link,
body.guest-mode .bulk-chip.danger {
  display: none !important;
}

/* Keep user card visually balanced after removing the status dot */
.desktop-user-card {
  gap: 10px;
}

.desktop-user-settings-btn {
  margin-left: auto;
}

/* =========================================================
   QBAD Pro v37 — Desktop top actions overlap fix
   Fix: prevent the top-right Theme/Logout action box from overlapping
   the Stats "ดูสรุปย้อนหลัง" button and Expense history button.
   Scope: Desktop / tablet landscape only. Mobile is untouched.
   ========================================================= */

@media (min-width:900px) and (min-height:560px),
(min-width:768px) and (orientation:landscape) and (min-height:560px) {

  body.auth-ready #page-stats .stats-dashboard-head,
  body.auth-ready #page-settings .settings-expense-panel .expense-header {
    box-sizing: border-box !important;
    padding-right: 0 !important;
  }

  body.auth-ready #page-stats .stats-history-entry-btn,
  body.auth-ready #page-settings .settings-expense-panel .stats-history-entry-btn {
    position: relative !important;
    z-index: 1 !important;
    margin-left: auto !important;
  }

  body.auth-ready .desktop-top-actions {
    z-index: 840 !important;
  }
}

@media (min-width:900px) and (max-width:1180px) and (min-height:560px),
(min-width:768px) and (max-width:1180px) and (orientation:landscape) and (min-height:560px) {

  body.auth-ready #page-stats .stats-dashboard-head,
  body.auth-ready #page-settings .settings-expense-panel .expense-header {
    padding-right: 0 !important;
  }
}

@media (min-width:900px) and (max-width:980px) and (min-height:560px),
(min-width:768px) and (max-width:980px) and (orientation:landscape) and (min-height:560px) {

  body.auth-ready #page-stats .stats-dashboard-head {
    align-items: flex-start !important;
  }

  body.auth-ready #page-stats .stats-history-entry-btn {
    min-width: 0 !important;
    max-width: 240px !important;
  }
}

/* =========================================================
   QBAD Pro v41 — Responsive history modal layer fix
   Fix: session/expense history modal must not be hidden behind
   mobile header or bottom navigation. Check-in modal behavior is untouched.
   ========================================================= */

@media (max-width:899px),
(orientation:portrait) {

  /* History/detail modals are primary overlays on mobile */
  #session-history-modal,
  #alltime-session-picker-modal,
  #queue-explain-modal,
  #expense-history-modal,
  #expense-edit-modal,
  #expense-revision-modal,
  #deleted-players-modal,
  #deleted-session-history-modal,
  #deleted-expense-history-modal,
  #edit-player-modal,
  #admin-pin-modal {
    z-index: 1400 !important;
    align-items: center !important;
    justify-content: center !important;
    padding:
      calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  #session-history-modal .modal-sheet,
  #alltime-session-picker-modal .modal-sheet,
  #queue-explain-modal .modal-sheet,
  #expense-history-modal .modal-sheet,
  #expense-edit-modal .modal-sheet,
  #expense-revision-modal .modal-sheet,
  #deleted-players-modal .modal-sheet,
  #deleted-session-history-modal .modal-sheet,
  #deleted-expense-history-modal .modal-sheet,
  #edit-player-modal .modal-sheet,
  #admin-pin-modal .modal-sheet {
    position: relative !important;
    z-index: 1410 !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    max-height:
      calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #session-history-modal .modal-header,
  #alltime-session-picker-modal .modal-header,
  #queue-explain-modal .modal-header,
  #expense-history-modal .modal-header,
  #expense-edit-modal .modal-header,
  #expense-revision-modal .modal-header,
  #deleted-players-modal .modal-header,
  #deleted-session-history-modal .modal-header,
  #deleted-expense-history-modal .modal-header,
  #edit-player-modal .modal-header,
  #admin-pin-modal .modal-header {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #session-history-modal .modal-body,
  #alltime-session-picker-modal .modal-body,
  #queue-explain-modal .modal-body,
  #expense-history-modal .modal-body,
  #expense-edit-modal .modal-body,
  #expense-revision-modal .modal-body,
  #deleted-players-modal .modal-body,
  #deleted-session-history-modal .modal-body,
  #deleted-expense-history-modal .modal-body,
  #edit-player-modal .modal-body,
  #admin-pin-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 18px !important;
  }

  /* Make sure app chrome never floats over these modals */
  body:has(#session-history-modal:not(.hidden)) .topbar,
  body:has(#alltime-session-picker-modal:not(.hidden)) .topbar,
  body:has(#queue-explain-modal:not(.hidden)) .topbar,
  body:has(#expense-history-modal:not(.hidden)) .topbar,
  body:has(#expense-edit-modal:not(.hidden)) .topbar,
  body:has(#expense-revision-modal:not(.hidden)) .topbar,
  body:has(#deleted-players-modal:not(.hidden)) .topbar,
  body:has(#deleted-session-history-modal:not(.hidden)) .topbar,
  body:has(#deleted-expense-history-modal:not(.hidden)) .topbar,
  body:has(#edit-player-modal:not(.hidden)) .topbar,
  body:has(#admin-pin-modal:not(.hidden)) .topbar,
  body:has(#queue-preview-wizard-modal:not(.hidden)) .topbar,
  body:has(#session-history-modal:not(.hidden)) .bottom-nav,
  body:has(#alltime-session-picker-modal:not(.hidden)) .bottom-nav,
  body:has(#queue-explain-modal:not(.hidden)) .bottom-nav,
  body:has(#expense-history-modal:not(.hidden)) .bottom-nav,
  body:has(#expense-edit-modal:not(.hidden)) .bottom-nav,
  body:has(#expense-revision-modal:not(.hidden)) .bottom-nav,
  body:has(#deleted-players-modal:not(.hidden)) .bottom-nav,
  body:has(#deleted-session-history-modal:not(.hidden)) .bottom-nav,
  body:has(#deleted-expense-history-modal:not(.hidden)) .bottom-nav,
  body:has(#edit-player-modal:not(.hidden)) .bottom-nav,
  body:has(#admin-pin-modal:not(.hidden)) .bottom-nav,
  body:has(#queue-preview-wizard-modal:not(.hidden)) .bottom-nav {
    z-index: 300 !important;
    pointer-events: none !important;
  }

  /* Keep Check-in modal special: bottom nav can remain clickable there */
  #checkin-modal {
    z-index: 500 !important;
  }

  #checkin-modal .modal-sheet {
    z-index: 610 !important;
  }
}

@media (max-width:420px) {

  #session-history-modal,
  #alltime-session-picker-modal,
  #queue-explain-modal,
  #expense-history-modal,
  #expense-edit-modal,
  #expense-revision-modal,
  #deleted-players-modal,
  #edit-player-modal,
  #admin-pin-modal {
    padding:
      calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  #session-history-modal .modal-sheet,
  #alltime-session-picker-modal .modal-sheet,
  #queue-explain-modal .modal-sheet,
  #expense-history-modal .modal-sheet,
  #expense-edit-modal .modal-sheet,
  #expense-revision-modal .modal-sheet,
  #deleted-players-modal .modal-sheet,
  #edit-player-modal .modal-sheet,
  #admin-pin-modal .modal-sheet {
    max-height:
      calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   QBAD Pro v42 — Player Dashboard responsive modal layer fix
   Fix: player dashboard modal must not sit under mobile topbar/bottom nav.
   Scope: mobile/tablet portrait only. Desktop unchanged.
   ========================================================= */

@media (max-width:899px),
(orientation:portrait) {

  #player-dashboard-modal {
    z-index: 1400 !important;
    align-items: center !important;
    justify-content: center !important;
    padding:
      calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  #player-dashboard-modal .modal-sheet,
  #player-dashboard-modal .player-dashboard-sheet {
    position: relative !important;
    z-index: 1410 !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    max-height:
      calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 26px !important;
  }

  @supports not (height:100dvh) {

    #player-dashboard-modal .modal-sheet,
    #player-dashboard-modal .player-dashboard-sheet {
      max-height:
        calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }
  }

  #player-dashboard-modal .modal-header {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #player-dashboard-modal .modal-body,
  #player-dashboard-modal .player-dashboard-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 18px !important;
  }

  body:has(#player-dashboard-modal:not(.hidden)) .topbar,
  body:has(#player-dashboard-modal:not(.hidden)) .bottom-nav {
    z-index: 300 !important;
    pointer-events: none !important;
  }
}

@media (max-width:420px) {
  #player-dashboard-modal {
    padding:
      calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  #player-dashboard-modal .modal-sheet,
  #player-dashboard-modal .player-dashboard-sheet {
    max-height:
      calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 24px !important;
  }
}

/* =========================================================
   QBAD Pro v44
   Premium Stats Segmented Control + Icons
   Scope: Stats page only
========================================================= */

#page-stats .stats-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: min(100%, 680px) !important;
  padding: 6px !important;
  margin: 18px 0 18px !important;
  border-radius: 22px !important;
  background: rgba(10, 18, 35, .72) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

#page-stats .stats-tab {
  position: relative !important;
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}

#page-stats .stats-tab i {
  font-size: 14px !important;
  line-height: 1 !important;
  opacity: .92 !important;
}

#page-stats .stats-tab.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(99, 102, 241, .14)) !important;
  border-color: rgba(34, 211, 238, .20) !important;
  box-shadow: 0 8px 30px rgba(34, 211, 238, .13), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  transform: translateY(-1px) !important;
}

#page-stats .stats-tab:not(.active):hover {
  background: rgba(255, 255, 255, .05) !important;
  color: var(--text) !important;
}

html[data-theme="light"] #page-stats .stats-tabs {
  background: rgba(255, 255, 255, .76) !important;
  border-color: rgba(15, 23, 42, .07) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important;
}

html[data-theme="light"] #page-stats .stats-tab {
  color: #64748b !important;
}

html[data-theme="light"] #page-stats .stats-tab.active {
  color: #0f172a !important;
  background: linear-gradient(135deg, rgba(20, 184, 166, .14), rgba(59, 130, 246, .10)) !important;
  border-color: rgba(20, 184, 166, .18) !important;
  box-shadow: 0 8px 24px rgba(20, 184, 166, .12), inset 0 1px 0 rgba(255, 255, 255, .70) !important;
}

html[data-theme="light"] #page-stats .stats-tab:not(.active):hover {
  background: rgba(15, 23, 42, .045) !important;
  color: #0f172a !important;
}

@media(max-width:899px), (orientation:portrait) {
  #page-stats .stats-tabs {
    width: 100% !important;
    margin-top: 14px !important;
    margin-bottom: 16px !important;
    border-radius: 20px !important;
  }

  #page-stats .stats-tab {
    height: 48px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    gap: 8px !important;
    border-radius: 15px !important;
  }

  #page-stats .stats-tab i {
    font-size: 13px !important;
  }
}

@media(max-width:360px) {
  #page-stats .stats-tab {
    font-size: 13px !important;
    gap: 6px !important;
  }
}


/* =========================================================
   QBAD Pro v45
   Stats tabs desktop fit + All-time date range filter
   Scope: Stats page only
========================================================= */

#page-stats .stats-tabs.stats-tabs-two {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 16px 0 18px !important;
  padding: 6px !important;
}

@media (min-width:900px) and (orientation:landscape) {
  #page-stats .stats-tabs.stats-tabs-two {
    min-height: 58px !important;
  }

  #page-stats .stats-tabs.stats-tabs-two .stats-tab {
    height: 46px !important;
  }
}

.alltime-range-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 12px;
}

.alltime-range-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px;
  border-radius: 18px;
  background: rgba(10, 18, 35, .48);
  border: 1px solid rgba(255, 255, 255, .06);
}

.alltime-session-range-panel {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg3);
}

.alltime-session-range-panel.hidden {
  display: none;
}

.alltime-session-range-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.alltime-session-range-card:hover {
  border-color: rgba(17, 184, 154, .35);
  background: rgba(17, 184, 154, .05);
}

.alltime-session-range-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alltime-session-range-card-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.alltime-session-range-card-value {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  word-break: break-word;
}

.alltime-session-range-card-action {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 184, 154, .1);
}

.alltime-session-range-hint {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 600;
}

.alltime-session-date-filter {
  margin: 0 0 8px;
}

.alltime-session-date-filter-toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(100, 116, 139, .18);
  border-radius: 13px;
  background: rgba(248, 250, 252, .78);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.alltime-session-date-filter-toggle:hover,
.alltime-session-date-filter-toggle.open {
  border-color: rgba(17, 184, 154, .36);
  background: rgba(17, 184, 154, .055);
}

.alltime-session-date-filter-toggle:focus-visible,
.alltime-session-date-preset:focus-visible,
.alltime-session-custom-date-trigger:focus-visible {
  outline: 3px solid rgba(17, 184, 154, .18);
  outline-offset: 2px;
}

.alltime-session-date-filter-toggle>.material-symbols-outlined:first-child {
  flex: 0 0 auto;
  font-size: 19px;
  color: var(--accent);
}

.alltime-session-date-filter-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alltime-session-date-filter-copy small,
.alltime-session-custom-date-trigger small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.alltime-session-date-filter-copy strong,
.alltime-session-custom-date-trigger strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.alltime-session-date-filter-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(100, 116, 139, .09);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.alltime-session-date-filter-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  transition: transform .16s ease;
}

.alltime-session-date-filter-toggle.open .alltime-session-date-filter-chevron {
  transform: rotate(180deg);
}

.alltime-session-date-filter-panel {
  padding: 8px 0 0;
}

.alltime-session-date-filter-panel.hidden {
  display: none;
}

.alltime-session-date-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.alltime-session-date-preset {
  min-width: 0;
  min-height: 44px;
  padding: 4px;
  border: 1px solid rgba(100, 116, 139, .17);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.alltime-session-date-preset:hover,
.alltime-session-date-preset.active {
  border-color: rgba(17, 184, 154, .34);
  background: rgba(17, 184, 154, .09);
  color: var(--accent);
}

.alltime-session-custom-date-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  border: 0;
  border-radius: 11px;
  background: rgba(100, 116, 139, .06);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.alltime-session-custom-date-trigger.active,
.alltime-session-custom-date-trigger:hover {
  background: rgba(17, 184, 154, .08);
}

.alltime-session-custom-date-trigger>.material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 18px;
}

.alltime-session-custom-date-trigger>span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alltime-session-date-range-input,
.alltime-session-date-range-alt-input {
  display: none !important;
}

.flatpickr-calendar.alltime-session-date-filter-calendar {
  z-index: 1420 !important;
}

@media (min-width: 768px) {
  .flatpickr-calendar.alltime-session-date-filter-calendar {
    position: fixed !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }
}

.flatpickr-calendar.alltime-session-date-filter-calendar .flatpickr-months {
  position: relative;
  min-height: 44px;
}

.flatpickr-calendar.alltime-session-date-filter-calendar .flatpickr-prev-month,
.flatpickr-calendar.alltime-session-date-filter-calendar .flatpickr-next-month {
  top: 0;
  min-width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.alltime-session-picker-date-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: rgba(248, 250, 252, .94);
}

.alltime-session-picker-date-summary>.material-symbols-outlined {
  color: var(--muted);
  font-size: 16px;
  text-align: center;
}

.alltime-session-picker-date-box {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(100, 116, 139, .2);
  border-radius: 11px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.alltime-session-picker-date-box:hover:not(:disabled) {
  border-color: rgba(17, 184, 154, .46);
}

.alltime-session-picker-date-box:focus-visible {
  outline: 3px solid rgba(17, 184, 154, .2);
  outline-offset: 1px;
}

.alltime-session-picker-date-box:disabled {
  cursor: default;
  opacity: .72;
}

.alltime-session-picker-date-box small {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
}

.alltime-session-picker-date-box strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.alltime-session-picker-date-box.selected {
  border-color: rgba(17, 184, 154, .46);
  background: rgba(17, 184, 154, .08);
}

.alltime-session-picker-date-box.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(17, 184, 154, .1);
}

.alltime-session-date-picker-focus-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1415;
  border: 0;
  background: rgba(8, 12, 20, .56);
  -webkit-backdrop-filter: blur(7px) saturate(.72);
  backdrop-filter: blur(7px) saturate(.72);
  cursor: default;
}

.alltime-session-date-picker-focus-backdrop.hidden {
  display: none;
}

html[data-theme="dark"] .alltime-session-date-picker-focus-backdrop {
  background: rgba(0, 0, 0, .64);
  -webkit-backdrop-filter: blur(8px) saturate(.64);
  backdrop-filter: blur(8px) saturate(.64);
}

html[data-theme="dark"] .alltime-session-picker-date-summary {
  background: rgba(20, 22, 38, .96);
}

html[data-theme="dark"] .alltime-session-picker-date-box {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .alltime-session-picker-date-box.selected {
  border-color: rgba(17, 184, 154, .55);
  background: rgba(17, 184, 154, .13);
}

@media (prefers-reduced-transparency: reduce) {
  .alltime-session-date-picker-focus-backdrop {
    background: rgba(8, 12, 20, .78);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.flatpickr-calendar.alltime-session-date-filter-calendar .flatpickr-day.startRange,
.flatpickr-calendar.alltime-session-date-filter-calendar .flatpickr-day.endRange,
.flatpickr-calendar.alltime-session-date-filter-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar.alltime-session-date-filter-calendar .flatpickr-day.endRange:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.flatpickr-calendar.alltime-session-date-filter-calendar .flatpickr-day.inRange {
  border-color: transparent;
  background: rgba(17, 184, 154, .13);
  box-shadow: -5px 0 0 rgba(17, 184, 154, .13), 5px 0 0 rgba(17, 184, 154, .13);
  color: var(--text);
}

.alltime-session-filter-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.alltime-session-filter-empty>p {
  margin: 0;
}

.alltime-session-filter-empty>.material-symbols-outlined {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 24px;
}

.alltime-session-filter-empty>.empty-action-btn {
  margin-top: 4px;
}

html[data-theme="dark"] .alltime-session-date-filter-toggle {
  background: rgba(30, 30, 53, .72);
  border-color: var(--border);
}

html[data-theme="dark"] .alltime-session-custom-date-trigger {
  background: rgba(255, 255, 255, .045);
}

.alltime-session-picker-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alltime-session-pick-item {
  width: 100%;
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, .9);
  background: rgba(255, 255, 255, .72);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.alltime-session-pick-item:hover {
  border-color: rgba(17, 184, 154, .28);
}

.alltime-session-pick-item:focus-visible,
.alltime-session-picker-footer button:focus-visible {
  outline: 3px solid rgba(34, 211, 238, .32);
  outline-offset: 2px;
}

.alltime-session-pick-item.selected {
  border-color: rgba(17, 184, 154, .45);
  background: rgba(17, 184, 154, .08);
  box-shadow: 0 8px 20px rgba(17, 184, 154, .1);
}

.alltime-session-pick-main {
  min-width: 0;
}

.alltime-session-pick-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.alltime-session-pick-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.32;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.alltime-session-pick-top-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.alltime-session-pick-sub {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.alltime-session-pick-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(100, 116, 139, .32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--accent);
  background: rgba(255, 255, 255, .65);
}

.alltime-session-pick-item.selected .alltime-session-pick-check {
  border-color: rgba(17, 184, 154, .42);
  background: rgba(17, 184, 154, .18);
}

.alltime-session-picker-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.alltime-session-picker-selection {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.alltime-session-picker-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alltime-session-picker-actions .btn {
  min-width: 108px;
}

.alltime-session-picker-actions .btn:disabled {
  cursor: not-allowed;
  filter: saturate(.55);
  opacity: .42;
}

html[data-theme="dark"] .alltime-session-range-panel {
  background: rgba(30, 30, 53, .72);
}

html[data-theme="dark"] .alltime-session-pick-item {
  background: rgba(30, 30, 53, .88);
  border-color: var(--border);
}

html[data-theme="dark"] .alltime-session-pick-check,
html[data-theme="dark"] .alltime-session-picker-footer {
  background: rgba(30, 30, 53, .96);
}

html[data-theme="light"] .alltime-session-range-panel {
  background: rgba(248, 250, 252, .92);
  border-color: rgba(15, 23, 42, .08);
}

html[data-theme="light"] .alltime-session-range-card {
  background: #fff;
}

.alltime-range-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.alltime-range-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .05);
}

.alltime-range-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(20, 184, 166, .14));
  border-color: rgba(34, 211, 238, .20);
  box-shadow: 0 8px 24px rgba(34, 211, 238, .11), inset 0 1px 0 rgba(255, 255, 255, .07);
  transform: translateY(-1px);
}

html[data-theme="light"] .alltime-range-filter {
  background: rgba(248, 250, 252, .78);
  border-color: rgba(15, 23, 42, .07);
}

html[data-theme="light"] .alltime-range-btn {
  color: #64748b;
}

html[data-theme="light"] .alltime-range-btn:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, .045);
}

html[data-theme="light"] .alltime-range-btn.active {
  color: #0f172a;
  background: linear-gradient(135deg, rgba(20, 184, 166, .14), rgba(59, 130, 246, .10));
  border-color: rgba(20, 184, 166, .18);
  box-shadow: 0 8px 22px rgba(20, 184, 166, .10), inset 0 1px 0 rgba(255, 255, 255, .75);
}

@media(max-width:899px), (orientation:portrait) {
  #page-stats .stats-tabs.stats-tabs-two {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .alltime-range-toolbar {
    gap: 8px;
    margin: 12px 0 10px;
  }

  .alltime-range-filter {
    gap: 6px;
    padding: 5px;
    border-radius: 16px;
  }

  .alltime-session-range-panel {
    padding: 10px 12px;
  }

  .alltime-session-range-card {
    padding: 11px 12px;
  }

  .alltime-session-range-card-value {
    font-size: 14px;
  }

  #alltime-session-picker-modal .modal-header {
    padding: 12px 14px 10px;
  }

  #alltime-session-picker-modal .modal-title {
    font-size: 16px;
  }

  #alltime-session-picker-modal .modal-subtitle {
    font-size: 11px;
    line-height: 1.35;
  }

  #alltime-session-picker-modal .modal-body {
    padding: 6px 12px 10px;
  }

  .alltime-session-picker-stack {
    gap: 6px;
  }

  .alltime-session-pick-item {
    padding: 9px 10px;
    border-radius: 12px;
  }

  .alltime-session-pick-title {
    font-size: 13px;
  }

  .alltime-session-pick-sub {
    font-size: 10.5px;
    margin-top: 3px;
    -webkit-line-clamp: 1;
  }

  .alltime-session-pick-check {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .alltime-session-picker-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  .alltime-session-picker-selection {
    justify-content: flex-start;
  }

  .alltime-session-picker-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .alltime-session-pick-top-end .session-status-mini {
    padding: 1px 7px;
    font-size: 9px;
  }

  #alltime-session-picker-modal .expense-history-pagination {
    margin-top: 8px;
  }

  #alltime-session-picker-modal .expense-history-count {
    margin-top: 4px;
    font-size: 11px;
  }

  .alltime-range-btn {
    height: 36px;
    font-size: 12px;
    border-radius: 12px;
  }
}

/* =========================================================
   QBAD Pro v46
   Desktop Stats Tabs Fit Fix
   Scope: Stats page only
   Purpose: make Today / All-time segmented control align with
   the same content width as stat cards and all-time filter.
========================================================= */

/* Strong override for the main stats view switcher */
#page-stats .stats-tabs,
#page-stats .stats-tabs.stats-tabs-two,
body.auth-ready #page-stats .stats-tabs,
body.auth-ready #page-stats .stats-tabs.stats-tabs-two {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 16px 0 18px !important;
  padding: 6px !important;
}

#page-stats .stats-tabs .stats-tab,
#page-stats .stats-tabs.stats-tabs-two .stats-tab,
body.auth-ready #page-stats .stats-tabs .stats-tab,
body.auth-ready #page-stats .stats-tabs.stats-tabs-two .stats-tab {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
}

/* Desktop / tablet landscape polish */
@media (min-width:900px) and (orientation:landscape) {

  #page-stats .stats-tabs,
  #page-stats .stats-tabs.stats-tabs-two,
  body.auth-ready #page-stats .stats-tabs,
  body.auth-ready #page-stats .stats-tabs.stats-tabs-two {
    min-height: 58px !important;
    border-radius: 22px !important;
  }

  #page-stats .stats-tabs .stats-tab,
  #page-stats .stats-tabs.stats-tabs-two .stats-tab {
    height: 46px !important;
    border-radius: 16px !important;
  }
}

/* Keep mobile compact and full width */
@media(max-width:899px), (orientation:portrait) {

  #page-stats .stats-tabs,
  #page-stats .stats-tabs.stats-tabs-two {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 14px 0 16px !important;
  }
}

/* =========================================================
   QBAD Pro v50
   iPad / Tablet Landscape Overflow Fix
   - Prevent settings/player panels from overflowing to the right
   - Keep mobile portrait untouched
========================================================= */

@media (min-width:768px) and (max-width:1194px) and (orientation:landscape) and (min-height:560px) {
  :root {
    --desktop-sidebar-width: 232px !important;
    --desktop-sidebar-left: 12px !important;
    --desktop-sidebar-y: 12px !important;
    --desktop-content-gap: 12px !important;
    --desktop-content-right: 12px !important;
    --desktop-work-max: calc(100vw - var(--desktop-sidebar-left) - var(--desktop-sidebar-width) - var(--desktop-content-gap) - var(--desktop-content-right)) !important;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.auth-ready {
    padding-left: calc(var(--desktop-sidebar-left) + var(--desktop-sidebar-width) + var(--desktop-content-gap)) !important;
    padding-right: var(--desktop-content-right) !important;
  }

  body.auth-ready .desktop-sidebar {
    width: var(--desktop-sidebar-width) !important;
    left: var(--desktop-sidebar-left) !important;
    top: var(--desktop-sidebar-y) !important;
    bottom: var(--desktop-sidebar-y) !important;
    border-radius: 22px !important;
  }

  body.auth-ready .page,
  body.auth-ready #page-queue,
  body.auth-ready #page-stats,
  body.auth-ready #page-settings {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body.auth-ready .desktop-top-actions {
    right: 12px !important;
    max-width: calc(100vw - var(--desktop-sidebar-left) - var(--desktop-sidebar-width) - 36px) !important;
  }

  body.auth-ready .desktop-brand {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.auth-ready .desktop-brand-wordmark {
    font-size: 18px !important;
  }

  body.auth-ready .desktop-nav-scroll {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.auth-ready .desktop-nav-item {
    min-height: 42px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
    gap: 9px !important;
    font-size: 12.5px !important;
  }

  body.auth-ready .desktop-user-card {
    margin-left: 10px !important;
    margin-right: 10px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.auth-ready .desktop-user-info span {
    max-width: 120px !important;
  }

  /* Settings page: switch tablet landscape to a clean single-column flow */
  body.auth-ready #settings-panel-players.active,
  body.auth-ready #settings-panel-courts.active,
  body.auth-ready #settings-panel-system.active,
  body.auth-ready #settings-panel-scheduled-sessions.active,
  body.auth-ready #settings-panel-expense.active,
  body.auth-ready #settings-panel-access.active,
  body.auth-ready #settings-panel-access .access-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.auth-ready #settings-panel-players>*,
  body.auth-ready #settings-panel-courts>*,
  body.auth-ready #settings-panel-system>*,
  body.auth-ready #settings-panel-scheduled-sessions>*,
  body.auth-ready #settings-panel-expense>*,
  body.auth-ready #settings-panel-access>*,
  body.auth-ready #settings-panel-access .access-grid>* {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: static !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent wide player list controls from pushing outside viewport */
  body.auth-ready #page-settings .card,
  body.auth-ready #page-settings .settings-head,
  body.auth-ready #page-settings .settings-panel.active,
  body.auth-ready #settings-panel-players .player-list,
  body.auth-ready #settings-panel-players .player-row,
  body.auth-ready #settings-panel-players .players-list,
  body.auth-ready #settings-panel-players .settings-player-search-panel,
  body.auth-ready #settings-panel-players .player-search-box,
  body.auth-ready #settings-panel-players .status-filter-tabs,
  body.auth-ready #settings-panel-players .player-filter-tabs,
  body.auth-ready #settings-panel-players .search-box,
  body.auth-ready #settings-panel-players .toolbar,
  body.auth-ready #settings-panel-players .card-head,
  body.auth-ready #settings-panel-players .player-list-head {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body.auth-ready #settings-panel-players .status-filter-tabs,
  body.auth-ready #settings-panel-players .player-filter-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body.auth-ready #settings-panel-players .card-head,
  body.auth-ready #settings-panel-players .player-list-head,
  body.auth-ready #settings-panel-players .settings-panel-head {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  body.auth-ready #settings-panel-players .card-head .actions,
  body.auth-ready #settings-panel-players .player-actions,
  body.auth-ready #settings-panel-players .bulk-actions,
  body.auth-ready #settings-panel-players .title-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
  }

  /* Queue and stats should never create horizontal scroll on tablet landscape */
  body.auth-ready #page-queue .desktop-queue-layout,
  body.auth-ready #page-stats .stats-overview-compact,
  body.auth-ready #page-stats .dashboard-summary {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.auth-ready #page-queue .desktop-queue-layout {
    grid-template-columns: 1fr !important;
  }

  body.auth-ready #page-stats .stats-overview-compact {
    grid-template-columns: 1fr !important;
  }

  body.auth-ready #page-stats .dashboard-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   QBAD Pro v51
   Court-based Queue Empty Slot UX
   ========================================================= */

.court-empty-slot {
  min-height: 280px;
  border: 1.8px dashed rgba(148, 163, 184, .28) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .018)) !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    border-color .22s ease,
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.court-empty-slot:hover {
  border-color: rgba(34, 211, 238, .46) !important;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, .075), rgba(99, 102, 241, .035)) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18) !important;
  transform: translateY(-1px);
}

.court-empty-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

.court-empty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--muted);
  background: rgba(148, 163, 184, .10);
  border: 1px solid rgba(148, 163, 184, .16);
}

.court-empty-body {
  flex: 1;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 18px 28px;
}

.court-empty-icon {
  width: 58px;
  height: 58px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(34, 211, 238, .92);
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .12), rgba(99, 102, 241, .10));
  border: 1px solid rgba(34, 211, 238, .18);
  margin-bottom: 16px;
}

.court-empty-icon svg {
  width: 26px;
  height: 26px;
}

.court-empty-queue-btn {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(34, 211, 238, .24);
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(99, 102, 241, .14));
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.02em;
  cursor: pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    opacity .18s ease;
}

.court-empty-queue-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(34, 211, 238, .40);
  box-shadow: 0 12px 28px rgba(34, 211, 238, .12);
}

.court-empty-queue-btn:disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: saturate(.65);
}

.court-empty-body p {
  margin: 10px 0 0;
  max-width: 240px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

html[data-theme="light"] .court-empty-slot {
  border-color: rgba(15, 23, 42, .14) !important;
  background: rgba(255, 255, 255, .62) !important;
}

html[data-theme="light"] .court-empty-slot:hover {
  border-color: rgba(20, 184, 166, .38) !important;
  background: linear-gradient(180deg, rgba(20, 184, 166, .07), rgba(59, 130, 246, .035)) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08) !important;
}

html[data-theme="light"] .court-empty-badge {
  color: #64748b;
  background: rgba(15, 23, 42, .045);
  border-color: rgba(15, 23, 42, .08);
}

html[data-theme="light"] .court-empty-queue-btn {
  color: #0f172a;
  background: linear-gradient(135deg, rgba(20, 184, 166, .14), rgba(59, 130, 246, .10));
  border-color: rgba(20, 184, 166, .18);
}

@media (max-width: 899px) {
  .court-empty-slot {
    min-height: 240px;
  }

  .court-empty-body {
    min-height: 160px;
    padding: 18px 16px 24px;
  }

  .court-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 20px;
  }
}


/* =========================================================
   QBAD Pro v52
   Court count availability + clickable empty court slot
   ========================================================= */

.court-opt.is-disabled {
  opacity: .42 !important;
  filter: saturate(.55);
  cursor: not-allowed !important;
  border-style: dashed !important;
  background: rgba(148, 163, 184, .06) !important;
  color: var(--muted) !important;
}

.court-opt.is-disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

.court-empty-slot {
  cursor: pointer;
  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.court-empty-slot:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 211, 238, .36) !important;
  background: rgba(34, 211, 238, .055) !important;
  box-shadow: 0 18px 44px rgba(34, 211, 238, .08);
}

.court-empty-slot:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, .18),
    0 18px 44px rgba(34, 211, 238, .08);
}

.court-empty-slot.is-disabled {
  cursor: not-allowed;
  opacity: .58;
  filter: saturate(.65);
}

.court-empty-slot.is-disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border) !important;
  background: rgba(255, 255, 255, .02) !important;
}

.court-empty-slot .court-empty-icon {
  pointer-events: none;
}

.court-empty-slot .court-empty-queue-btn {
  position: relative;
  z-index: 2;
}

html[data-theme="light"] .court-empty-slot:hover {
  background: rgba(20, 184, 166, .07) !important;
  border-color: rgba(20, 184, 166, .30) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
}

.court-empty-slot.is-prepared-reserved {
  cursor: default;
  border-style: solid !important;
  border-color: rgba(20, 184, 166, .34) !important;
  background: linear-gradient(180deg, rgba(20, 184, 166, .10), rgba(20, 184, 166, .035)) !important;
}

.court-empty-slot.is-prepared-reserved:hover {
  transform: none;
  border-color: rgba(20, 184, 166, .34) !important;
  box-shadow: none !important;
}

.court-empty-slot.is-prepared-reserved .court-empty-badge {
  color: #5eead4;
  border-color: rgba(45, 212, 191, .28);
  background: rgba(20, 184, 166, .14);
}

.court-empty-slot.is-prepared-reserved .court-empty-icon .material-symbols-outlined {
  font-size: 28px;
}

.court-prepared-reserved-names {
  max-width: 100%;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

html[data-theme="light"] .court-empty-slot.is-prepared-reserved,
html[data-theme="light"] .court-empty-slot.is-prepared-reserved:hover {
  border-color: rgba(13, 148, 136, .30) !important;
  background: linear-gradient(180deg, rgba(20, 184, 166, .09), rgba(255, 255, 255, .72)) !important;
}

html[data-theme="light"] .court-empty-slot.is-prepared-reserved .court-empty-badge {
  color: #0f766e;
}


/* =========================================================
   QBAD Pro v53
   4-Court support + 2-column court board on Desktop/Tablet Landscape
   ========================================================= */

/* Court selector: support 4 options without squeezing labels */
.court-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.court-opt {
  min-width: 0;
  white-space: nowrap;
}

.court-dropdown-selector {
  position: relative;
  margin-bottom: 16px;
}

.court-count-select {
  min-height: 46px;
  padding-right: 42px;
  font-weight: 800;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.court-count-chevron {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  pointer-events: none;
}

/* Shared dropdown pattern: keep the native select as the value source, but
   render the open list with the same rounded card language as the app. */
.qbad-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  z-index: 1;
}

.qbad-select.is-open {
  z-index: 12000;
}

.qbad-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.qbad-select-trigger {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}

.qbad-select-trigger:hover:not(:disabled) {
  border-color: rgba(17, 184, 154, .42);
  background: color-mix(in srgb, var(--bg3) 92%, var(--accent) 8%);
}

.qbad-select-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, .12);
}

.qbad-select.is-open .qbad-select-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, .10);
}

.qbad-select-trigger:disabled {
  opacity: .62;
  cursor: not-allowed;
}

.qbad-select-value {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qbad-select-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 21px;
  line-height: 1;
  transition: transform .15s ease, color .15s ease;
}

.qbad-select.is-open .qbad-select-chevron {
  color: var(--accent);
  transform: rotate(180deg);
}

.qbad-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: grid;
  gap: 3px;
  max-height: min(360px, 48vh);
  min-width: max(100%, 180px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(125, 132, 145, .20);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
  z-index: 12050;
  scrollbar-width: thin;
}

.qbad-select-menu.is-portal {
  position: fixed;
  right: auto;
  bottom: auto;
  width: max-content;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 16px));
}

.qbad-select-menu[hidden] {
  display: none;
}

.qbad-select-option {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.qbad-select-option:hover:not(:disabled),
.qbad-select-option:focus-visible {
  outline: none;
  border-color: rgba(17, 184, 154, .24);
  background: rgba(17, 184, 154, .08);
}

.qbad-select-option.is-selected {
  border-color: rgba(17, 184, 154, .24);
  background: rgba(17, 184, 154, .11);
  color: var(--accent-strong, var(--accent));
  font-weight: 800;
}

.qbad-select-option:disabled {
  color: var(--muted);
  opacity: .58;
  cursor: not-allowed;
}

.qbad-select-option-copy {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}

.qbad-select-option-check {
  flex: 0 0 auto;
  min-width: 18px;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

html[data-theme="dark"] .qbad-select-trigger {
  background: var(--bg3);
  border-color: rgba(148, 163, 184, .18);
}

html[data-theme="dark"] .qbad-select-menu {
  border-color: rgba(148, 163, 184, .18);
  background: var(--card);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .38);
}

.court-dropdown-selector .qbad-select-trigger {
  min-height: 46px;
  font-weight: 800;
}

/* Keep the existing compact status/rail shells, but use the shared trigger
   and portal menu so their native browser popup cannot leak through. */
.status-select-shell.qbad-select {
  display: block;
  height: 28px;
  min-height: 28px;
  overflow: hidden;
}

.status-select-shell.qbad-select .qbad-select-trigger {
  min-height: 28px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  gap: 2px;
  box-shadow: none;
}

.status-select-shell.qbad-select .qbad-select-trigger:hover:not(:disabled),
.status-select-shell.qbad-select .qbad-select-trigger:focus-visible,
.status-select-shell.qbad-select.is-open .qbad-select-trigger {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.status-select-shell.qbad-select .qbad-select-value {
  text-align: center;
}

.status-select-shell.qbad-select .qbad-select-chevron {
  color: currentColor;
  font-size: 16px;
}

.desktop-queue-rail-court.qbad-select .qbad-select-trigger {
  min-height: 44px;
  height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font-size: 16px;
  font-weight: 900;
  justify-content: center;
  gap: 1px;
  box-shadow: none;
}

.desktop-queue-rail-court.qbad-select .qbad-select-trigger:hover:not(:disabled),
.desktop-queue-rail-court.qbad-select .qbad-select-trigger:focus-visible,
.desktop-queue-rail-court.qbad-select.is-open .qbad-select-trigger {
  border-color: transparent;
  background: rgba(17, 184, 154, .08);
  box-shadow: none;
}

.desktop-queue-rail-court.qbad-select .qbad-select-chevron {
  font-size: 14px;
}

/* Preserve the compact sort control's place in the card header while sharing
   the same trigger/menu treatment as the full-width form selects. */
.alltime-card-actions > .qbad-select {
  width: auto;
  min-width: 116px;
  flex: 0 0 auto;
}

.alltime-card-actions > .qbad-select .qbad-select-trigger {
  min-height: 34px;
  padding: 7px 10px 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

#checkin-gate-state-map > .qbad-select {
  width: min(100%, 340px);
}

@media (max-width: 520px) {
  .qbad-select-menu {
    max-height: min(320px, 42vh);
  }
}

@media (max-width: 620px) {
  .alltime-card-actions > .qbad-select {
    min-width: 126px;
  }
}

/* Desktop / tablet landscape: show courts as 2 columns when selected courts > 1 */
@media (min-width:900px) and (min-height:560px),
(min-width:768px) and (orientation:landscape) and (min-height:560px) {

  body.auth-ready #page-queue #active-courts {
    display: grid !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  body.auth-ready #page-queue #active-courts[data-court-count="1"] {
    grid-template-columns: 1fr !important;
  }

  body.auth-ready #page-queue #active-courts[data-court-count="2"],
  body.auth-ready #page-queue #active-courts[data-court-count="3"],
  body.auth-ready #page-queue #active-courts[data-court-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.auth-ready #page-queue #active-courts .court-card {
    width: 100% !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
  }

  body.auth-ready #page-queue #active-courts .court-empty-slot {
    min-height: 260px;
  }

  body.auth-ready #page-queue #active-courts .court-empty-body {
    min-height: 160px;
  }
}

/* Tablet landscape with narrower content: keep 2 columns but compact cards slightly */
@media (min-width:768px) and (max-width:1099px) and (orientation:landscape) {

  body.auth-ready #page-queue #active-courts[data-court-count="2"],
  body.auth-ready #page-queue #active-courts[data-court-count="3"],
  body.auth-ready #page-queue #active-courts[data-court-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.auth-ready #page-queue #active-courts .court-empty-slot {
    min-height: 230px;
  }
}

/* Mobile portrait: always stack courts vertically for readability */
@media (max-width:899px) and (orientation:portrait) {
  #page-queue #active-courts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .court-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   QBAD Pro v56
   Stats Latest Tab + 3-Way Segmented Control Polish
   ========================================================= */

#page-stats .stats-tabs.stats-tabs-three {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#page-stats .stats-tabs.stats-tabs-three .stats-tab {
  width: 100% !important;
  min-width: 0 !important;
}

.latest-stats-card .alltime-card-head {
  margin-bottom: 18px;
}

@media (max-width:768px) {
  #page-stats .stats-tabs.stats-tabs-three {
    gap: 6px !important;
    padding: 5px !important;
  }

  #page-stats .stats-tabs.stats-tabs-three .stats-tab {
    font-size: 12px !important;
    gap: 6px !important;
    padding: 0 8px !important;
  }

  #page-stats .stats-tabs.stats-tabs-three .stats-tab i {
    font-size: 12px !important;
  }
}


/* Security v22: Turnstile anti-abuse widget */
.auth-turnstile-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
}

.register-turnstile {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-turnstile-note {
  width: 100%;
  border: 1px solid rgba(245, 158, 11, .24);
  background: rgba(245, 158, 11, .09);
  color: #b45309;
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

html[data-theme="dark"] .auth-turnstile-note {
  color: #fbbf24;
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .24);
}


/* v17.17 — Queue capacity recommendation + teamability guard notice */
.queue-capacity-notice {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 10px 0 12px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, rgba(0, 212, 170, .10), rgba(99, 102, 241, .08));
  color: var(--text);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
}

.queue-capacity-notice.hidden {
  display: none !important
}

.queue-capacity-notice .capacity-main {
  flex: 1 1 auto;
  min-width: 0;
}

.queue-capacity-notice .capacity-divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  background: rgba(148, 163, 184, .30);
}

.queue-capacity-notice .capacity-mode {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  max-width: 52%;
  min-width: 0;
  text-align: right;
}

.queue-capacity-notice .capacity-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

.queue-capacity-notice .capacity-mode-badge:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
}

.queue-capacity-notice .capacity-mode-badge .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 13px;
  opacity: .8;
}

.queue-capacity-notice .capacity-mode-name {
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.queue-capacity-notice .capacity-mode-desc {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rotation-mode-info-sheet {
  max-width: 400px;
}

.rotation-mode-info-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.rotation-mode-info-card .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 20px;
}

.rotation-mode-info-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.65;
}

.rotation-mode-info-submode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg3);
}

.rotation-mode-info-submode .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 20px;
}

.rotation-mode-info-submode > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.rotation-mode-info-submode-caption {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.rotation-mode-info-submode strong {
  color: var(--text);
  font-size: 13px;
}

.rotation-mode-info-submode p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.rotation-mode-info-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.rotation-mode-info-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rotation-mode-info-actions .btn .material-symbols-outlined {
  font-size: 17px;
}

.rotation-settings-unsaved-sheet {
  max-width: 480px;
}

.rotation-settings-unsaved-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
}

.rotation-settings-unsaved-value {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.rotation-settings-unsaved-value span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.rotation-settings-unsaved-value strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.4;
}

.rotation-settings-unsaved-value.is-next strong {
  color: var(--accent);
}

.rotation-settings-unsaved-arrow {
  color: var(--muted);
  font-size: 20px;
}

.rotation-settings-unsaved-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.rotation-settings-unsaved-actions .btn {
  min-height: 44px;
}

.rotation-settings-unsaved-secondary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.queue-capacity-notice .capacity-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 4px;
}

.queue-capacity-notice .capacity-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(0, 212, 170, .10);
  flex: 0 0 auto;
}

.queue-capacity-notice .capacity-message {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 700;
}

.queue-capacity-notice.capacity-exact,
.queue-capacity-notice.capacity-great {
  border-color: rgba(0, 212, 170, .24);
  background: linear-gradient(135deg, rgba(0, 212, 170, .12), rgba(20, 184, 166, .06));
}

.queue-capacity-notice.capacity-good {
  border-color: rgba(99, 102, 241, .24);
  background: linear-gradient(135deg, rgba(99, 102, 241, .10), rgba(0, 212, 170, .06));
}

.queue-capacity-notice.capacity-warning {
  border-color: rgba(245, 158, 11, .30);
  background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(251, 191, 36, .06));
}

.queue-capacity-notice.capacity-warning .capacity-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 5px rgba(245, 158, 11, .12)
}

.queue-capacity-notice.capacity-not-enough {
  border-color: rgba(239, 68, 68, .26);
  background: linear-gradient(135deg, rgba(239, 68, 68, .10), rgba(245, 158, 11, .05));
}

.queue-capacity-notice.capacity-not-enough .capacity-dot {
  background: #ef4444;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, .10)
}


/* =========================================================
   v17.18 Demo Guard Restore — merged from Local Demo Sandbox v5
   Keeps demo.qbadpro.com localStorage-only without touching production app logic.
   ========================================================= */
/* =========================================================
   QBAD Pro Local Demo Sandbox v1
   - localStorage only
   - no Supabase writes
   - max 2 courts / max 20 players
   ========================================================= */
body.qbad-demo-body {
  min-height: 100vh;
  background: radial-gradient(circle at 12% -8%, rgba(45, 212, 191, .20), transparent 35%), radial-gradient(circle at 88% 0%, rgba(99, 102, 241, .14), transparent 32%), linear-gradient(180deg, var(--bg, #f7f9fc), #fff) !important;
  color: var(--text, #28313f) !important;
  padding: 0 !important;
}

html[data-theme="dark"] body.qbad-demo-body {
  background: radial-gradient(circle at 12% -8%, rgba(45, 212, 191, .18), transparent 35%), radial-gradient(circle at 88% 0%, rgba(139, 92, 246, .14), transparent 32%), linear-gradient(180deg, #080b14, #0b1020 54%, #080b14) !important;
}

.qbad-demo-shell {
  width: min(1180px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 18px 0 48px;
}

.qbad-demo-topbar {
  position: sticky;
  top: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

html[data-theme="dark"] .qbad-demo-topbar {
  background: rgba(13, 19, 34, .76);
  border-color: rgba(148, 163, 184, .16);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.qbad-demo-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0
}

.qbad-demo-logo {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  border: 1px solid rgba(45, 212, 191, .18);
  background: rgba(45, 212, 191, .10);
  display: grid;
  place-items: center;
  flex-shrink: 0
}

.qbad-demo-logo img {
  width: 28px;
  height: 28px
}

html[data-theme="dark"] .qbad-demo-logo img {
  filter: brightness(0) invert(1)
}

.qbad-demo-brand strong {
  display: block;
  font-size: 16px;
  letter-spacing: -.2px
}

.qbad-demo-brand span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-top: 1px
}

.qbad-demo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.qbad-demo-pill {
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .56);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: .16s;
  text-decoration: none
}

.qbad-demo-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, .36);
  background: rgba(45, 212, 191, .09)
}

html[data-theme="dark"] .qbad-demo-pill {
  background: rgba(17, 26, 46, .72)
}

.qbad-demo-lang {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(125, 132, 145, .08)
}

.qbad-demo-lang button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  padding: 6px 9px;
  cursor: pointer
}

.qbad-demo-lang button.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 7px 16px rgba(15, 23, 42, .08)
}

html[data-theme="dark"] .qbad-demo-lang button.active {
  background: rgba(18, 26, 43, .95);
  box-shadow: none
}

.qbad-demo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 18px;
  margin: 22px 0 16px;
  align-items: stretch
}

.qbad-demo-hero-card,
.qbad-demo-card {
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
  padding: 20px
}

.qbad-demo-hero-card {
  overflow: hidden;
  position: relative
}

.qbad-demo-hero-card:before {
  content: "";
  position: absolute;
  right: -90px;
  top: -110px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(45, 212, 191, .24), transparent 68%);
  pointer-events: none
}

.qbad-demo-hero-card h1 {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.12;
  letter-spacing: -1px;
  margin: 0;
  max-width: 680px
}

.qbad-demo-hero-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
  margin: 14px 0 0;
  max-width: 760px
}

.qbad-demo-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(45, 212, 191, .09);
  border: 1px solid rgba(45, 212, 191, .18);
  border-radius: 18px;
  padding: 12px 14px;
  margin-top: 16px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55
}

.qbad-demo-note b {
  color: var(--accent)
}

html[data-theme="dark"] .qbad-demo-hero-card,
html[data-theme="dark"] .qbad-demo-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)), rgba(18, 26, 43, .88);
  border-color: rgba(148, 163, 184, .16);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .24)
}

.qbad-demo-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px
}

.qbad-demo-metric {
  padding: 14px;
  border-radius: 18px;
  background: rgba(125, 132, 145, .07);
  border: 1px solid rgba(125, 132, 145, .13)
}

.qbad-demo-metric span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900
}

.qbad-demo-metric strong {
  display: block;
  font-size: 28px;
  line-height: 1.1;
  margin-top: 5px
}

.qbad-demo-grid {
  display: grid;
  grid-template-columns: minmax(280px, .86fr) minmax(0, 1.14fr);
  gap: 16px;
  align-items: start
}

.qbad-demo-stack {
  display: grid;
  gap: 16px
}

.qbad-demo-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px
}

.qbad-demo-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.2px
}

.qbad-demo-card-desc {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55
}

.qbad-demo-form {
  display: flex;
  gap: 8px
}

.qbad-demo-input,
.qbad-demo-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: rgba(255, 255, 255, .72);
  color: var(--text);
  padding: 11px 12px;
  outline: none;
  font: inherit
}

.qbad-demo-input:focus,
.qbad-demo-select:focus {
  border-color: rgba(45, 212, 191, .55);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, .10)
}

html[data-theme="dark"] .qbad-demo-input,
html[data-theme="dark"] .qbad-demo-select {
  background: rgba(17, 26, 46, .76);
  border-color: rgba(148, 163, 184, .16)
}

.qbad-demo-btn {
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
  color: #06110f;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap
}

.qbad-demo-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(20, 184, 166, .18)
}

.qbad-demo-btn.secondary {
  background: rgba(125, 132, 145, .09);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none
}

.qbad-demo-btn.danger {
  background: rgba(239, 68, 68, .09);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, .18);
  box-shadow: none
}

.qbad-demo-btn.warning {
  background: rgba(245, 158, 11, .12);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, .22);
  box-shadow: none
}

.qbad-demo-btn.small {
  border-radius: 999px;
  font-size: 12px;
  padding: 8px 11px
}

.qbad-demo-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important
}

.qbad-demo-player-list {
  display: grid;
  gap: 8px;
  max-height: 370px;
  overflow: auto;
  padding-right: 2px
}

.qbad-demo-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(125, 132, 145, .13);
  background: rgba(125, 132, 145, .055);
  border-radius: 16px
}

.qbad-demo-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(45, 212, 191, .12);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 900;
  flex-shrink: 0
}

.qbad-demo-player-main {
  flex: 1;
  min-width: 0
}

.qbad-demo-player-main strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.qbad-demo-player-main span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700
}

.qbad-demo-court-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.qbad-demo-court-tabs button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(125, 132, 145, .07);
  color: var(--muted);
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer
}

.qbad-demo-court-tabs button.active {
  background: rgba(45, 212, 191, .12);
  color: var(--accent);
  border-color: rgba(45, 212, 191, .35)
}

.qbad-demo-courts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.qbad-demo-court {
  border: 1px solid rgba(125, 132, 145, .15);
  border-radius: 22px;
  background: rgba(125, 132, 145, .045);
  padding: 14px;
  min-height: 210px
}

.qbad-demo-court-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px
}

.qbad-demo-court-head strong {
  font-size: 14px
}

.qbad-demo-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(45, 212, 191, .10);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900
}

.qbad-demo-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center
}

.qbad-demo-team {
  display: grid;
  gap: 7px
}

.qbad-demo-team-label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase
}

.qbad-demo-chip {
  border: 1px solid rgba(125, 132, 145, .15);
  border-radius: 12px;
  padding: 8px 9px;
  background: var(--card);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center
}

.qbad-demo-vs {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900
}

.qbad-demo-court-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px
}

.qbad-demo-empty {
  border: 1px dashed rgba(125, 132, 145, .28);
  border-radius: 18px;
  padding: 22px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  background: rgba(125, 132, 145, .035)
}

.qbad-demo-expense-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.qbad-demo-money-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(125, 132, 145, .12)
}

.qbad-demo-money-row:last-child {
  border-bottom: 0
}

.qbad-demo-money-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800
}

.qbad-demo-money-row strong {
  font-size: 16px
}

.qbad-demo-history {
  display: grid;
  gap: 10px
}

.qbad-demo-history-card {
  border: 1px solid rgba(125, 132, 145, .14);
  border-radius: 20px;
  background: rgba(125, 132, 145, .045);
  padding: 14px
}

.qbad-demo-history-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px
}

.qbad-demo-history-top strong {
  display: block
}

.qbad-demo-history-top span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px
}

.qbad-demo-pay-list {
  display: grid;
  gap: 7px;
  margin-top: 10px
}

.qbad-demo-pay-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(125, 132, 145, .10)
}

.qbad-demo-pay-name {
  min-width: 0
}

.qbad-demo-pay-name strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.qbad-demo-pay-name span {
  display: block;
  color: var(--muted);
  font-size: 11px
}

.qbad-demo-pay-amount {
  font-weight: 900
}

.qbad-demo-paid {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900
}

.qbad-demo-unpaid {
  color: #dc2626;
  font-size: 11px;
  font-weight: 900
}

.qbad-demo-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  max-width: 92vw;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
  font-size: 13px;
  font-weight: 900;
  transition: .22s
}

.qbad-demo-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0)
}

.qbad-demo-toast.error {
  border-color: rgba(239, 68, 68, .28);
  color: #dc2626
}

.qbad-demo-toast.success {
  border-color: rgba(45, 212, 191, .28);
  color: var(--accent)
}

.qbad-demo-stale-alert {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(12px);
}

.qbad-demo-stale-card {
  width: min(100%, 460px);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(245, 158, 11, .24);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.qbad-demo-stale-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #b45309;
  background: rgba(245, 158, 11, .14);
  border: 1px solid rgba(245, 158, 11, .24);
}

.qbad-demo-stale-icon .material-symbols-outlined {
  font-size: 30px;
}

.qbad-demo-stale-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.qbad-demo-stale-copy strong {
  color: #0f172a;
  font-size: 17px;
  letter-spacing: 0;
}

.qbad-demo-stale-copy span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.qbad-demo-stale-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 10px;
  margin-top: 4px;
}

.qbad-demo-stale-actions .qbad-demo-btn {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  white-space: normal;
}

.qbad-demo-checkin-gate {
  position: fixed;
  inset: 0;
  z-index: 1590;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .38);
  backdrop-filter: blur(12px);
}

.qbad-demo-checkin-sheet {
  width: min(100%, 560px);
  overflow: hidden;
  border-radius: 26px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(148, 163, 184, .18);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .22);
}

.qbad-demo-checkin-head {
  display: grid;
  gap: 4px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.qbad-demo-checkin-head strong {
  color: #0f172a;
  font-size: 20px;
  letter-spacing: 0;
}

.qbad-demo-checkin-head span {
  color: #64748b;
  font-size: 13px;
}

.qbad-demo-checkin-body {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px 24px 20px;
  text-align: center;
}

.qbad-demo-checkin-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.qbad-demo-checkin-icon .material-symbols-outlined {
  font-size: 36px;
}

.qbad-demo-checkin-body strong {
  color: #0f172a;
  font-size: 20px;
  letter-spacing: 0;
}

.qbad-demo-checkin-body p {
  max-width: 390px;
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.65;
}

.qbad-demo-checkin-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 24px 24px;
}

.qbad-demo-checkin-actions .qbad-demo-btn {
  min-height: 52px;
  justify-content: center;
  white-space: normal;
}

html[data-theme="dark"] .qbad-demo-stale-card {
  background: rgba(15, 23, 42, .97);
  border-color: rgba(245, 158, 11, .28);
}

html[data-theme="dark"] .qbad-demo-checkin-sheet {
  background: rgba(15, 23, 42, .97);
  border-color: rgba(148, 163, 184, .18);
}

html[data-theme="dark"] .qbad-demo-checkin-head {
  border-bottom-color: rgba(148, 163, 184, .16);
}

html[data-theme="dark"] .qbad-demo-checkin-head strong,
html[data-theme="dark"] .qbad-demo-checkin-body strong {
  color: #e5edf7;
}

html[data-theme="dark"] .qbad-demo-checkin-head span,
html[data-theme="dark"] .qbad-demo-checkin-body p {
  color: #94a3b8;
}

html[data-theme="dark"] .qbad-demo-checkin-icon {
  background: color-mix(in srgb, var(--accent) 12%, #111827);
}

html[data-theme="dark"] .qbad-demo-stale-copy strong {
  color: #e5edf7;
}

html[data-theme="dark"] .qbad-demo-stale-copy span {
  color: #94a3b8;
}

html[data-theme="dark"] .qbad-demo-stale-icon {
  color: #fbbf24;
  background: rgba(245, 158, 11, .12);
}

@media(max-width:560px) {
  .qbad-demo-stale-card {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .qbad-demo-stale-icon {
    margin: 0 auto;
  }

  .qbad-demo-stale-copy {
    text-align: center;
  }

  .qbad-demo-stale-actions {
    grid-template-columns: 1fr;
  }

  .qbad-demo-checkin-sheet {
    border-radius: 24px;
  }

  .qbad-demo-checkin-head {
    padding: 18px 20px 14px;
  }

  .qbad-demo-checkin-body {
    padding: 24px 20px 18px;
  }

  .qbad-demo-checkin-actions {
    grid-template-columns: 1fr;
    padding: 0 20px 22px;
  }
}

.qbad-demo-footer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px
}

.qbad-demo-muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55
}

.qbad-demo-match-history {
  display: grid;
  gap: 7px;
  max-height: 180px;
  overflow: auto;
  margin-top: 10px
}

.qbad-demo-match-row {
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid rgba(125, 132, 145, .10);
  padding-top: 7px
}

.qbad-demo-match-row b {
  color: var(--text)
}

@media(max-width:900px) {

  .qbad-demo-hero,
  .qbad-demo-grid {
    grid-template-columns: 1fr
  }

  .qbad-demo-courts {
    grid-template-columns: 1fr
  }

  .qbad-demo-expense-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:560px) {
  .qbad-demo-shell {
    width: min(100vw - 20px, 1180px);
    padding-top: 10px
  }

  .qbad-demo-topbar {
    top: 8px;
    border-radius: 22px;
    align-items: flex-start
  }

  .qbad-demo-actions {
    gap: 6px
  }

  .qbad-demo-pill {
    height: 34px;
    padding: 0 10px
  }

  .qbad-demo-hero-card,
  .qbad-demo-card {
    padding: 16px;
    border-radius: 22px
  }

  .qbad-demo-form {
    flex-direction: column
  }

  .qbad-demo-pay-row {
    grid-template-columns: 1fr auto
  }

  .qbad-demo-pay-row .qbad-demo-btn {
    grid-column: 1/-1
  }

  .qbad-demo-metrics {
    grid-template-columns: 1fr 1fr
  }

  .qbad-demo-brand span {
    display: none
  }
}

/* v2 — Local Demo responsive tabs + font consistency */
html,
body,
button,
input,
select,
textarea,
.qbad-demo-body,
.qbad-demo-body * {
  font-family: 'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.qbad-demo-tabs {
  display: none;
}

@media(max-width:900px) {
  .qbad-demo-tabs {
    position: sticky;
    top: 88px;
    z-index: 24;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px;
    margin: 10px 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(20px) saturate(1.2);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
  }

  .qbad-demo-tabs::-webkit-scrollbar {
    display: none;
  }

  html[data-theme="dark"] .qbad-demo-tabs {
    background: rgba(13, 19, 34, .78);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  }

  .qbad-demo-tabs button {
    flex: 1 0 auto;
    min-width: max-content;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    padding: 9px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, transform .16s ease;
  }

  .qbad-demo-tabs button span {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(125, 132, 145, .11);
    color: inherit;
    font-size: 10.5px;
    line-height: 1;
  }

  .qbad-demo-tabs button.active {
    color: #063f3a;
    background: linear-gradient(135deg, #5eead4, #2dd4bf);
    box-shadow: 0 10px 22px rgba(20, 184, 166, .18);
  }

  html[data-theme="dark"] .qbad-demo-tabs button.active {
    color: #06110f;
  }

  .qbad-demo-tabs button:active {
    transform: scale(.98);
  }

  .qbad-demo-grid {
    grid-template-columns: 1fr !important;
  }

  .qbad-demo-stack {
    display: contents;
  }

  .qbad-demo-panel {
    display: none;
  }

  .qbad-demo-panel.active {
    display: block;
  }
}

@media(max-width:560px) {
  .qbad-demo-tabs {
    top: 82px;
    border-radius: 22px;
    padding: 7px;
    gap: 6px;
  }

  .qbad-demo-tabs button {
    font-size: 11.5px;
    padding: 8px 10px;
  }
}


/* =========================================================
   Local Demo v4 — Bottom tabs + 2-tab responsive layout
   - Responsive tabs are fixed at the bottom like the main app
   - Tab 1: Overview + Queue + Player list
   - Tab 2: Expense summary + Expense history
   ========================================================= */
.qbad-demo-main {
  display: grid;
  gap: 16px;
}

.qbad-demo-tab-view {
  display: grid;
  gap: 16px;
}

.qbad-demo-work-grid,
.qbad-demo-money-grid {
  display: grid;
  gap: 16px;
  align-items: start;
}

.qbad-demo-work-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr);
}

.qbad-demo-money-grid {
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
}

.qbad-demo-players-panel .qbad-demo-player-list {
  max-height: 620px;
}

.qbad-demo-queue-panel .qbad-demo-match-history {
  margin-top: 12px;
}

@media(min-width:901px) {
  .qbad-demo-tabs {
    display: none !important;
  }

  .qbad-demo-tab-view {
    display: grid !important;
  }

  .qbad-demo-work-view {
    gap: 16px;
  }
}

@media(max-width:900px) {
  body.qbad-demo-body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .qbad-demo-shell {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .qbad-demo-tabs {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    z-index: 120 !important;
    width: min(520px, calc(100vw - 24px)) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    overflow: visible !important;
    padding: 7px !important;
    margin: 0 !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .88) !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    box-shadow: 0 -10px 34px rgba(15, 23, 42, .14), 0 18px 46px rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(22px) saturate(1.15) !important;
  }

  html[data-theme="dark"] .qbad-demo-tabs {
    background: rgba(13, 19, 34, .90) !important;
    border-color: rgba(148, 163, 184, .18) !important;
    box-shadow: 0 -12px 34px rgba(0, 0, 0, .28) !important;
  }

  .qbad-demo-tabs button {
    min-width: 0 !important;
    width: 100% !important;
    height: 48px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
    flex: initial !important;
  }

  .qbad-demo-tabs button span {
    height: 19px;
    min-width: 19px;
    font-size: 10px;
  }

  .qbad-demo-tab-view {
    display: none !important;
  }

  .qbad-demo-tab-view.active {
    display: grid !important;
    gap: 14px;
  }

  body.qbad-demo-body .qbad-demo-panel {
    display: block !important;
  }

  .qbad-demo-grid {
    display: block !important;
  }

  .qbad-demo-stack {
    display: grid !important;
    gap: 14px;
  }

  .qbad-demo-work-grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(240px, .86fr);
    gap: 14px;
  }

  .qbad-demo-money-grid {
    grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
    gap: 14px;
  }

  .qbad-demo-overview-block {
    margin: 16px 0 0 !important;
  }

  .qbad-demo-hero-card,
  .qbad-demo-card {
    padding: 16px;
  }

  .qbad-demo-players-panel .qbad-demo-player-list {
    max-height: 520px;
  }
}

@media(max-width:700px) {

  .qbad-demo-work-grid,
  .qbad-demo-money-grid {
    grid-template-columns: 1fr !important;
  }

  .qbad-demo-work-grid .qbad-demo-queue-panel {
    order: 1;
  }

  .qbad-demo-work-grid .qbad-demo-players-panel {
    order: 2;
  }

  .qbad-demo-money-grid .qbad-demo-expense-panel {
    order: 1;
  }

  .qbad-demo-money-grid .qbad-demo-history-panel {
    order: 2;
  }

  .qbad-demo-courts {
    grid-template-columns: 1fr !important;
  }
}

@media(max-width:560px) {
  .qbad-demo-tabs {
    width: min(440px, calc(100vw - 18px)) !important;
    border-radius: 22px !important;
    padding: 6px !important;
  }

  .qbad-demo-tabs button {
    height: 46px !important;
    font-size: 12px !important;
    border-radius: 17px !important;
  }

  .qbad-demo-hero {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .qbad-demo-hero-card h1 {
    font-size: clamp(27px, 8vw, 36px);
  }

  .qbad-demo-players-panel .qbad-demo-player-list {
    max-height: 430px;
  }
}


/* v5 demo guard: ensure production auth chrome cannot appear on demo/local sandbox URLs */
html[data-qbad-demo-preboot="true"] .auth-screen,
html[data-qbad-demo-preboot="true"] .topbar,
html[data-qbad-demo-preboot="true"] .desktop-sidebar,
html[data-qbad-demo-preboot="true"] .bottom-nav,
html[data-qbad-demo-preboot="true"] .page,
html[data-qbad-demo-preboot="true"] #loading,
html[data-qbad-demo-preboot="true"] #toast {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Queue Preset & Priorities styling */
.preset-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 16px;
}

.preset-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 14px 16px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.preset-card:hover {
  border-color: rgba(17, 184, 154, 0.3);
  background: rgba(17, 184, 154, 0.02);
  transform: translateY(-1px);
}

.preset-card.active {
  border-color: var(--accent);
  background: rgba(17, 184, 154, 0.08);
  box-shadow: 0 4px 16px rgba(17, 184, 154, 0.12);
}

.preset-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
  transition: all 0.2s;
}

.preset-card.active .preset-card-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #06110f;
}

.preset-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.preset-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}

.preset-card-desc {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preset-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 900;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  padding: 2px 6px;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s;
}

.preset-card.active .preset-card-badge {
  opacity: 1;
  transform: scale(1);
}

.preset-card-badge.is-pending,
.rotation-mode-active-badge.is-pending {
  color: #047857;
  background: color-mix(in srgb, #10b981 14%, var(--card));
  border-color: color-mix(in srgb, #10b981 38%, var(--border));
}

.rotation-mode-card.is-setting-locked,
.preset-card.is-setting-locked {
  opacity: .56;
  filter: saturate(.45);
  cursor: not-allowed;
}

.rotation-mode-card.is-setting-locked:hover,
.preset-card.is-setting-locked:hover {
  transform: none;
  border-color: var(--border);
  background: var(--card);
  box-shadow: none;
}

.rotation-mode-nested-panel.is-setting-locked {
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border));
  background: color-mix(in srgb, var(--muted) 3%, var(--card));
}

/* Detail Box */
.preset-detail-panel {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg3);
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-top: 12px;
  margin-bottom: 12px;
}

.preset-detail-panel .detail-icon {
  font-size: 20px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.preset-detail-panel p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.6;
}

/* Priority list tweaks */
.priority-list {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 8px;
}

.priority-item {
  display: grid;
  grid-template-columns: 28px auto 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
}

.priority-item-left {
  display: contents;
}

.priority-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.priority-drag-handle .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.priority-drag-handle:hover:not(:disabled),
.priority-drag-handle:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.priority-drag-handle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 1px;
}

.priority-drag-handle:active:not(:disabled) {
  cursor: grabbing;
}

.priority-drag-handle:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.priority-rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  flex-shrink: 0;
}

.priority-item-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.priority-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.priority-item-desc {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.priority-item-actions {
  display: none;
}

.priority-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.priority-btn .material-symbols-outlined {
  font-size: 18px !important;
}

.priority-btn:hover:not(:disabled) {
  background: rgba(17, 184, 154, 0.08);
  border-color: rgba(17, 184, 154, 0.22);
  color: var(--accent);
}

.priority-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.priority-list.is-reordering {
  user-select: none;
  -webkit-user-select: none;
}

.priority-item.is-dragging {
  opacity: .96;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 14%, transparent);
  z-index: 2;
}

.priority-item.is-drag-source {
  opacity: .34;
  box-shadow: none;
  border-style: dashed;
}

.priority-item-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10080;
  pointer-events: none;
  transform: translate3d(0, 0, 0) translate(-50%, -50%) scale(1.03);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
  opacity: .98;
  max-width: min(92vw, 520px);
  box-sizing: border-box;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  transition: none !important;
  animation: none !important;
  will-change: transform;
  cursor: grabbing;
}

html[data-theme="dark"] .priority-item-drag-ghost {
  box-shadow: 0 16px 36px rgba(0, 0, 0, .42);
}

body.priority-list-dragging {
  cursor: grabbing;
  touch-action: none;
}

body.priority-list-dragging * {
  cursor: grabbing !important;
}

.custom-priority-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.custom-priority-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.custom-priority-reset-btn .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.custom-priority-reset-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

.custom-priority-reset-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
}

.custom-priority-reset-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .custom-priority-head {
    flex-wrap: wrap;
    align-items: center;
  }

  .custom-priority-reset-btn {
    padding: 5px 9px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .priority-item {
    transition: none;
  }

  .priority-item-drag-ghost {
    transform: translate3d(0, 0, 0) translate(-50%, -50%);
  }
}
/* Reset day button state */
.reset-day-main-btn:not(:disabled):not(.is-disabled) {
  cursor: pointer !important;
  opacity: 1 !important;
  border: 1px solid rgba(245, 158, 11, .42) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, .96), rgba(251, 146, 60, .90)) !important;
  color: #171717 !important;
  box-shadow: 0 12px 28px rgba(245, 158, 11, .18) !important;
  filter: none !important;
}

.reset-day-main-btn:disabled,
.reset-day-main-btn.is-disabled {
  cursor: not-allowed !important;
  opacity: .62 !important;
  border-color: rgba(125, 132, 145, .18) !important;
  background: rgba(125, 132, 145, .08) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  filter: saturate(.55) !important;
}

.reset-day-main-btn:disabled:hover,
.reset-day-main-btn.is-disabled:hover {
  background: rgba(125, 132, 145, .08) !important;
  color: var(--muted) !important;
  border-color: rgba(125, 132, 145, .18) !important;
  box-shadow: none !important;
  filter: saturate(.55) !important;
}

body.auth-ready #settings-panel-courts .court-shuttle-tabs,
body.auth-ready #settings-panel-courts .court-shuttle-panel-shuttles {
  grid-column: 1 / -1 !important;
}

body.auth-ready #settings-panel-courts.show-shuttles > .add-player-card,
body.auth-ready #settings-panel-courts.show-shuttles > .card:not(.shuttle-settings-card) {
  display: none !important;
}

body.auth-ready #settings-panel-courts.show-shuttles .court-shuttle-panel-shuttles {
  display: grid !important;
  grid-template-columns: minmax(320px, .9fr) minmax(460px, 1.1fr);
  gap: 16px;
}

body.auth-ready #settings-panel-courts.show-shuttles .court-shuttle-panel-shuttles > .card {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

@media(max-width: 900px) {
  body.auth-ready #settings-panel-courts.show-shuttles .court-shuttle-panel-shuttles {
    grid-template-columns: 1fr;
  }
}

/* Compact court/shuttle sub navigation */
#settings-panel-courts .court-shuttle-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 72%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  box-shadow: none;
}

#settings-panel-courts .court-shuttle-tab {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 52px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  text-align: left;
  transform: none;
}

#settings-panel-courts .court-shuttle-tab:hover {
  transform: none;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

#settings-panel-courts .court-shuttle-tab.active {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--text);
  box-shadow: none;
}

#settings-panel-courts .court-shuttle-tab.active::before,
#settings-panel-courts .court-shuttle-tab.active::after {
  content: none;
}

.court-shuttle-tab-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  color: var(--muted);
  font-size: 20px !important;
}

.court-shuttle-tab.active .court-shuttle-tab-icon {
  background: var(--accent);
  color: #fff;
}

.court-shuttle-tab-copy {
  min-width: 0;
  overflow: hidden;
}

.court-shuttle-tab-copy strong,
.court-shuttle-tab-copy small {
  display: block;
}

.court-shuttle-tab-copy strong {
  color: inherit;
  font-size: 0.88rem;
  line-height: 1.2;
}

.court-shuttle-tab-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

body.auth-ready #settings-panel-courts .court-shuttle-tabs {
  grid-column: 1 !important;
  grid-row: 2 / span 3 !important;
  align-self: flex-start;
  position: sticky;
  top: 86px;
}

body.auth-ready #settings-panel-courts > .add-player-card,
body.auth-ready #settings-panel-courts > .card:not(.shuttle-settings-card) {
  grid-column: 2 !important;
}

body.auth-ready #settings-panel-courts .court-shuttle-panel-shuttles {
  grid-column: 2 !important;
}

body.auth-ready #settings-panel-courts.show-shuttles .court-shuttle-panel-shuttles {
  grid-template-columns: 1fr;
}

body.auth-ready #settings-panel-courts.show-shuttles .shuttle-profile-card.hidden {
  display: none !important;
}

.shuttle-profile-card.hidden {
  display: none !important;
}

.shuttle-preset-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--accent) 4%, var(--bg2)));
}

.shuttle-preset-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
}

.shuttle-preset-mark .material-symbols-outlined {
  font-size: 21px !important;
}

.shuttlecock-mini-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--accent);
}

.shuttlecock-mini-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 1px;
  width: 5px;
  height: 5px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.shuttlecock-mini-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 1px;
  width: 10px;
  height: 13px;
  border: 2px solid currentColor;
  border-left-width: 1px;
  border-radius: 2px 8px 8px 2px;
  clip-path: polygon(0 8%, 100% 0, 82% 100%, 0 88%);
  transform: rotate(-24deg);
  transform-origin: 0 100%;
}

.shuttle-preset-mark .shuttlecock-mini-icon {
  width: 22px;
  height: 22px;
}

.shuttle-preset-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.shuttle-default-pill,
.shuttle-status-pill {
  min-height: 24px;
  border-radius: 999px;
  border: 0;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 900;
}

.shuttle-status-pill.on {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
}

.shuttle-status-pill.off {
  background: color-mix(in srgb, var(--muted) 12%, var(--card));
  color: var(--muted);
}

.shuttle-preset-actions {
  gap: 6px;
}

.shuttle-icon-btn {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  color: var(--muted);
}

.shuttle-icon-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.shuttle-icon-btn.danger:hover {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--card));
}

.shuttle-icon-btn .material-symbols-outlined {
  font-size: 18px !important;
}

@media(max-width: 900px) {
  body.auth-ready #settings-panel-courts.active,
  body.auth-ready #settings-panel-courts.active > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tabs,
  body.auth-ready #settings-panel-courts .court-shuttle-panel-shuttles,
  body.auth-ready #settings-panel-courts > .add-player-card,
  body.auth-ready #settings-panel-courts > .card:not(.shuttle-settings-card) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tabs,
  #settings-panel-courts .court-shuttle-tabs {
    position: static;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible;
  }

  #settings-panel-courts .court-shuttle-tab {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
}

@media(max-width: 560px) {
  body.auth-ready #page-settings .settings-content,
  body.auth-ready #page-settings .settings-panel.active,
  body.auth-ready #settings-panel-courts.active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.auth-ready #settings-panel-courts.active > *,
  body.auth-ready #settings-panel-courts .card,
  body.auth-ready #settings-panel-courts .court-shuttle-panel,
  body.auth-ready #settings-panel-courts .court-shuttle-panel-shuttles {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #settings-panel-courts .court-shuttle-tabs {
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    gap: 6px;
    padding: 5px;
  }

  #settings-panel-courts .court-shuttle-tab {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    min-height: 48px;
    padding: 7px 6px !important;
  }

  #settings-panel-courts .court-shuttle-tab-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 16px !important;
  }

  #settings-panel-courts .court-shuttle-tab-copy {
    min-width: 0;
    overflow: hidden;
  }

  #settings-panel-courts .court-shuttle-tab-copy strong {
    font-size: 0.72rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #settings-panel-courts .court-shuttle-tab-copy small {
    display: none;
  }

  .shuttle-preset-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .shuttle-preset-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Game shuttle chips and compact shuttle settings */
.game-shuttle-box {
  display: block;
  padding: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 82%, var(--accent) 6%);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}

.game-shuttle-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.game-shuttle-copy strong {
  font-size: 0.82rem;
  font-weight: 900;
}

.game-shuttle-copy span {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.game-shuttle-chip-wrap,
.game-shuttle-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.game-shuttle-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
}

.game-shuttle-chip.has-count {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  color: var(--accent);
}

.game-shuttle-profile-btn,
.game-shuttle-add-chip,
.game-shuttle-add-dropdown,
.game-shuttle-stepper button,
.game-shuttle-remove-btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.game-shuttle-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 150px;
  padding: 4px 6px;
  color: inherit;
}

.game-shuttle-profile-copy {
  display: block;
  min-width: 0;
}

.game-shuttle-profile-copy strong,
.game-shuttle-profile-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-shuttle-profile-copy strong {
  font-size: 0.78rem;
}

.game-shuttle-profile-copy small {
  margin-top: 1px;
  color: color-mix(in srgb, var(--muted) 76%, transparent);
  font-size: 0.64rem;
  font-weight: 800;
}

.game-shuttle-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 2px;
  border-radius: 999px;
  background: var(--bg2);
}

.game-shuttle-stepper button {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-weight: 900;
}

.game-shuttle-stepper button:hover {
  background: var(--card);
  color: var(--accent);
}

.game-shuttle-stepper span {
  min-width: 20px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 900;
}

.game-shuttle-remove-btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.game-shuttle-remove-btn:hover {
  background: color-mix(in srgb, var(--danger) 8%, var(--card));
  color: var(--danger);
}

.game-shuttle-remove-btn .material-symbols-outlined,
.game-shuttle-add-chip .material-symbols-outlined {
  font-size: 16px !important;
}

.game-shuttle-add-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
}

.game-shuttle-add-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
}

.game-shuttle-add-dropdown select {
  min-height: 34px;
  max-width: 190px;
  border: 0;
  outline: 0;
  padding: 0 18px 0 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.game-shuttle-add-dropdown select:disabled {
  cursor: default;
  opacity: .55;
}

.game-shuttle-add-dropdown .material-symbols-outlined {
  font-size: 16px !important;
}

.court-shuttle-tab-icon.shuttlecock-mini-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.court-shuttle-tab-icon.shuttlecock-mini-icon::before {
  left: 10px;
  bottom: 8px;
}

.court-shuttle-tab-icon.shuttlecock-mini-icon::after {
  left: 16px;
  top: 7px;
}

#settings-panel-courts .court-shuttle-tab.active .shuttlecock-mini-icon {
  color: #fff;
}

.game-shuttle-empty {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
}

.game-shuttle-empty button {
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
}

#settings-panel-courts .court-shuttle-tab.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

#settings-panel-courts .expense-mode-choice {
  gap: 7px;
}

#settings-panel-courts .expense-mode-card {
  min-height: 0;
  padding: 10px 11px;
  border-radius: 10px;
}

#settings-panel-courts .expense-mode-card strong {
  margin-bottom: 3px;
  font-size: 0.86rem;
}

#settings-panel-courts .expense-mode-card span {
  font-size: 0.74rem;
  line-height: 1.32;
}

#settings-panel-courts .shuttle-settings-card > .card-title {
  margin-bottom: 8px;
}

@media(max-width: 560px) {
  #settings-panel-courts .expense-mode-choice {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #settings-panel-courts .expense-mode-card {
    padding: 9px 8px;
  }

  #settings-panel-courts .expense-mode-card strong {
    font-size: 0.78rem;
    line-height: 1.2;
  }

  #settings-panel-courts .expense-mode-card span {
    font-size: 0.68rem;
    line-height: 1.28;
  }

  .game-shuttle-copy {
    display: block;
  }

  .game-shuttle-copy span {
    display: block;
    margin-top: 2px;
  }

  .game-shuttle-chip {
    max-width: 100%;
  }

  .game-shuttle-profile-btn {
    max-width: 146px;
  }

  .game-shuttle-add-dropdown select {
    max-width: 165px;
  }
}

/* Shuttle chip refinement */
.shuttlecock-mini-icon {
  width: 16px;
  height: 16px;
  background-color: var(--accent) !important;
  -webkit-mask-image: url("./assets/shuttlecock.png");
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("./assets/shuttlecock.png");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.shuttlecock-mini-icon::before,
.shuttlecock-mini-icon::after {
  content: none !important;
}

.court-shuttle-tab-icon.shuttlecock-mini-icon {
  width: 34px;
  height: 34px;
  color: var(--muted);
  padding: 8px;
  box-sizing: border-box;
  background: var(--muted);
  border-radius: 9px;
}

#settings-panel-courts .court-shuttle-tab.active .court-shuttle-tab-icon.shuttlecock-mini-icon {
  background-color: #fff !important;
  color: #fff;
}

.shuttle-preset-mark .shuttlecock-mini-icon {
  width: 20px;
  height: 20px;
  background-color: var(--accent) !important;
}

.game-shuttle-profile-btn .shuttlecock-img-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: inline-block;
  flex: 0 0 auto;
  opacity: .62;
}

.shuttle-preset-mark .shuttlecock-img-icon {
  width: 20px;
  height: 20px;
  opacity: .55;
}

.court-shuttle-tab-icon.shuttlecock-img-icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--bg2);
  opacity: .6;
}

#settings-panel-courts .court-shuttle-tab.active .court-shuttle-tab-icon.shuttlecock-img-icon {
  background: var(--accent);
  opacity: .85;
  filter: brightness(0) invert(1);
}

.game-shuttle-box {
  padding: 9px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
}

.game-shuttle-copy {
  margin-bottom: 7px;
}

.game-shuttle-chip-wrap,
.game-shuttle-chip-list {
  gap: 6px;
}

.game-shuttle-chip {
  min-height: 30px;
  gap: 2px;
  padding: 2px 3px;
  border-color: color-mix(in srgb, var(--line) 64%, transparent);
  background: var(--card);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.game-shuttle-chip.has-count {
  border-color: color-mix(in srgb, var(--accent) 14%, var(--line));
  background: var(--card);
}

.game-shuttle-profile-btn {
  gap: 4px;
  max-width: 128px;
  padding: 3px 5px;
}

.game-shuttle-profile-copy strong {
  font-size: 0.73rem;
  line-height: 1.05;
}

.game-shuttle-profile-copy small {
  font-size: 0.6rem;
  line-height: 1.05;
}

.game-shuttle-stepper {
  height: 24px;
  background: color-mix(in srgb, var(--bg2) 82%, var(--card));
}

.game-shuttle-stepper button {
  width: 21px;
  height: 21px;
  font-size: 0.78rem;
}

.game-shuttle-stepper span {
  min-width: 18px;
  font-size: 0.76rem;
}

.game-shuttle-remove-btn {
  width: 21px;
  height: 21px;
}

.game-shuttle-add-dropdown {
  min-height: 30px;
  padding: 0 7px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  box-shadow: 0 8px 18px rgba(15, 23, 42, .03);
}

.game-shuttle-add-dropdown select {
  min-height: 28px;
  max-width: 158px;
  font-size: 0.73rem;
}

.shuttle-preset-form {
  grid-template-columns: minmax(160px, 1.2fr) minmax(100px, .7fr) minmax(130px, .9fr) auto;
}

.shuttle-payer-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shuttle-payer-mini-chip,
.shuttle-payer-history-line small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.shuttle-payer-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg2) 76%, var(--card));
}

.shuttle-payer-mini-chip small {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}

.shuttle-payer-mini-empty {
  color: var(--muted);
  font-size: 0.78rem;
}

@media(max-width: 560px) {
  .game-shuttle-profile-btn {
    max-width: 124px;
  }

  .game-shuttle-add-dropdown select {
    max-width: 142px;
  }

  .shuttle-preset-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #shuttle-preset-name,
  .shuttle-preset-form .btn {
    grid-column: 1 / -1;
  }
}

/* Shuttle payer autocomplete + mobile floating nav polish */
#settings-panel-courts .shuttlecock-tab-mark {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  color: var(--muted);
  background: var(--bg2);
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  opacity: 1;
  filter: none !important;
}

#settings-panel-courts .shuttlecock-tab-mark .shuttlecock-mini-icon {
  width: 18px;
  height: 18px;
  background-color: currentColor !important;
  flex: 0 0 auto;
}

#settings-panel-courts .court-shuttle-tab.active .shuttlecock-tab-mark {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

#settings-panel-courts .court-shuttle-tab.active .court-shuttle-tab-icon.shuttlecock-img-icon {
  filter: none !important;
}

#shuttle-preset-payer {
  min-width: 0;
}

.shuttle-profile-admin-payer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft, rgba(20, 184, 166, .045));
}

.shuttle-profile-admin-payer-toggle > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.shuttle-profile-admin-payer-toggle strong {
  color: var(--text);
  font-size: 13px;
}

.shuttle-profile-admin-payer-toggle small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.shuttle-payer-combobox {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.shuttle-payer-combobox #shuttle-preset-payer {
  width: 100%;
  padding-right: 38px;
  font-family: inherit;
}

.shuttle-payer-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.shuttle-payer-toggle:hover,
.shuttle-payer-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

.shuttle-payer-toggle .material-symbols-outlined {
  font-size: 19px !important;
}

.shuttle-payer-suggestions {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  max-height: 236px;
  padding: 6px;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: color-mix(in srgb, var(--card) 96%, #fff);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

.shuttle-payer-suggestions.hidden {
  display: none !important;
}

.shuttle-payer-option {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  text-align: left;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.shuttle-payer-option:hover,
.shuttle-payer-option:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.shuttle-payer-empty {
  padding: 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}

@media (max-width: 899px) {
  body.auth-ready .bottom-nav.main-bottom-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr) !important;
    align-items: center;
    gap: 4px;
    width: min(calc(100vw - 28px), 390px) !important;
    max-width: 390px !important;
    height: 66px;
    left: 50% !important;
    right: auto !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    padding: 8px 14px 7px !important;
    border: 1px solid rgba(20, 184, 166, .13) !important;
    border-radius: 24px 24px 30px 30px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .13) !important;
    backdrop-filter: blur(20px);
    overflow: visible;
  }

  body.auth-ready .bottom-nav.main-bottom-nav::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -29px;
    width: 86px;
    height: 46px;
    transform: translateX(-50%);
    border-radius: 0 0 999px 999px;
    background: var(--bg);
    box-shadow:
      inset 0 -1px 0 rgba(20, 184, 166, .08),
      0 10px 22px rgba(15, 23, 42, .05);
    pointer-events: none;
    z-index: 0;
  }

  html[data-theme="dark"] body.auth-ready .bottom-nav.main-bottom-nav {
    background: rgba(8, 13, 24, .94) !important;
    border-color: rgba(94, 234, 212, .14) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .34) !important;
  }

  html[data-theme="dark"] body.auth-ready .bottom-nav.main-bottom-nav::before {
    background: var(--bg);
    box-shadow: inset 0 -1px 0 rgba(94, 234, 212, .08);
  }

  body.auth-ready .main-bottom-nav .nav-btn {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 48px;
    padding: 5px 4px !important;
    border-radius: 16px;
    color: #64748b;
    background: transparent !important;
    font-size: 10.5px !important;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: 0;
    transform: none !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn svg {
    width: 19px;
    height: 19px;
    margin-bottom: 2px;
    transform: none !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn.active {
    color: var(--accent) !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn.active::after {
    content: none !important;
  }

  body.auth-ready .main-bottom-nav #nav-expense {
    grid-column: 1;
  }

  body.auth-ready .main-bottom-nav #nav-queue {
    grid-column: 2;
    justify-self: center;
    align-self: start;
    position: relative;
    width: 56px;
    height: 56px;
    min-height: 56px;
    margin-top: -29px;
    padding: 0 !important;
    border-radius: 999px;
    border: 5px solid rgba(255, 255, 255, .96);
    color: #ffffff !important;
    background: linear-gradient(135deg, #111827, #1f2937) !important;
    box-shadow:
      0 13px 26px rgba(15, 23, 42, .18),
      0 5px 12px rgba(15, 23, 42, .14) !important;
    font-size: 0 !important;
    z-index: 2;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue {
    border-color: rgba(8, 13, 24, .96);
  }

  body.auth-ready .main-bottom-nav #nav-queue svg {
    width: 22px;
    height: 22px;
    margin: 0;
    stroke-width: 2;
    color: #5eead4;
  }

  body.auth-ready .main-bottom-nav #nav-queue::after {
    content: "จัดคิว" !important;
    position: absolute;
    left: 50%;
    top: 58px;
    bottom: auto;
    width: auto;
    height: auto;
    transform: translateX(-50%);
    color: var(--accent);
    background: transparent !important;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
  }

  body.auth-ready .main-bottom-nav #nav-stats {
    grid-column: 3;
  }

  body.auth-ready .main-bottom-nav .nav-btn:not(#nav-queue):hover {
    color: var(--text);
  }

  body.auth-ready .page {
    padding-bottom: 104px !important;
  }
}

@media (max-width: 380px) {
  body.auth-ready .bottom-nav.main-bottom-nav {
    width: min(calc(100vw - 20px), 360px) !important;
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) !important;
    padding-inline: 10px !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue {
    width: 54px;
    height: 54px;
    min-height: 54px;
  }
}

/* Mobile bottom nav: closer to the reference pill + raised center button */
@media (max-width: 899px) {
  body.auth-ready .bottom-nav.main-bottom-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 2px !important;
    width: min(calc(100vw - 32px), 430px) !important;
    max-width: 430px !important;
    height: 78px !important;
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    padding: 14px 18px 13px !important;
    border: 0 !important;
    border-radius: 28px 28px 34px 34px !important;
    background: #1d1d1f !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .26) !important;
    overflow: visible !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: -39px !important;
    width: 94px !important;
    height: 94px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background: #1d1d1f !important;
    box-shadow: 0 0 0 10px var(--bg), 0 16px 34px rgba(15, 23, 42, .20) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  html[data-theme="dark"] body.auth-ready .bottom-nav.main-bottom-nav,
  html[data-theme="dark"] body.auth-ready .bottom-nav.main-bottom-nav::before {
    background: #171719 !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 5px 4px 3px !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .76) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn svg {
    width: 21px !important;
    height: 21px !important;
    margin: 0 0 5px !important;
    color: currentColor !important;
    transform: none !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn.active:not(#nav-queue) {
    color: #18f15a !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn.active::after {
    content: none !important;
  }

  body.auth-ready .main-bottom-nav #nav-expense {
    grid-column: 1 !important;
    justify-self: center !important;
    width: 100% !important;
  }

  body.auth-ready .main-bottom-nav #nav-stats {
    grid-column: 3 !important;
    justify-self: center !important;
    width: 100% !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: start !important;
    width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    margin-top: -44px !important;
    padding: 0 !important;
    border: 8px solid var(--bg) !important;
    border-radius: 999px !important;
    background: #1d1d1f !important;
    color: #18f15a !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .28) !important;
    font-size: 0 !important;
    z-index: 2 !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue {
    background: #171719 !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue svg {
    width: 27px !important;
    height: 27px !important;
    margin: 0 !important;
    color: #18f15a !important;
    stroke-width: 2.1 !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue::after {
    content: "จัดคิว" !important;
    position: absolute !important;
    left: 50% !important;
    top: 70px !important;
    width: auto !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    color: #18f15a !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn:not(#nav-queue):hover {
    color: #fff !important;
  }

  body.auth-ready .page {
    padding-bottom: 116px !important;
  }
}

@media (max-width: 380px) {
  body.auth-ready .bottom-nav.main-bottom-nav {
    width: min(calc(100vw - 24px), 380px) !important;
    grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr) !important;
    height: 76px !important;
    padding-inline: 14px !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav::before {
    width: 88px !important;
    height: 88px !important;
    top: -36px !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue {
    width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    margin-top: -41px !important;
  }
}

/* Mobile bottom nav correction: compact QBAD light tone, no clipped labels */
@media (max-width: 899px) {
  body.auth-ready .bottom-nav.main-bottom-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    width: min(calc(100vw - 32px), 410px) !important;
    max-width: 410px !important;
    height: 70px !important;
    left: 50% !important;
    right: auto !important;
    bottom: 12px !important;
    transform: translateX(-50%) !important;
    padding: 9px 16px !important;
    border: 1px solid rgba(20, 184, 166, .16) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16) !important;
    backdrop-filter: blur(18px) !important;
    overflow: visible !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: -28px !important;
    width: 82px !important;
    height: 52px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px 999px 0 0 !important;
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(20, 184, 166, .13) !important;
    border-bottom: 0 !important;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .06) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 5px 2px !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn svg {
    width: 20px !important;
    height: 20px !important;
    margin: 0 0 4px !important;
    color: currentColor !important;
    transform: none !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn.active:not(#nav-queue) {
    color: var(--accent) !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn.active::after {
    content: none !important;
  }

  body.auth-ready .main-bottom-nav #nav-expense {
    grid-column: 1 !important;
  }

  body.auth-ready .main-bottom-nav #nav-stats {
    grid-column: 3 !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: start !important;
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    margin-top: -31px !important;
    padding: 0 !important;
    border: 7px solid rgba(255, 255, 255, .98) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #19c7a8, var(--accent)) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(20, 184, 166, .30) !important;
    font-size: 0 !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue svg {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    color: #fff !important;
    stroke-width: 2.1 !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue::after {
    content: none !important;
  }

  html[data-theme="dark"] body.auth-ready .bottom-nav.main-bottom-nav {
    background: rgba(15, 23, 42, .92) !important;
    border-color: rgba(94, 234, 212, .14) !important;
  }

  html[data-theme="dark"] body.auth-ready .bottom-nav.main-bottom-nav::before {
    background: rgba(15, 23, 42, .92) !important;
    border-color: rgba(94, 234, 212, .14) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav .nav-btn {
    color: rgba(255, 255, 255, .72) !important;
  }

  body.auth-ready .page {
    padding-bottom: 108px !important;
  }
}

@media (max-width: 380px) {
  body.auth-ready .bottom-nav.main-bottom-nav {
    width: min(calc(100vw - 24px), 370px) !important;
    grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr) !important;
    height: 68px !important;
    padding-inline: 12px !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav::before {
    width: 76px !important;
    height: 48px !important;
    top: -26px !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue {
    width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    margin-top: -29px !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn {
    font-size: 10px !important;
  }
}

/* Mobile bottom nav final reference adaptation: five-slot charcoal pill */
@media (max-width: 899px) {
  body.auth-ready .bottom-nav.main-bottom-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 86px minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    width: min(calc(100vw - 24px), 460px) !important;
    max-width: 460px !important;
    height: 92px !important;
    left: 50% !important;
    right: auto !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    padding: 14px 16px 20px !important;
    border: 0 !important;
    border-radius: 30px 30px 38px 38px !important;
    background: linear-gradient(180deg, #202021 0%, #19191a 100%) !important;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .28) !important;
    overflow: visible !important;
    isolation: isolate;
  }

  body.auth-ready .bottom-nav.main-bottom-nav::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: -42px !important;
    width: 102px !important;
    height: 102px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #202021 0%, #19191a 100%) !important;
    box-shadow:
      0 0 0 10px var(--bg),
      0 15px 34px rgba(15, 23, 42, .22) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 10px !important;
    width: 118px !important;
    height: 5px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .24) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 4px 0 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #f8fafc !important;
    font-size: clamp(9px, 2.55vw, 12px) !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    transform: none !important;
    overflow: visible !important;
    text-align: center !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn svg {
    width: 24px !important;
    height: 24px !important;
    margin: 0 0 7px !important;
    color: currentColor !important;
    transform: none !important;
    stroke-width: 2 !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn span:not(.nav-plus-inner) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn.active:not(.nav-plus),
  body.auth-ready .main-bottom-nav .nav-home.active {
    color: #18f15a !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn.active::after {
    content: none !important;
  }

  body.auth-ready .main-bottom-nav .nav-home {
    grid-column: 1 !important;
  }

  body.auth-ready .main-bottom-nav .nav-pickup {
    grid-column: 2 !important;
  }

  body.auth-ready .main-bottom-nav .nav-plus {
    grid-column: 3 !important;
    justify-self: center !important;
    align-self: start !important;
    width: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    margin-top: -48px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #202021 0%, #19191a 100%) !important;
    color: #101112 !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .25) !important;
    font-size: 0 !important;
    z-index: 2 !important;
  }

  body.auth-ready .main-bottom-nav .nav-plus-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    background: #18f15a !important;
    color: #101112 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .10) !important;
  }

  body.auth-ready .main-bottom-nav .nav-notification {
    grid-column: 4 !important;
  }

  body.auth-ready .main-bottom-nav .nav-profile {
    grid-column: 5 !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn:not(.active):not(.nav-plus) {
    color: rgba(255, 255, 255, .92) !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn:not(.nav-plus):hover {
    color: #18f15a !important;
  }

  body.auth-ready .page {
    padding-bottom: 128px !important;
  }
}

@media (max-width: 380px) {
  body.auth-ready .bottom-nav.main-bottom-nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 74px minmax(0, 1fr) minmax(0, 1fr) !important;
    width: min(calc(100vw - 16px), 370px) !important;
    height: 86px !important;
    padding: 12px 10px 18px !important;
    border-radius: 26px 26px 34px 34px !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav::before {
    width: 90px !important;
    height: 90px !important;
    top: -38px !important;
    box-shadow: 0 0 0 8px var(--bg), 0 13px 28px rgba(15, 23, 42, .20) !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav::after {
    width: 100px !important;
    bottom: 8px !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn {
    height: 50px !important;
    min-height: 50px !important;
    font-size: clamp(8.2px, 2.45vw, 10px) !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn svg {
    width: 21px !important;
    height: 21px !important;
    margin-bottom: 6px !important;
  }

  body.auth-ready .main-bottom-nav .nav-plus {
    width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    margin-top: -43px !important;
  }

  body.auth-ready .main-bottom-nav .nav-plus-inner {
    width: 32px !important;
    height: 32px !important;
    font-size: 22px !important;
  }
}

/* Mobile bottom nav final: 3 buttons, queue centered as default */
@media (max-width: 899px) {
  body.auth-ready .bottom-nav.main-bottom-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: min(calc(100vw - 24px), 430px) !important;
    max-width: 430px !important;
    height: 72px !important;
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    padding: 9px 18px !important;
    border: 1px solid rgba(15, 23, 42, .06) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16) !important;
    backdrop-filter: blur(18px) !important;
    overflow: visible !important;
    isolation: isolate;
  }

  body.auth-ready .bottom-nav.main-bottom-nav::before,
  body.auth-ready .bottom-nav.main-bottom-nav::after {
    content: none !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 5px 2px 3px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #596272 !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    transform: none !important;
    overflow: hidden !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn svg {
    width: 22px !important;
    height: 22px !important;
    margin: 0 0 5px !important;
    color: currentColor !important;
    transform: none !important;
    stroke-width: 1.85 !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn span {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn.active::after {
    content: none !important;
  }

  body.auth-ready .main-bottom-nav .nav-expense {
    grid-column: 1 !important;
  }

  body.auth-ready .main-bottom-nav .nav-queue {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: start !important;
    width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
    margin-top: -26px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #18a7e6, #0c8bd3) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(14, 139, 211, .32) !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  body.auth-ready .main-bottom-nav .nav-queue svg {
    width: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    color: #fff !important;
  }

  body.auth-ready .main-bottom-nav .nav-queue span {
    position: absolute !important;
    left: 50% !important;
    top: 64px !important;
    width: auto !important;
    transform: translateX(-50%) !important;
    color: #0c8bd3 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body.auth-ready .main-bottom-nav .nav-stats {
    grid-column: 3 !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn.active:not(.nav-queue) {
    color: #0c8bd3 !important;
  }

  html[data-theme="dark"] body.auth-ready .bottom-nav.main-bottom-nav {
    background: rgba(15, 23, 42, .92) !important;
    border-color: rgba(148, 163, 184, .16) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav .nav-btn {
    color: rgba(255, 255, 255, .76) !important;
  }

  body.auth-ready .page {
    padding-bottom: 112px !important;
  }
}

@media (max-width: 380px) {
  body.auth-ready .bottom-nav.main-bottom-nav {
    width: min(calc(100vw - 18px), 380px) !important;
    grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr) !important;
    height: 68px !important;
    gap: 8px !important;
    padding-inline: 14px !important;
  }

  body.auth-ready .main-bottom-nav .nav-queue {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    margin-top: -24px !important;
  }

  body.auth-ready .main-bottom-nav .nav-queue span {
    top: 60px !important;
    font-size: 10px !important;
  }

  body.auth-ready .main-bottom-nav .nav-btn {
    font-size: 10px !important;
  }
}

/* Mobile bottom nav state fix: clear inactive tabs and only lift queue when active */
@media (max-width: 899px) {
  body.auth-ready .main-bottom-nav .nav-expense:not(.active),
  body.auth-ready .main-bottom-nav .nav-stats:not(.active) {
    color: #64748b !important;
  }

  body.auth-ready .main-bottom-nav .nav-expense.active,
  body.auth-ready .main-bottom-nav .nav-stats.active {
    color: var(--accent) !important;
  }

  body.auth-ready .main-bottom-nav .nav-queue {
    background: transparent !important;
    color: #64748b !important;
    box-shadow: none !important;
  }

  body.auth-ready .main-bottom-nav .nav-queue span {
    color: #64748b !important;
  }

  body.auth-ready .main-bottom-nav .nav-queue.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, #2dd4bf), var(--accent)) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  }

  body.auth-ready .main-bottom-nav .nav-queue.active span {
    color: var(--accent) !important;
  }

  body.auth-ready .main-bottom-nav .nav-queue.active svg {
    color: #fff !important;
  }

  body.auth-ready .main-bottom-nav .nav-queue:not(.active) svg {
    color: #64748b !important;
  }
}

/* Mobile bottom nav hard state override: force icon/text colors past older cached rules */
@media (max-width: 899px) {
  body.auth-ready .main-bottom-nav #nav-expense:not(.active),
  body.auth-ready .main-bottom-nav #nav-stats:not(.active) {
    background: transparent !important;
    color: #64748b !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.auth-ready .main-bottom-nav #nav-expense:not(.active) svg,
  body.auth-ready .main-bottom-nav #nav-expense:not(.active) span,
  body.auth-ready .main-bottom-nav #nav-stats:not(.active) svg,
  body.auth-ready .main-bottom-nav #nav-stats:not(.active) span {
    color: #64748b !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.auth-ready .main-bottom-nav #nav-expense.active,
  body.auth-ready .main-bottom-nav #nav-stats.active {
    background: transparent !important;
    color: var(--accent) !important;
  }

  body.auth-ready .main-bottom-nav #nav-expense.active svg,
  body.auth-ready .main-bottom-nav #nav-expense.active span,
  body.auth-ready .main-bottom-nav #nav-stats.active svg,
  body.auth-ready .main-bottom-nav #nav-stats.active span {
    color: var(--accent) !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: var(--accent) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue {
    background: linear-gradient(180deg, #ffffff, #f1f5f9) !important;
    color: #64748b !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .10) !important;
    filter: none !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue svg,
  body.auth-ready .main-bottom-nav #nav-queue span {
    color: #64748b !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #2dd4bf), var(--accent)) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue.active svg {
    color: #fff !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: #fff !important;
  }

  body.auth-ready .main-bottom-nav #nav-queue.active span {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
  }
}

/* Shuttle tab icon sizing + queue inactive material refinement */
#settings-panel-courts .shuttlecock-tab-mark {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  flex: 0 0 28px !important;
}

#settings-panel-courts .shuttlecock-tab-mark .shuttlecock-mini-icon {
  width: 14px !important;
  height: 14px !important;
}

#settings-panel-courts .court-shuttle-tab-copy {
  min-width: 0;
}

@media (max-width: 899px) {
  body.auth-ready .main-bottom-nav #nav-queue:not(.active) {
    background: linear-gradient(180deg, #ffffff, #f1f5f9) !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .10) !important;
  }
}

/* Responsive court/shuttle settings: keep sub tabs on the left to reduce scrolling */
@media (max-width: 900px) {
  body.auth-ready #settings-panel-courts.active {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  body.auth-ready #settings-panel-courts .settings-panel-head {
    grid-column: 1 / -1 !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tabs {
    grid-column: 1 !important;
    grid-row: 2 / span 8 !important;
    position: sticky !important;
    top: 84px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab {
    width: 100% !important;
    min-height: 86px !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 7px !important;
    padding: 9px 7px !important;
    text-align: center !important;
    border-radius: 14px !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-icon,
  body.auth-ready #settings-panel-courts .shuttlecock-tab-mark {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
  }

  body.auth-ready #settings-panel-courts .shuttlecock-tab-mark .shuttlecock-mini-icon {
    width: 15px !important;
    height: 15px !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-copy {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-copy strong {
    font-size: .68rem !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-copy small {
    display: none !important;
  }

  body.auth-ready #settings-panel-courts > .add-player-card,
  body.auth-ready #settings-panel-courts > .card:not(.shuttle-settings-card),
  body.auth-ready #settings-panel-courts .court-shuttle-panel-shuttles {
    grid-column: 2 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.auth-ready #settings-panel-courts.show-shuttles .court-shuttle-panel-shuttles {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 430px) {
  body.auth-ready #settings-panel-courts.active {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tabs {
    top: 74px !important;
    gap: 6px !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab {
    min-height: 78px !important;
    padding: 8px 5px !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-icon,
  body.auth-ready #settings-panel-courts .shuttlecock-tab-mark {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-copy strong {
    font-size: .62rem !important;
  }
}

/* Expense page hint: guide admins to close the session after summary */
.expense-session-hint {
  display: none !important;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  max-width: 640px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  color: var(--muted);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 750;
  font-family: inherit;
  line-height: 1.45;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

body.demo-sandbox-active .expense-session-hint {
  display: inline-flex !important;
}

.expense-session-hint:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  transform: translateY(-1px);
}

.expense-session-hint .material-symbols-outlined {
  margin-top: 1px;
  color: var(--accent);
  font-size: 16px !important;
  flex: 0 0 auto;
}

.expense-session-hint strong {
  color: var(--text);
  font-weight: 900;
}

@media (max-width: 560px) {
  body.demo-sandbox-active .expense-session-hint {
    display: flex !important;
    width: 100%;
    box-sizing: border-box;
    font-size: .74rem;
  }
}

@media (max-width: 639px) {
  body.auth-ready #settings-panel-courts.active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.auth-ready #settings-panel-courts .settings-panel-head,
  body.auth-ready #settings-panel-courts .court-shuttle-tabs,
  body.auth-ready #settings-panel-courts > .add-player-card,
  body.auth-ready #settings-panel-courts > .card:not(.shuttle-settings-card),
  body.auth-ready #settings-panel-courts .court-shuttle-panel-shuttles {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tabs {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab {
    min-height: 58px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    justify-items: stretch !important;
    align-content: center !important;
    gap: 7px !important;
    padding: 8px !important;
    text-align: left !important;
    border-radius: 12px !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-copy strong {
    font-size: .68rem !important;
    line-height: 1.14 !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-copy small {
    display: none !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-panel-shuttles {
    display: none !important;
  }

  body.auth-ready #settings-panel-courts.show-shuttles .court-shuttle-panel-shuttles {
    display: grid !important;
  }

  body.auth-ready #settings-panel-courts.show-shuttles > .add-player-card,
  body.auth-ready #settings-panel-courts.show-shuttles > .card:not(.shuttle-settings-card) {
    display: none !important;
  }
}

/* Tablet landscape settings tabs: compact, stable, no shifting on active state */
@media (min-width: 768px) and (max-width: 1194px) and (orientation: landscape) and (min-height: 560px) {
  body.auth-ready #page-settings .settings-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(86px, 124px)) !important;
    justify-content: start !important;
    align-items: center !important;
    width: max-content !important;
    max-width: min(100%, 430px) !important;
    min-height: 58px !important;
    gap: 5px !important;
    padding: 5px !important;
    margin: 10px 0 14px !important;
    border-radius: 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  body.auth-ready #page-settings .settings-tabs::-webkit-scrollbar {
    display: none;
  }

  body.auth-ready #page-settings .settings-tab {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 6px 4px !important;
    gap: 3px !important;
    border-radius: 14px !important;
    transform: none !important;
    transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
  }

  body.auth-ready #page-settings .settings-tab.active {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .06) !important;
  }

  body.auth-ready #page-settings .settings-tab .tab-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
    line-height: 20px !important;
    transform: none !important;
  }

  body.auth-ready #page-settings .settings-tab.active .tab-icon {
    transform: none !important;
  }

  body.auth-ready #page-settings .settings-tab .tab-label {
    max-width: 100% !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

@media (min-width: 768px) and (max-width: 980px) and (orientation: landscape) and (min-height: 560px) {
  body.auth-ready #page-settings .settings-tabs {
    grid-template-columns: repeat(3, minmax(78px, 112px)) !important;
    max-width: min(100%, 380px) !important;
  }
}

/* Tablet landscape repair: keep shuttle settings readable and stop side-tab squeeze */
@media (min-width: 768px) and (max-width: 1194px) and (orientation: landscape) and (min-height: 560px) {
  body.auth-ready #settings-panel-courts.active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  body.auth-ready #settings-panel-courts .settings-panel-head,
  body.auth-ready #settings-panel-courts .court-shuttle-tabs,
  body.auth-ready #settings-panel-courts > .add-player-card,
  body.auth-ready #settings-panel-courts > .card:not(.shuttle-settings-card),
  body.auth-ready #settings-panel-courts .court-shuttle-panel-shuttles {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: static !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(170px, 220px)) !important;
    justify-content: start !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    justify-items: stretch !important;
    align-content: center !important;
    min-height: 58px !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    text-align: left !important;
    border-radius: 14px !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-icon,
  body.auth-ready #settings-panel-courts .shuttlecock-tab-mark {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-copy {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-copy strong {
    display: block !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-tab-copy small {
    display: block !important;
    margin-top: 1px !important;
    font-size: .6rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.auth-ready #settings-panel-courts .court-shuttle-panel-shuttles {
    display: none !important;
  }

  body.auth-ready #settings-panel-courts.show-shuttles > .add-player-card,
  body.auth-ready #settings-panel-courts.show-shuttles > .card:not(.shuttle-settings-card) {
    display: none !important;
  }

  body.auth-ready #settings-panel-courts.show-shuttles .court-shuttle-panel-shuttles {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.auth-ready #settings-panel-courts .shuttle-settings-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.auth-ready #settings-panel-courts .shuttle-preset-form {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) minmax(112px, .55fr) minmax(150px, .75fr) minmax(118px, auto) !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.auth-ready #settings-panel-courts .shuttle-preset-form input,
  body.auth-ready #settings-panel-courts .shuttle-payer-combobox,
  body.auth-ready #settings-panel-courts .shuttle-preset-form .btn {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 768px) and (max-width: 980px) and (orientation: landscape) and (min-height: 560px) {
  body.auth-ready #settings-panel-courts .court-shuttle-tabs {
    grid-template-columns: repeat(2, minmax(150px, 190px)) !important;
  }

  body.auth-ready #settings-panel-courts .shuttle-preset-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.auth-ready #settings-panel-courts #shuttle-preset-name,
  body.auth-ready #settings-panel-courts .shuttle-preset-form .btn {
    grid-column: 1 / -1 !important;
  }
}

/* Dark mode bottom nav: active green, inactive muted gray */
@media (max-width: 899px) {
  html[data-theme="dark"] body.auth-ready .bottom-nav.main-bottom-nav {
    background: rgba(10, 18, 34, .94) !important;
    border-color: rgba(148, 163, 184, .20) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav .nav-btn:not(.active),
  html[data-theme="dark"] body.auth-ready .main-bottom-nav .nav-btn:not(.active) svg,
  html[data-theme="dark"] body.auth-ready .main-bottom-nav .nav-btn:not(.active) span {
    color: #7f8da3 !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: #7f8da3 !important;
    opacity: 1 !important;
    filter: none !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue {
    background: linear-gradient(180deg, #182337, #101827) !important;
    color: #7f8da3 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .22) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue:not(.active) svg,
  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue:not(.active) span {
    color: #7f8da3 !important;
    -webkit-text-fill-color: #7f8da3 !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav .nav-btn.active:not(#nav-queue),
  html[data-theme="dark"] body.auth-ready .main-bottom-nav .nav-btn.active:not(#nav-queue) svg,
  html[data-theme="dark"] body.auth-ready .main-bottom-nav .nav-btn.active:not(#nav-queue) span {
    color: var(--accent) !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: var(--accent) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, #2dd4bf), var(--accent)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 30%, transparent) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active svg {
    color: #ffffff !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active span {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
  }
}

/* Legacy dark queue ring neutralized by split theme rules below */
@media (max-width: 899px) {
  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #2dd4bf), var(--accent)) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active span {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
    text-shadow: none !important;
  }
}

/* Dark queue button final: active matches light, inactive uses dark material */
@media (max-width: 899px) {
  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue:not(.active) {
    background: linear-gradient(180deg, #162235, #0f1726) !important;
    color: #7f8da3 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .24) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue:not(.active) svg,
  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue:not(.active) span {
    color: #7f8da3 !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: #7f8da3 !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #2dd4bf), var(--accent)) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active svg {
    color: #ffffff !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active span {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
    text-shadow: none !important;
  }
}

/* Queue nav theme split: keep light and dark materials independent */
@media (max-width: 899px) {
  html[data-theme="light"] body.auth-ready .main-bottom-nav #nav-queue:not(.active) {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 0 !important;
    color: #64748b !important;
    box-shadow:
      0 8px 18px rgba(15, 23, 42, .09),
      0 2px 5px rgba(15, 23, 42, .05) !important;
  }

  html[data-theme="light"] body.auth-ready .main-bottom-nav #nav-queue.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #2dd4bf), var(--accent)) !important;
    border: 4px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow:
      0 12px 24px color-mix(in srgb, var(--accent) 28%, transparent),
      0 2px 8px rgba(15, 23, 42, .10) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue,
  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue:not(.active) {
    background: linear-gradient(180deg, #172338, #0d1626) !important;
    border: 0 !important;
    outline: 0 !important;
    color: #7f8da3 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .26) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue:not(.active)::before,
  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue:not(.active)::after {
    content: none !important;
    display: none !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue:not(.active) svg,
  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue:not(.active) span {
    color: #7f8da3 !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: #7f8da3 !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #2dd4bf), var(--accent)) !important;
    border: 0 !important;
    outline: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active svg {
    color: #ffffff !important;
    stroke: currentColor !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  html[data-theme="dark"] body.auth-ready .main-bottom-nav #nav-queue.active span {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
    text-shadow: none !important;
  }
}
/* Google OAuth provisional access */
.auth-method-chooser {
  display: grid;
  gap: 10px;
}

.auth-method-btn {
  width: 100%;
  min-height: 58px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg3);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.auth-method-btn:hover {
  border-color: rgba(20, 184, 166, .38);
  background: rgba(20, 184, 166, .07);
  transform: translateY(-1px);
}

.auth-method-btn:focus-visible {
  outline: 3px solid rgba(20, 184, 166, .22);
  outline-offset: 2px;
}

.auth-method-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  background: rgba(20, 184, 166, .11);
  color: #0f766e;
  font-size: 17px;
}

.auth-method-btn>span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.auth-method-btn strong {
  font-size: 14px;
  line-height: 1.25;
}

.auth-method-btn small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.auth-email-form {
  margin-top: 2px;
}

#auth-register-panel {
  padding: 14px;
}

#auth-register-panel .auth-login-prompt {
  margin: 2px 0 12px;
}

#auth-register-email-form .auth-field {
  margin-bottom: 8px;
}

#auth-register-email-form .auth-field label {
  margin-bottom: 4px;
  font-size: 11.5px;
}

#auth-register-email-form .auth-field input {
  min-height: 42px;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  font-size: 14px;
}

#auth-register-panel .auth-turnstile-wrap {
  margin: 6px 0 10px;
}

#auth-register-panel .auth-submit-btn {
  padding-block: 10px;
}

.auth-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.auth-or-divider::before,
.auth-or-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

.auth-signup-prompt {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.auth-login-prompt {
  margin: 4px 0 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.auth-login-prompt button {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #0f766e;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.auth-login-prompt button:hover {
  text-decoration: underline;
}

.auth-login-prompt button:focus-visible {
  outline: 2px solid rgba(20, 184, 166, .3);
  outline-offset: 3px;
  border-radius: 4px;
}

.auth-register-divider {
  margin-top: 12px;
}

.auth-signup-prompt button {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #0f766e;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.auth-signup-prompt button:hover {
  text-decoration: underline;
}

.auth-signup-prompt button:focus-visible {
  outline: 2px solid rgba(20, 184, 166, .3);
  outline-offset: 3px;
  border-radius: 4px;
}

.auth-back-btn {
  margin-top: 9px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.auth-method-chooser>.auth-secondary-btn,
.auth-method-chooser>.auth-google-btn {
  margin-top: 0;
}

.auth-guest-btn {
  border-color: rgba(20, 184, 166, .2);
}

.auth-google-btn {
  width: 100%;
  min-height: 52px;
  margin-top: 10px;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 12px;
  background: var(--card, #fff);
  color: var(--text, #111827);
  font: inherit;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.auth-google-btn:hover {
  border-color: rgba(66, 133, 244, .65);
  background: rgba(66, 133, 244, .06);
}

.auth-google-btn:focus-visible {
  outline: 3px solid rgba(66, 133, 244, .28);
  outline-offset: 2px;
}

.auth-google-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.auth-google-mark {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
}

.auth-google-mark svg {
  display: block;
  width: 18px;
  height: 18px;
}

.auth-passkey-group {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.auth-passkey-btn {
  width: 100%;
  min-height: 56px;
  margin-top: 0;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #18c5a8, #0ea889);
  color: #fff;
  font: inherit;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(17, 184, 154, .18);
  transition: box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}

.auth-passkey-btn:hover {
  filter: brightness(1.04) saturate(1.04);
  box-shadow: 0 16px 30px rgba(17, 184, 154, .24);
}

.auth-passkey-btn:focus-visible {
  outline: 3px solid rgba(20, 184, 166, .25);
  outline-offset: 2px;
}

.auth-passkey-feedback {
  padding: 11px 12px;
  border: 1px solid rgba(220, 38, 38, .22);
  border-radius: 11px;
  background: rgba(220, 38, 38, .07);
  color: #b42318;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.55;
  text-align: left;
  white-space: pre-line;
}

[data-theme="dark"] .auth-passkey-feedback {
  border-color: rgba(255, 180, 171, .24);
  background: rgba(127, 29, 29, .2);
  color: #ffb4ab;
}

.auth-passkey-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.auth-passkey-mark {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  font-size: 23px;
  line-height: 1;
}

.auth-passkey-label {
  min-width: 0;
}

.auth-secondary-disclosure {
  margin-top: 12px;
}

.auth-secondary-disclosure.is-primary {
  margin-top: 0;
}

.auth-secondary-summary {
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  transition: border-color .18s ease, background .18s ease;
}

.auth-secondary-summary::-webkit-details-marker {
  display: none;
}

.auth-secondary-summary:hover {
  border-color: rgba(20, 184, 166, .4);
  background: rgba(20, 184, 166, .045);
}

.auth-secondary-summary:focus-visible {
  outline: 3px solid rgba(20, 184, 166, .22);
  outline-offset: 2px;
}

.auth-secondary-summary-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

.auth-secondary-summary-copy strong {
  font-size: 12.5px;
  line-height: 1.3;
}

.auth-secondary-summary-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.auth-secondary-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 21px;
  transition: transform .18s ease, color .18s ease;
}

.auth-secondary-disclosure[open] .auth-secondary-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.auth-secondary-disclosure.is-primary > .auth-secondary-summary {
  display: none;
}

.auth-secondary-content {
  padding-top: 12px;
}

.auth-secondary-disclosure.is-primary > .auth-secondary-content {
  padding-top: 0;
}

.auth-secondary-content .auth-email-form {
  margin-top: 0;
}

html[data-theme="dark"] .auth-secondary-summary {
  background: rgba(18, 26, 43, .32);
}

html[data-theme="dark"] .auth-secondary-summary:hover {
  border-color: rgba(94, 234, 212, .35);
  background: rgba(94, 234, 212, .07);
}

.passkey-card {
  display: grid;
  gap: 10px;
}

.passkey-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.passkey-card-copy {
  min-width: 0;
}

.passkey-card-copy strong,
.passkey-card-copy small {
  display: block;
}

.passkey-card-copy strong {
  color: var(--text, #0f172a);
  font-size: 14px;
}

.passkey-card-copy small {
  margin-top: 4px;
  color: var(--muted, #64748b);
  font-size: 11px;
  line-height: 1.5;
}

.passkey-status[data-state="success"] {
  color: #047857;
}

.passkey-status[data-state="error"] {
  color: #b91c1c;
}

.passkey-credentials {
  display: grid;
  gap: 8px;
  padding: 0 16px 16px;
}

.passkey-credentials-title {
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 800;
}

.passkey-credential-list {
  display: grid;
  gap: 8px;
}

.passkey-credential-row {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(16, 189, 165, .16);
  border-radius: 11px;
  background: rgba(16, 189, 165, .035);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.passkey-credential-icon {
  color: var(--accent, #10bda5);
  font-size: 21px;
}

.passkey-credential-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.passkey-credential-copy strong,
.passkey-credential-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.passkey-credential-copy strong {
  color: var(--text, #0f172a);
  font-size: 12px;
  font-weight: 800;
}

.passkey-credential-copy small {
  color: var(--muted, #64748b);
  font-size: 10.5px;
  line-height: 1.4;
}

.passkey-delete-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid rgba(220, 38, 38, .24);
  border-radius: 9px;
  color: #b42318;
  background: rgba(220, 38, 38, .045);
  font-size: 11px;
  font-weight: 800;
}

.passkey-delete-btn:hover:not(:disabled) {
  border-color: rgba(220, 38, 38, .42);
  background: rgba(220, 38, 38, .09);
}

.passkey-delete-btn .material-symbols-outlined {
  font-size: 17px;
}

html[data-theme="dark"] .passkey-credential-row {
  border-color: rgba(114, 239, 210, .2);
  background: rgba(16, 189, 165, .07);
}

html[data-theme="dark"] .passkey-credential-copy strong {
  color: #f4f9f8;
}

html[data-theme="dark"] .passkey-delete-btn {
  border-color: rgba(255, 180, 171, .28);
  color: #ffb4ab;
  background: rgba(127, 29, 29, .2);
}

@media (max-width: 540px) {
  .passkey-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .passkey-card-head .btn {
    width: 100%;
  }

  .passkey-credential-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .passkey-delete-btn {
    grid-column: 2;
    width: 100%;
  }
}

.provisional-access-banner {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 70;
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(100, 116, 139, .16);
  background: rgba(255, 255, 255, .72);
  color: rgba(71, 85, 105, .9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: -.01em;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .07);
  backdrop-filter: blur(12px);
  pointer-events: none;
  opacity: .82;
}

.provisional-access-banner strong {
  color: inherit;
  font-size: inherit;
  font-weight: 800;
  white-space: nowrap;
}

.provisional-access-banner strong::after {
  content: "·";
  margin-left: 6px;
  font-weight: 500;
  opacity: .55;
}

html[data-theme="dark"] .provisional-access-banner {
  border-color: rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .68);
  color: rgba(203, 213, 225, .86);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
}

.provisional-access-banner.hidden {
  display: none;
}

@media (max-width: 899px) {
  .provisional-access-banner {
    bottom: calc(112px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 32px);
    padding: 5px 9px;
    font-size: 10.5px;
  }
}

@media (max-width: 420px) {
  .provisional-access-banner {
    white-space: nowrap;
  }
}

.access-block-row {
  border-color: rgba(239, 68, 68, .2);
}

.access-block-avatar {
  background: rgba(239, 68, 68, .12);
  color: #dc2626;
}

/* Custom Queue Settings Factor Disabling */
.priority-item.is-disabled {
  opacity: 0.55;
  filter: grayscale(40%);
  background: var(--bg2);
}

.priority-item.is-disabled .priority-drag-handle {
  cursor: not-allowed;
  pointer-events: none;
}

.priority-item.is-disabled .priority-btn {
  pointer-events: none;
  opacity: 0.5;
}

.priority-item .qbad-toggle-switch {
  margin-right: 0;
}

/* Reusable Modern iOS-style Toggle Switch */
.qbad-toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  margin-right: 6px;
}

.qbad-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.qbad-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border);
  transition: .2s ease;
  border-radius: 34px;
}

.qbad-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .2s ease;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.qbad-toggle-switch input:checked + .qbad-toggle-slider {
  background-color: var(--accent);
}

.qbad-toggle-switch input:checked + .qbad-toggle-slider:before {
  transform: translateX(18px);
}

.expense-payer-toggle-label {
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.priority-factor-checkbox {
  cursor: pointer;
}

.factor-confirm-card {
  max-width: 420px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
  text-align: center;
}

.factor-confirm-card h3 {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 12px;
  color: var(--text);
}

.factor-confirm-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  text-align: left;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 20px;
}

.factor-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Court settings v2: desktop parent grid was placing this layout in column 1 only. */
body.auth-ready #settings-panel-courts.active > .court-settings-layout {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.auth-ready #settings-panel-courts .court-settings-content,
body.auth-ready #settings-panel-courts .court-settings-panel,
body.auth-ready #settings-panel-courts .court-settings-panel > .card,
body.auth-ready #settings-panel-courts #court-settings-panel-count > .card,
body.auth-ready #settings-panel-courts #court-settings-panel-profiles > .card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#court-profile-add-modal .court-profile-edit-actions,
#shuttle-profile-add-modal .court-profile-edit-actions {
  display: flex !important;
  grid-template-columns: none !important;
  grid-column: 1 / -1 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 18px !important;
}

#court-profile-add-modal .court-profile-edit-actions .btn,
#shuttle-profile-add-modal .court-profile-edit-actions .btn {
  width: auto !important;
  min-width: 132px !important;
  white-space: nowrap !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

#court-profile-add-modal .court-profile-edit-actions .btn-primary,
#shuttle-profile-add-modal .court-profile-edit-actions .btn-primary {
  min-width: 190px !important;
}

@media (max-width: 640px) {
  body.auth-ready #settings-panel-courts.active > .court-settings-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 520px) {
  #court-profile-add-modal .court-profile-edit-actions,
  #shuttle-profile-add-modal .court-profile-edit-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
  }

  #court-profile-add-modal .court-profile-edit-actions .btn,
  #shuttle-profile-add-modal .court-profile-edit-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Desktop collapse controls: main sidebar and queue left rail only. */
.desktop-collapse-toggle,
.desktop-queue-rail {
  display: none;
}

@media (min-width:900px) and (min-height:560px),
(min-width:768px) and (orientation:landscape) and (min-height:560px) {
  :root {
    --desktop-sidebar-collapsed-width: 76px;
    --desktop-queue-left-collapsed-width: 64px;
  }

  .desktop-collapse-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(125, 132, 145, .12);
    border-radius: 12px;
    background: rgba(125, 132, 145, .045);
    color: color-mix(in srgb, var(--muted) 70%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    cursor: pointer;
    opacity: .68;
    transition: opacity .16s ease, background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  }

  .desktop-collapse-toggle:hover,
  .desktop-collapse-toggle:focus-visible {
    opacity: 1;
    color: var(--muted);
    background: rgba(125, 132, 145, .075);
    border-color: rgba(125, 132, 145, .18);
    outline: 0;
    transform: translateY(-1px);
  }

  .desktop-collapse-toggle .material-symbols-outlined {
    font-size: 18px !important;
    line-height: 1;
    font-weight: 300 !important;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' -25, 'opsz' 20;
  }

  body.auth-ready .desktop-brand {
    justify-content: space-between;
    gap: 8px;
  }

  body.auth-ready .desktop-brand-logo {
    min-width: 0;
  }

  body.auth-ready.desktop-sidebar-collapsed {
    padding-left: calc(var(--desktop-sidebar-left) + var(--desktop-sidebar-collapsed-width) + var(--desktop-content-gap)) !important;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-sidebar {
    width: var(--desktop-sidebar-collapsed-width) !important;
    overflow: visible !important;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-brand {
    padding: 14px 10px 12px !important;
    flex-direction: column;
    align-items: center;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-brand-logo {
    justify-content: center;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-brand-copy,
  body.auth-ready.desktop-sidebar-collapsed .desktop-nav-label,
  body.auth-ready.desktop-sidebar-collapsed .desktop-nav-item span,
  body.auth-ready.desktop-sidebar-collapsed .desktop-user-info,
  body.auth-ready.desktop-sidebar-collapsed .desktop-account-caret {
    display: none !important;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-nav-scroll {
    padding: 8px 10px 12px !important;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-nav-section {
    padding: 4px 0 !important;
    border-top: 0 !important;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-nav-item {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 auto 5px !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-nav-item svg {
    width: 20px !important;
    height: 20px !important;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-nav-item.active::before {
    left: 4px !important;
    width: 3px !important;
    height: 18px !important;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-user-card {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 15px !important;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-user-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  body.auth-ready.desktop-sidebar-collapsed .desktop-account-popover {
    left: calc(100% + 10px) !important;
    right: auto !important;
    bottom: 0 !important;
    min-width: 230px !important;
    z-index: 999 !important;
  }

  body.auth-ready.desktop-sidebar-collapsed .page,
  body.auth-ready.desktop-sidebar-collapsed #page-queue,
  body.auth-ready.desktop-sidebar-collapsed #page-stats,
  body.auth-ready.desktop-sidebar-collapsed #page-settings {
    width: min(calc(100vw - var(--desktop-sidebar-left) - var(--desktop-sidebar-collapsed-width) - var(--desktop-content-gap) - var(--desktop-content-right)), var(--desktop-work-max)) !important;
  }

  body.auth-ready #page-queue,
  body.auth-ready #page-stats,
  body.auth-ready #page-stats.page.active,
  body.auth-ready #page-settings,
  body.auth-ready #page-settings.page.active {
    width: calc(100vw - var(--desktop-content-left) - 18px) !important;
    max-width: none !important;
  }

  body.auth-ready.desktop-sidebar-collapsed #page-queue,
  body.auth-ready.desktop-sidebar-collapsed #page-stats,
  body.auth-ready.desktop-sidebar-collapsed #page-stats.page.active,
  body.auth-ready.desktop-sidebar-collapsed #page-settings,
  body.auth-ready.desktop-sidebar-collapsed #page-settings.page.active {
    width: calc(100vw - var(--desktop-sidebar-left) - var(--desktop-sidebar-collapsed-width) - var(--desktop-content-gap) - 18px) !important;
    max-width: none !important;
  }

  body.auth-ready #page-queue .desktop-queue-layout {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr) !important;
  }

  body.auth-ready.desktop-queue-left-collapsed #page-queue .desktop-queue-layout {
    grid-template-columns: var(--desktop-queue-left-collapsed-width) minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.auth-ready #page-queue .desktop-queue-right {
    min-width: 0;
    width: 100% !important;
  }

  .queue-control-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .queue-control-card-head .card-title {
    margin: 0;
  }

  body.auth-ready.desktop-queue-left-collapsed #page-queue .desktop-queue-left {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: var(--desktop-queue-left-collapsed-width) !important;
    width: var(--desktop-queue-left-collapsed-width) !important;
    padding-top: 0 !important;
  }

body.auth-ready.desktop-queue-left-collapsed #page-queue .queue-control-card,
body.auth-ready.desktop-queue-left-collapsed #page-queue .ready-players-card {
    display: none !important;
  }

  body.auth-ready.desktop-queue-left-collapsed #page-queue .desktop-queue-rail {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
  }

  body.auth-ready #page-queue #active-courts {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  }

  body.auth-ready #page-queue #active-courts[data-court-count="1"] {
    grid-template-columns: 1fr !important;
  }

  body.auth-ready.desktop-queue-left-collapsed #page-queue #active-courts,
  body.auth-ready.desktop-sidebar-collapsed #page-queue #active-courts {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }

  .desktop-queue-rail-court,
  .desktop-queue-rail-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .62);
    color: var(--text);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    cursor: pointer;
  }

  .desktop-queue-rail-court {
    color: var(--accent);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  .desktop-queue-rail-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .desktop-queue-rail-btn {
    padding: 0;
  }

  .desktop-queue-rail-btn .material-symbols-outlined {
    font-size: 21px;
    font-variation-settings: 'FILL' 0, 'wght' 360, 'GRAD' -10, 'opsz' 22;
  }

  .desktop-queue-rail-btn.primary {
    border-color: rgba(20, 184, 166, .34);
    background: var(--accent);
    color: white;
    box-shadow: 0 14px 30px rgba(20, 184, 166, .20);
  }

  body.auth-ready #page-queue #active-courts .court-empty-slot {
    min-height: 240px !important;
  }

  body.auth-ready #page-queue #active-courts .court-empty-body {
    min-height: 140px !important;
    padding: 18px 14px 22px !important;
  }

  body.auth-ready #page-queue #active-courts .court-empty-body p {
    max-width: 220px !important;
  }
}

/* =========================================================
   Shuttle Equal Profiles UI Enhancement
   ========================================================= */

.shuttle-preset-select {
  height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: var(--card-bg) !important;
  color: var(--text) !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 700;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.15s !important;
}

.shuttle-preset-select:focus {
  border-color: var(--accent) !important;
}

.shuttle-rows-container {
  display: grid !important;
  gap: 10px !important;
}

.shuttle-item-row {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.35fr) minmax(180px, 1fr) 36px !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  padding: 10px !important;
  background: rgba(248, 250, 252, 0.78) !important;
  border: 1px solid rgba(148, 163, 184, 0.11) !important;
  border-radius: 14px !important;
}

.shuttle-item-row .shuttle-preset-select,
.shuttle-item-row .expense-input-wrapper {
  min-width: 0 !important;
}

.shuttle-item-row .expense-input-wrapper input {
  padding-left: 32px !important;
  padding-right: 8px !important;
  text-align: left !important;
  height: 40px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

.shuttle-inputs-group {
  display: grid !important;
  grid-template-columns: minmax(96px, 0.85fr) minmax(112px, 1fr) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.btn-shuttle-row-delete {
  background: rgba(239, 68, 68, 0.06) !important;
  border: none !important;
  color: #ef4444 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  transition: background-color 0.15s, color 0.15s !important;
}

.btn-shuttle-row-delete:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
}

.btn-shuttle-row-delete span {
  font-size: 18px !important;
}

.shuttle-payer-block .shuttle-item-row:only-child .btn-shuttle-row-delete {
  display: none !important;
}

.shuttle-payer-block .shuttle-item-row:only-child {
  grid-template-columns: minmax(180px, 1.35fr) minmax(180px, 1fr) !important;
}

.shuttle-payers-list {
  display: grid !important;
  gap: 18px !important;
}

.shuttle-empty-payers-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 16px !important;
  background: rgba(148, 163, 184, 0.05) !important;
  border: 1.5px dashed rgba(148, 163, 184, 0.24) !important;
  border-radius: 20px !important;
  text-align: center !important;
  margin: 12px 0 !important;
}

.shuttle-empty-payers-icon {
  width: 48px !important;
  height: 48px !important;
  background: rgba(20, 184, 166, 0.08) !important;
  color: var(--accent) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.shuttle-empty-payers-icon span {
  font-size: 24px !important;
}

.shuttle-empty-payers-text {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  margin-bottom: 16px !important;
}

.shuttle-payer-block {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04) !important;
}

.shuttle-payers-list .shuttle-payer-block {
  margin-bottom: 0 !important;
}

.shuttle-payer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.shuttle-payer-header .expense-owner-name {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

.btn-shuttle-payer-remove {
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  transition: background-color 0.15s, color 0.15s !important;
}

.btn-shuttle-payer-remove:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
}

.btn-shuttle-payer-remove span {
  font-size: 16px !important;
}

.shuttle-payer-actions {
  display: flex !important;
  margin-top: 10px !important;
}

.shuttle-payer-actions .btn {
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
}

.shuttle-payers-footer-actions {
  display: flex !important;
  justify-content: center !important;
  margin-top: 10px !important;
}

.shuttle-payers-footer-actions .btn {
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 12.5px !important;
  border-radius: 10px !important;
}

@media (max-width: 640px) {
  .shuttle-rows-container {
    gap: 12px !important;
  }

  .shuttle-item-row {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    gap: 7px !important;
    padding: 8px !important;
    position: relative !important;
  }

  .shuttle-item-row .shuttle-preset-select {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .shuttle-item-row .expense-input-wrapper.quantity-input input {
    padding-right: 56px !important;
    text-align: left !important;
    padding-left: 32px !important;
  }

  .shuttle-inputs-group {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .shuttle-item-row .btn-shuttle-row-delete {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    position: static !important;
    width: 34px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(239, 68, 68, 0.05) !important;
    color: #ef4444 !important;
  }

  .shuttle-item-row .btn-shuttle-row-delete span {
    font-size: 17px !important;
  }

  .shuttle-payer-block .shuttle-item-row:only-child {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Shuttle Payer Select Modal Overlay Styles
   ========================================================= */


#shuttle-payer-select-modal.modal-backdrop,
#expense-discount-select-modal.modal-backdrop {
  z-index: 1400 !important;
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

#shuttle-payer-select-modal .checkin-sheet,
#expense-discount-select-modal .checkin-sheet {
  z-index: 1410 !important;
  width: min(100%, 520px) !important;
  height: min(580px, calc(100dvh - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 -18px 54px rgba(31, 41, 55, .18) !important;
}

@supports not (height:100dvh) {
  #shuttle-payer-select-modal .checkin-sheet,
  #expense-discount-select-modal .checkin-sheet {
    height: min(580px, calc(100vh - 32px)) !important;
    max-height: calc(100vh - 32px) !important;
  }
}

#shuttle-payer-select-modal .modal-header,
#expense-discount-select-modal .modal-header {
  flex: 0 0 auto !important;
  padding: 18px 18px 14px !important;
  border-bottom: 1px solid rgba(125, 132, 145, .1) !important;
}

#shuttle-payer-select-modal .modal-body,
#expense-discount-select-modal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: none !important;
  padding: 0 !important;
}

#shuttle-payer-select-modal .checkin-list,
#expense-discount-select-modal .checkin-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  align-content: start !important;
  padding: 14px 18px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 10px !important;
}

#shuttle-payer-select-modal .checkin-list.expense-player-picker-list--empty,
#expense-discount-select-modal .checkin-list.expense-player-picker-list--empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.expense-player-picker-empty {
  flex: 1 1 auto;
  min-height: 240px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 28px 20px;
  text-align: center;
  color: var(--muted);
}

.expense-player-picker-empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
}

.expense-player-picker-empty-icon .material-symbols-outlined {
  font-size: 30px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 28;
}

.expense-player-picker-empty-copy {
  display: grid;
  gap: 5px;
  max-width: 280px;
}

.expense-player-picker-empty-copy strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

.expense-player-picker-empty-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

#shuttle-payer-select-modal .checkin-player-row,
#expense-discount-select-modal .checkin-player-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(125, 132, 145, .14) !important;
  background: rgba(125, 132, 145, .045) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  transition: all .15s !important;
}

#shuttle-payer-select-modal .checkin-player-row.selected,
#expense-discount-select-modal .checkin-player-row.selected {
  border-color: rgba(17, 184, 154, .32) !important;
  background: rgba(17, 184, 154, .08) !important;
}

#shuttle-payer-select-modal .checkin-player-row input[type="checkbox"],
#expense-discount-select-modal .checkin-player-row input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#shuttle-payer-select-modal .checkin-box,
#expense-discount-select-modal .checkin-box {
  width: 20px !important;
  height: 20px !important;
  border-radius: 7px !important;
  border: 1.8px solid rgba(125, 132, 145, .35) !important;
  background: rgba(255, 255, 255, .35) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

#shuttle-payer-select-modal .checkin-player-row.selected .checkin-box,
#expense-discount-select-modal .checkin-player-row.selected .checkin-box {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}

#shuttle-payer-select-modal .checkin-player-row.selected .checkin-box::after,
#expense-discount-select-modal .checkin-player-row.selected .checkin-box::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 3px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

#shuttle-payer-select-modal .checkin-footer,
#expense-discount-select-modal .checkin-footer {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 16px 24px 20px !important;
  background: var(--card) !important;
  border-top: 1px solid rgba(125, 132, 145, .16) !important;
  box-shadow: 0 -10px 24px rgba(31, 41, 55, .08) !important;
}

#shuttle-payer-select-modal .checkin-footer .btn,
#expense-discount-select-modal .checkin-footer .btn {
  min-width: 90px !important;
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#shuttle-payer-select-modal .checkin-count,
#expense-discount-select-modal .checkin-count {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
}

@media (max-width: 480px) {
  #shuttle-payer-select-modal .checkin-footer,
  #expense-discount-select-modal .checkin-footer {
    padding: 12px 16px 16px !important;
  }
  #shuttle-payer-select-modal .checkin-footer .btn,
  #expense-discount-select-modal .checkin-footer .btn {
    min-width: 80px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
  }
}




/* Collapsible player shuttle rows */
.expense-player-shuttle-collapsible {
  display: flex;
  flex-direction: column;
  gap: inherit;
  transition: all 0.3s ease;
}

.expense-player-shuttle-collapsible.collapsed {
  display: none !important;
}

.expense-player-shuttle-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: none;
  border: none;
  padding: 6px 0;
  color: var(--muted);
  cursor: pointer;
  margin-top: 8px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.expense-player-shuttle-expand-btn:hover {
  background-color: rgba(125, 132, 145, 0.08);
  color: var(--text);
}


/* Colorized shuttle payer mini chips */
.shuttle-payer-mini-chip {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg2)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)) !important;
  color: color-mix(in srgb, var(--accent) 80%, #000) !important;
  padding: 5px 10px !important;
  font-size: 0.74rem !important;
  display: inline-flex !important;
  align-items: center !important;
}

html[data-theme="dark"] .shuttle-payer-mini-chip {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg3)) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
  color: color-mix(in srgb, var(--accent) 85%, #fff) !important;
}

.shuttle-payer-mini-chip small {
  color: color-mix(in srgb, var(--text) 70%, transparent) !important;
  font-weight: 800 !important;
  margin-left: 4px !important;
  font-size: 0.72rem !important;
}

/* Missing game shuttle modal layout updates */
.missing-game-shuttle-box {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.05); /* very soft slate tint */
  border: 1px dashed rgba(148, 163, 184, 0.2);
  margin-top: 4px;
}

/* Modal backdrop z-index on Mobile */
#missing-game-shuttle-modal.modal-backdrop {
  z-index: 1500 !important;
}

#stale-session-alert-modal.modal-backdrop,
#overdue-scheduled-session-alert-modal.modal-backdrop {
  z-index: 1450 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

/* Subscription expiry is important enough to sit above ordinary app modals,
   while action confirmations and destructive flows keep their higher layers. */
#subscription-expiry-alert-modal.modal-backdrop {
  z-index: 10110 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

#subscription-renewal-modal.modal-backdrop {
  z-index: 10120 !important;
}

#stale-session-alert-modal .stale-session-alert-sheet,
#overdue-scheduled-session-alert-modal .stale-session-alert-sheet,
#subscription-expiry-alert-modal .subscription-expiry-alert-sheet {
  width: min(100%, 480px) !important;
  max-width: 480px !important;
}

.my-player-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}

.my-player-account-card {
  padding: 0;
  overflow: hidden;
}

.my-player-account-trigger {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 28px auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 78px;
  padding: 15px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}

.my-player-account-trigger:hover:not(:disabled) {
  background: rgba(0, 168, 132, .05);
}

.my-player-account-trigger:focus-visible {
  outline: 2px solid rgba(17, 184, 154, .45);
  outline-offset: -3px;
}

.my-player-account-trigger:disabled {
  cursor: default;
}

.my-player-account-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0, 168, 132, .1);
  color: var(--accent);
  font-size: 21px;
}

.my-player-account-trigger:not(.is-mapped) .my-player-account-icon {
  background: rgba(217, 119, 6, .1);
  color: #b45309;
}

.my-player-account-copy {
  display: grid;
  justify-items: start;
  min-width: 0;
  gap: 3px;
}

.my-player-account-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.my-player-account-value {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 9px;
  border: 1px solid rgba(0, 168, 132, .22);
  border-radius: 999px;
  background: rgba(0, 168, 132, .08);
  color: var(--primary-dark, #0f7d55);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-player-account-value.is-unmapped {
  border-color: rgba(217, 119, 6, .25);
  background: rgba(217, 119, 6, .08);
  color: #b45309;
}

.my-player-account-description {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.my-player-account-player-name {
  color: var(--primary-dark, #0f7d55);
  font-weight: 800;
}

.my-player-account-status {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--playing, #d97706);
  background: rgba(217, 119, 6, .1);
  font-size: 18px;
}

.my-player-account-status.is-mapped {
  color: var(--primary-dark, #0f7d55);
  background: rgba(0, 168, 132, .12);
}

.my-player-account-status.is-unmapped {
  color: #b45309;
  background: #fff7ed;
}

html[data-theme="dark"] .my-player-account-value {
  border-color: rgba(45, 212, 191, .28);
  background: rgba(45, 212, 191, .12);
  color: #5eead4;
}

html[data-theme="dark"] .my-player-account-value.is-unmapped {
  border-color: rgba(251, 191, 36, .3);
  background: rgba(251, 191, 36, .12);
  color: #fbbf24;
}

html[data-theme="dark"] .my-player-account-player-name {
  color: #5eead4;
}

html[data-theme="dark"] .my-player-account-status.is-mapped {
  color: #5eead4;
}

html[data-theme="dark"] .my-player-account-status.is-unmapped {
  color: #fbbf24;
  background: rgba(251, 191, 36, .12);
}

.my-player-account-chevron {
  color: var(--muted);
  font-size: 20px;
}

.my-player-account-trigger:disabled .my-player-account-chevron {
  opacity: .45;
}

.personal-queue-channel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg2) 42%, transparent);
}

.personal-queue-channel-head {
  display: grid;
  gap: 2px;
}

.personal-queue-channel-head strong {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.3;
}

.personal-queue-channel-head small,
.telegram-alert-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.telegram-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.telegram-alert-actions .btn {
  min-height: 38px;
}

.telegram-alert-actions .telegram-unlink-action {
  flex: 0 0 100%;
  width: 100%;
  min-height: 44px;
  margin-top: -2px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

.telegram-alert-actions .telegram-unlink-action:hover:not(:disabled) {
  border: 0;
  background: transparent;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.telegram-alert-actions .telegram-unlink-action:focus-visible {
  border: 0;
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  color: var(--text);
  outline: 2px solid color-mix(in srgb, var(--muted) 42%, transparent);
  outline-offset: -4px;
}

.telegram-alert-actions .telegram-unlink-action:disabled {
  border: 0;
  background: transparent;
  color: var(--muted);
  opacity: .42;
  box-shadow: none;
}

@media (max-width: 560px) {
  .telegram-alert-actions .telegram-unlink-action {
    grid-column: 1 / -1;
  }
}

.my-player-card-copy {
  min-width: 0;
}

.my-player-card-head {
  display: grid;
  gap: 4px;
}

.push-device-status {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.my-player-card .card-title {
  margin-bottom: 4px;
}

.my-player-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.my-player-card-control {
  min-width: 0;
}

.push-device-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

.push-device-toggle-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg2) 58%, transparent);
  cursor: pointer;
}

.push-device-toggle-row>span:first-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.push-device-toggle-row strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.push-device-toggle-row small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.25;
}

.push-permission-help {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid #f4c76b;
  border-radius: 14px;
  background: #fff9eb;
  color: #6f4a08;
}

.push-permission-help-icon {
  flex: 0 0 auto;
  font-size: 22px;
  color: #e78a00;
}

.push-permission-help strong {
  display: block;
  margin-bottom: 6px;
  color: #513600;
}

.push-permission-help ol {
  margin: 0 0 6px;
  padding-left: 20px;
  line-height: 1.65;
}

.push-permission-help small {
  display: block;
  line-height: 1.5;
  color: #8a631c;
}

.push-device-toggle-row .qbad-toggle-switch {
  margin-right: 0;
}

.push-test-btn {
  min-height: 42px;
  padding: 0 12px;
  font-size: 12px;
  white-space: nowrap;
}

.personal-queue-setup-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.personal-queue-step {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg2) 60%, transparent);
}

.personal-queue-step.is-complete {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.personal-queue-step.is-pending {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--border));
  background: color-mix(in srgb, #f59e0b 7%, var(--card));
}

.personal-queue-step-index {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.personal-queue-step.is-incomplete .personal-queue-step-index {
  background: color-mix(in srgb, #ef4444 10%, var(--card));
  color: #ef4444;
}

.personal-queue-step.is-pending .personal-queue-step-index {
  background: color-mix(in srgb, #f59e0b 13%, var(--card));
  color: #d97706;
}

.personal-queue-step-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 1px;
}

.personal-queue-setup-steps strong {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.3;
}

.personal-queue-step-copy strong {
  flex: none;
}

.personal-queue-step-desc {
  min-width: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
}

.personal-queue-step-status {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #ef4444;
  background: color-mix(in srgb, #ef4444 8%, var(--card));
  font-size: 15px;
  font-style: normal;
  margin-left: auto;
}

.personal-queue-step.is-complete .personal-queue-step-status {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

.personal-queue-step.is-pending .personal-queue-step-status {
  color: #d97706;
  background: color-mix(in srgb, #f59e0b 12%, var(--card));
}

.personal-queue-install-step button {
  flex: 0 0 auto;
  min-height: 24px;
  margin-left: 2px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.personal-queue-install-step button:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
}

.personal-queue-install-step button:disabled {
  cursor: default;
  opacity: .72;
}

.personal-queue-install-step button.hidden {
  display: none;
}

.my-player-queue-cta {
  display: none;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.my-player-queue-cta.show {
  display: grid;
}

.my-player-queue-cta-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 13%, var(--bg2));
  color: var(--accent);
}

.my-player-queue-cta-icon .material-symbols-outlined {
  font-size: 20px;
}

.my-player-queue-cta-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.my-player-queue-cta-copy strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.my-player-queue-cta-copy span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.my-player-queue-cta .btn {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.scheduled-session-status-widget {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.scheduled-session-status-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 13%, var(--bg2));
  color: var(--accent);
}

.scheduled-session-status-icon .material-symbols-outlined {
  font-size: 21px;
}

.scheduled-session-status-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.scheduled-session-status-copy strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.scheduled-session-status-copy span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.scheduled-session-status-widget > .btn {
  min-height: 32px;
  padding: 0 11px;
  font-size: 11.5px;
  white-space: nowrap;
}

.scheduled-session-status-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
}

.scheduled-session-status-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.scheduled-session-status-item.is-management {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.scheduled-session-status-item-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.scheduled-session-status-item-main strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled-session-status-item-main span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.scheduled-session-status-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.scheduled-session-status-badge.is-overdue {
  border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, var(--card));
  color: var(--danger);
}

.scheduled-session-status-conflict {
  max-width: 260px;
  color: var(--danger, #b45309);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}

.scheduled-session-status-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.scheduled-session-status-manage-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  color: var(--accent);
  font-size: 10.5px;
  white-space: nowrap;
}

.scheduled-session-status-manage-btn:hover,
.scheduled-session-status-manage-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
}

.scheduled-session-status-manage-btn .material-symbols-outlined {
  font-size: 16px;
}

.scheduled-session-status-checkin-btn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 9px;
  font-size: 10.5px;
  white-space: nowrap;
}

.scheduled-session-status-checkin-btn .material-symbols-outlined {
  font-size: 15px;
}

.scheduled-session-status-empty {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

#viewer-no-session-modal {
  z-index: 1500 !important;
  display: block !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: rgba(8, 11, 20, .42) !important;
}

#viewer-no-session-modal.hidden {
  display: none !important;
}

#viewer-no-session-modal .viewer-no-session-sheet {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1510 !important;
  width: min(calc(100% - 24px), 420px) !important;
  max-width: min(calc(100% - 24px), 420px) !important;
  max-height: min(640px, calc(100dvh - 32px)) !important;
  margin: 0 !important;
  border-radius: 24px !important;
  animation: none !important;
}

#viewer-no-session-modal .viewer-no-session-sheet:focus {
  outline: none !important;
}

#viewer-no-session-modal .viewer-no-session-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  overflow: auto !important;
  padding: 30px 24px 24px !important;
  text-align: center;
}

.viewer-no-session-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
}

.viewer-no-session-icon .material-symbols-outlined {
  font-size: 28px;
}

.viewer-no-session-title {
  margin: 0;
  color: var(--text);
  font-size: 19px;
  line-height: 1.35;
}

.viewer-no-session-description {
  max-width: 310px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.viewer-no-session-scheduled {
  width: 100%;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.viewer-no-session-scheduled > strong {
  color: var(--text);
  font-size: 12.5px;
}

.viewer-no-session-scheduled .scheduled-session-status-list {
  max-height: 190px;
  overflow-y: auto;
  padding-top: 9px;
  border-top: 0;
}

.viewer-no-session-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.viewer-no-session-actions .btn {
  width: min(100%, 190px);
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
}

.viewer-no-session-actions .material-symbols-outlined {
  font-size: 18px;
}

@media (max-width: 480px) {
  #viewer-no-session-modal {
    padding: 12px !important;
  }

  #viewer-no-session-modal .viewer-no-session-body {
    padding: 26px 18px 18px !important;
  }

  .viewer-no-session-actions {
    margin-top: 20px;
  }

  .viewer-no-session-actions .btn {
    width: 100%;
  }
}

.personal-queue-alert {
  display: none;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 12px 36px 12px 12px;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
  box-shadow: 0 12px 28px rgba(0, 168, 132, .12);
}

.personal-queue-alert.show {
  display: grid;
}

.personal-queue-alert.is-playing {
  border-color: rgba(245, 158, 11, .3);
  background: color-mix(in srgb, var(--playing) 10%, var(--card));
  box-shadow: 0 12px 28px rgba(245, 158, 11, .12);
}

.personal-queue-alert-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--bg2));
}

.personal-queue-alert.is-playing .personal-queue-alert-icon {
  color: var(--playing);
  background: color-mix(in srgb, var(--playing) 14%, var(--bg2));
}

.personal-queue-alert-icon .material-symbols-outlined {
  font-size: 24px;
}

.personal-queue-alert-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.personal-queue-alert-copy strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.personal-queue-alert-copy span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.personal-queue-alert-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  justify-content: flex-end;
}

.personal-queue-alert-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  opacity: 0.55;
  cursor: pointer;
  border-radius: 50%;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.personal-queue-alert.is-playing .personal-queue-alert-actions button {
  color: var(--playing);
}

.personal-queue-alert-actions button .material-symbols-outlined {
  font-size: 16px;
}

.personal-queue-alert-actions button:hover,
.personal-queue-alert-actions button:active {
  opacity: 1;
  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
}

.personal-queue-alert.is-playing .personal-queue-alert-actions button:hover,
.personal-queue-alert.is-playing .personal-queue-alert-actions button:active {
  background-color: color-mix(in srgb, var(--playing) 8%, transparent);
}

.pwa-install-prompt {
  position: fixed;
  z-index: 240;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 9px 9px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
  backdrop-filter: blur(18px) saturate(160%);
}

.pwa-install-prompt.show {
  opacity: .58;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.shuttle-profile-row.is-disabled {
  opacity: .62;
}

.shuttle-profile-row .shuttle-status-pill {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
}

@media(max-width:360px) {
  .session-match-row {
    grid-template-columns: 1fr;
    row-gap: 3px;
  }

  .session-match-duration {
    grid-row: 2;
    justify-self: start;
  }

  .session-match-meta {
    grid-row: 3;
  }
}

/* Mobile court navigator: visible only for 3+ courts, kept small and out of the court detail. */
.mobile-court-navigator {
  display: none;
}

@media (max-width: 899px) {
  .mobile-court-navigator {
    position: fixed;
    z-index: 185;
    top: 50%;
    right: max(4px, env(safe-area-inset-right, 0px));
    display: grid;
    gap: 1px;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 74%, transparent);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
    opacity: .42;
    transform: translateY(-50%);
    transition: opacity .2s ease, background .2s ease, box-shadow .2s ease;
    backdrop-filter: blur(12px) saturate(130%);
    touch-action: none;
  }

  .mobile-court-navigator[hidden] {
    display: none;
  }

  .mobile-court-navigator.is-interacting,
  .mobile-court-navigator.is-dragging,
  .mobile-court-navigator:focus-within {
    opacity: 1;
    background: color-mix(in srgb, var(--card) 94%, transparent);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
  }

  .mobile-court-nav-item {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    font: 800 11px/1 var(--font-th);
    cursor: pointer;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .2s ease;
  }

  .mobile-court-nav-item.active {
    color: #fff;
    background: var(--accent);
    box-shadow: 0 4px 9px color-mix(in srgb, var(--accent) 28%, transparent);
    transform: scale(1.1);
  }

  .mobile-court-nav-item:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
    outline-offset: 2px;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .mobile-court-navigator {
    right: max(8px, env(safe-area-inset-right, 0px));
    gap: 2px;
    padding: 3px;
  }

  .mobile-court-nav-item {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .mobile-court-navigator,
  .mobile-court-nav-item {
    transition: none;
  }
}

.pwa-install-prompt.show.is-scrolled,
.pwa-install-prompt.show:hover,
.pwa-install-prompt.show:focus-within {
  opacity: 1;
}

.pwa-install-howto-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.pwa-install-howto-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.pwa-install-howto-sheet {
  position: relative;
  width: min(340px, 100%);
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

.pwa-install-howto-sheet strong {
  display: block;
  margin-right: 34px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
}

.pwa-install-howto-sheet ol {
  margin: 12px 0 16px;
  padding-left: 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.pwa-install-howto-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
}

.pwa-install-howto-done {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.pwa-install-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.pwa-install-copy strong {
  font-size: 13px;
  line-height: 1.25;
  color: var(--text);
}

.pwa-install-copy span {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-install-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pwa-install-btn,
.pwa-install-close {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.pwa-install-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.pwa-install-close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

body.auth-ready .pwa-install-prompt {
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 640px) {
  .my-player-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .push-device-actions {
    grid-template-columns: 1fr;
  }

  .push-test-btn {
    min-height: 38px;
  }

  .my-player-queue-cta {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

  .my-player-queue-cta .btn {
    grid-column: auto;
    min-height: 30px;
    padding: 0 10px;
  }

  .scheduled-session-status-widget {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .scheduled-session-status-icon {
    width: 32px;
    height: 32px;
  }

  .scheduled-session-status-widget > .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .scheduled-session-status-item {
    grid-template-columns: 1fr;
  }

  .scheduled-session-status-badge {
    justify-self: start;
  }

  .scheduled-session-status-checkin-btn {
    justify-self: start;
  }

  .scheduled-session-status-conflict {
    max-width: none;
    text-align: left;
  }

  .scheduled-session-status-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .scheduled-session-status-manage-btn {
    max-width: 100%;
  }

  .personal-queue-setup-steps {
    grid-template-columns: 1fr;
  }

  .personal-queue-install-step {
    flex-wrap: wrap;
  }

  .personal-queue-install-step button {
    margin-left: 26px;
    margin-right: auto;
  }

  .personal-queue-alert {
    grid-template-columns: 38px minmax(0, 1fr);
    padding-right: 36px;
  }

  .personal-queue-alert-actions {
    grid-column: initial;
    justify-content: initial;
  }

  .pwa-install-prompt {
    width: min(360px, calc(100vw - 20px));
  }

  .pwa-install-copy span {
    max-width: 160px;
  }
}

.stale-session-alert-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(245, 158, 11, .24);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(245, 158, 11, .12), rgba(245, 158, 11, .06));
}

.stale-session-alert-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #b45309;
  background: rgba(245, 158, 11, .16);
  border: 1px solid rgba(245, 158, 11, .24);
}

.stale-session-alert-icon .material-symbols-outlined {
  font-size: 29px;
}

.stale-session-alert-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.stale-session-alert-copy strong {
  font-size: 15px;
  color: var(--text);
}

.stale-session-alert-copy span {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.stale-session-alert-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.stale-session-alert-meta div {
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  background: rgba(148, 163, 184, .09);
  border: 1px solid rgba(148, 163, 184, .16);
}

.stale-session-alert-meta span {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  color: var(--muted);
}

.stale-session-alert-meta strong {
  display: block;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.stale-session-alert-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr auto;
  gap: 10px;
  margin-top: 14px;
}

.stale-session-alert-actions .btn {
  min-height: 46px;
  border-radius: 14px;
  white-space: normal;
}

.stale-session-alert-actions .btn-ghost {
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(148, 163, 184, .08);
  color: var(--muted);
  font-weight: 800;
}

.overdue-scheduled-session-alert-count {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(245, 158, 11, .09);
  color: #92400e;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

.overdue-scheduled-session-alert-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.overdue-scheduled-session-alert-actions .btn {
  min-height: 46px;
  border-radius: 14px;
}

.subscription-expiry-alert-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, #f59e0b 38%, transparent);
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, #f59e0b 15%, transparent), color-mix(in srgb, #f59e0b 7%, transparent));
}

.subscription-expiry-alert-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(245, 158, 11, .32);
  border-radius: 16px;
  color: #b45309;
  background: rgba(245, 158, 11, .14);
}

.subscription-expiry-alert-icon .material-symbols-outlined {
  font-size: 29px;
}

.subscription-expiry-alert-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.subscription-expiry-alert-copy strong {
  color: var(--text);
  font-size: 15px;
}

.subscription-expiry-alert-copy span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.subscription-expiry-alert-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.subscription-expiry-alert-meta div {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg2) 62%, transparent);
}

.subscription-expiry-alert-meta span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11.5px;
}

.subscription-expiry-alert-meta strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
}

.subscription-expiry-alert-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.subscription-expiry-alert-actions .btn {
  min-height: 46px;
  border-radius: 14px;
  text-decoration: none;
}

.subscription-expiry-alert-renew {
  grid-column: 1 / -1;
}

.subscription-expiry-alert-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.subscription-expiry-alert-secondary-actions .btn {
  width: 100%;
}

.subscription-expiry-alert-messenger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.subscription-expiry-alert-dismiss {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  cursor: pointer;
}

.subscription-expiry-alert-dismiss input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

html[data-theme="dark"] .subscription-expiry-alert-card {
  border-color: rgba(251, 191, 36, .42);
  background: linear-gradient(180deg, rgba(245, 158, 11, .20), rgba(245, 158, 11, .09));
}

html[data-theme="dark"] .subscription-expiry-alert-icon {
  border-color: rgba(251, 191, 36, .34);
  color: #fbbf24;
  background: rgba(245, 158, 11, .16);
}

html[data-theme="dark"] .subscription-expiry-alert-meta div {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .62);
}

html[data-theme="dark"] .stale-session-alert-card {
  background: linear-gradient(180deg, rgba(245, 158, 11, .15), rgba(245, 158, 11, .07));
  border-color: rgba(245, 158, 11, .26);
}

html[data-theme="dark"] .stale-session-alert-icon {
  color: #fbbf24;
  background: rgba(245, 158, 11, .12);
}

html[data-theme="dark"] .stale-session-alert-meta div,
html[data-theme="dark"] .stale-session-alert-actions .btn-ghost {
  background: rgba(15, 23, 42, .62);
  border-color: rgba(148, 163, 184, .18);
}

html[data-theme="dark"] .overdue-scheduled-session-alert-count {
  background: rgba(245, 158, 11, .12);
  color: #fbbf24;
}

@media (max-width: 520px) {
  .stale-session-alert-actions {
    grid-template-columns: 1fr;
  }

  .stale-session-alert-meta {
    grid-template-columns: 1fr;
  }

  .overdue-scheduled-session-alert-actions {
    grid-template-columns: 1fr;
  }

  .subscription-expiry-alert-actions,
  .subscription-expiry-alert-meta {
    grid-template-columns: 1fr;
  }
}


/* Specific overrides for shuttle payer rows to fit cards perfectly on all screen sizes */
.shuttle-rows-container .shuttle-item-row,
.shuttle-payer-block .shuttle-rows-container .shuttle-item-row:only-child,
.shuttle-payer-block .shuttle-item-row:only-child {
  grid-template-columns: 1fr 1.2fr 36px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.shuttle-rows-container .shuttle-inputs-group {
  grid-template-columns: 1fr 110px !important; /* quantity counts stretch, price is fixed 110px to fit placeholder */
  width: 100% !important;
}

.shuttle-inputs-group .expense-input-wrapper {
  width: 100% !important;
}

/* Set placeholder font weight to medium/normal (not bold) */
.shuttle-item-row .expense-input-wrapper input::placeholder {
  font-weight: 500 !important;
  opacity: 0.65 !important;
}

.shuttle-rows-container .btn-shuttle-row-delete,
.shuttle-payer-block .shuttle-item-row:only-child .btn-shuttle-row-delete,
.shuttle-payer-block .shuttle-rows-container .shuttle-item-row:only-child .btn-shuttle-row-delete {
  display: inline-flex !important;
}

/* Disabled styling for only-child trash icon button */
.btn-shuttle-row-delete.disabled,
.btn-shuttle-row-delete[disabled] {
  background: rgba(148, 163, 184, 0.05) !important;
  color: color-mix(in srgb, var(--muted) 40%, transparent) !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

@media (max-width: 640px) {
  .shuttle-rows-container .shuttle-item-row,
  .shuttle-payer-block .shuttle-rows-container .shuttle-item-row:only-child,
  .shuttle-payer-block .shuttle-item-row:only-child {
    grid-template-columns: 1fr 34px !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .shuttle-rows-container .shuttle-item-row .shuttle-preset-select {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  .shuttle-rows-container .shuttle-item-row .btn-shuttle-row-delete {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 34px !important;
    height: 38px !important;
  }

  .shuttle-rows-container .shuttle-inputs-group {
    grid-column: 1 / -1 !important; /* Spans across the entire row on the second line */
    grid-row: 2 !important;
    grid-template-columns: 1fr 110px !important;
    width: 100% !important;
  }
}


/* Payment status badges in expense history */
.payment-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payment-track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: flex-start;
  gap: 8px 12px;
}

.payment-track-row > span {
  display: grid;
  gap: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

.payment-track-row .payment-badge-group {
  justify-content: flex-end;
  min-width: 0;
}

.payment-track-row .payment-badge-group strong {
  line-height: 1.35;
  text-align: right;
}

.payment-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: none !important;
  transition: all 0.15s ease;
  line-height: 1 !important;
  user-select: none;
}

.payment-status-badge .material-symbols-outlined {
  font-size: 14px !important;
}

.payment-status-badge.pending {
  background: rgba(239, 68, 68, 0.08) !important;
  color: var(--out) !important;
}

.payment-status-badge.pending > span,
.payment-status-badge.pending > .material-symbols-outlined {
  color: var(--out) !important;
}

.payment-status-badge.pending:hover {
  background: rgba(239, 68, 68, 0.16) !important;
}

.payment-status-badge.paid {
  background: rgba(16, 185, 129, 0.08) !important;
  color: var(--ready) !important;
}

.payment-status-badge.paid > span,
.payment-status-badge.paid > .material-symbols-outlined {
  color: var(--ready) !important;
}

.payment-status-badge.paid:hover {
  background: rgba(16, 185, 129, 0.16) !important;
}

@media (max-width: 640px) {
  .payment-track-row {
    grid-template-columns: 1fr;
  }

  .payment-track-row .payment-badge-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    gap: 8px;
  }

  .payment-track-row .payment-badge-group strong {
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}


/* Player dashboard payment tracking widget */
.player-dashboard-payment-card {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  padding: 16px !important;
  background: rgba(248, 250, 252, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 18px !important;
}

.payment-card-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.payment-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.payment-card-desc {
  font-size: 12.5px;
  color: var(--muted);
}

.payment-card-desc strong.text-unpaid {
  color: #ef4444;
  font-weight: 800;
}

.payment-card-desc strong.text-paid {
  color: #10b981;
  font-weight: 800;
}

.player-dashboard-payment-list {
  margin-top: 12px;
  border-top: 1px dashed rgba(148, 163, 184, 0.15);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payment-history-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}

.payment-history-date {
  color: var(--text);
  font-weight: 500;
}

.payment-history-amount-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payment-history-amount {
  font-weight: 700;
  color: var(--text);
}

.payment-history-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.payment-history-badge.paid {
  background: rgba(16, 185, 129, 0.08);
  color: var(--ready);
}

.payment-history-badge.pending {
  background: rgba(239, 68, 68, 0.08);
  color: var(--out);
}

/* Compact payment card (single session view) */
.compact-payment-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.payment-status-badge-large {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

.payment-status-badge-large.paid {
  background: rgba(16, 185, 129, 0.08);
  color: var(--ready);
}

.payment-status-badge-large.pending {
  background: rgba(239, 68, 68, 0.08);
  color: var(--out);
}

.loading-spinner, .empty-list-text {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding: 8px 0;
}


/* Highlight unpaid total on expense history headers */
.expense-history-total.unpaid {
  color: #ef4444 !important;
}


/* Mark all paid button style matching payment badge */
.btn-mark-all-paid {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: none !important;
  background: rgba(148, 163, 184, 0.08) !important;
  color: #64748b !important;
  cursor: pointer;
  line-height: 1 !important;
  transition: all 0.15s ease;
  height: auto !important;
  user-select: none;
}

.btn-mark-all-paid:hover {
  background: rgba(148, 163, 184, 0.16) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .btn-mark-all-paid {
  background: rgba(148, 163, 184, 0.12) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .btn-mark-all-paid:hover {
  background: rgba(148, 163, 184, 0.2) !important;
  color: #f8fafc !important;
}


/* Unpaid history link buttons in player profile dashboard */
.player-dashboard-section.payment-section {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}


/* Toggle unpaid list button (capsule badge style) */
.btn-toggle-unpaid-list {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.24) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  cursor: pointer;
  transition: all 0.15s ease;
  height: auto !important;
  line-height: 1 !important;
  user-select: none;
}

.btn-toggle-unpaid-list:hover {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(239, 68, 68, 0.36) !important;
}

/* Compact unpaid history list items */
.player-dashboard-payment-list {
  max-width: 420px;
  margin: 8px auto !important;
}

.unpaid-history-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6px 10px !important;
  background: rgba(239, 68, 68, 0.04) !important;
  border: 1px solid rgba(239, 68, 68, 0.08) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  font-size: 12px !important;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  margin-bottom: 5px;
  box-sizing: border-box;
}

.unpaid-history-link:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.16) !important;
  transform: translateY(-1px);
}

.unpaid-history-link:active {
  transform: translateY(0);
}

.unpaid-history-desc {
  font-weight: 500;
  flex: 1;
}

.unpaid-history-amount {
  font-weight: 800;
  color: #ef4444;
  margin-right: 6px;
}

.unpaid-link-icon {
  font-size: 16px !important;
  color: rgba(239, 68, 68, 0.4);
  transition: color 0.15s ease;
}

.unpaid-history-link:hover .unpaid-link-icon {
  color: #ef4444;
}

html[data-theme="dark"] .unpaid-history-link {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.12) !important;
}

html[data-theme="dark"] .unpaid-history-link:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}


/* Multi-rate rows inside Court Fee Calculator */
.court-rates-table-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 6px 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.court-rates-table-header .col-rate { flex: 2; min-width: 0; }
.court-rates-table-header .col-count { flex: 1.2; min-width: 0; }
.court-rates-table-header .col-hours { flex: 2; min-width: 0; }
.court-rates-table-header .col-action { width: 36px; flex-shrink: 0; }

.court-rate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}

.court-rate-row .court-rate-field { flex: 2; min-width: 0; }
.court-rate-row .court-count-field { flex: 1.2; min-width: 0; }
.court-rate-row .court-hours-field { flex: 2; min-width: 0; }
.court-rate-row .court-action-field { width: 36px; flex-shrink: 0; display: flex; justify-content: center; }

.court-rate-row .court-rate-field input,
.court-rate-row .court-count-field input,
.court-rate-row .court-hours-field input {
  margin: 0 !important;
}

.btn-court-rate-remove {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important; /* Muted gray delete icon */
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease;
  padding: 0 !important;
  flex-shrink: 0;
}

.btn-court-rate-remove .material-symbols-outlined {
  font-size: 18px !important;
}

.btn-court-rate-remove:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
}

.btn-court-rate-remove:active {
  transform: scale(0.92);
}

.btn-add-court-rate,
.btn-add-shuttle-rate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  background: transparent !important;
  border: 1px dashed var(--accent) !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 0.12s ease;
  margin-top: 6px;
  user-select: none;
  height: auto !important;
  line-height: 1 !important;
}

.btn-add-court-rate:hover,
.btn-add-shuttle-rate:hover {
  background: rgba(17, 184, 154, 0.06) !important;
}

.btn-add-court-rate:active,
.btn-add-shuttle-rate:active {
  transform: scale(0.98);
}

.btn-add-court-rate .material-symbols-outlined,
.btn-add-shuttle-rate .material-symbols-outlined {
  font-size: 14px !important;
}

@media (max-width: 580px) {
  .court-rates-table-header {
    gap: 6px;
    font-size: 10.5px;
  }
  .court-rate-row {
    gap: 6px;
  }
  .court-rate-row .court-action-field,
  .court-rates-table-header .col-action {
    width: 28px;
  }
  .btn-court-rate-remove {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
  }
}

/* Custom Select Arrow spacing fix */
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  padding-right: 36px !important;
}

/* Premium Expense Save Warning Modal UI */
.expense-warning-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 0 14px;
}

.expense-warning-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.expense-warning-icon-wrapper .warning-icon {
  font-size: 28px !important;
}

.expense-warning-desc {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 16px;
}

.expense-warning-checklist {
  width: 100%;
  background: rgba(0, 0, 0, 0.015);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 16px;
  text-align: left;
}

html[data-theme="dark"] .expense-warning-checklist {
  background: rgba(255, 255, 255, 0.015);
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
}

.checklist-item:not(:last-child) {
  border-bottom: 1px solid rgba(125, 132, 145, 0.08);
}

.checklist-item .status-icon {
  font-size: 20px !important;
  flex-shrink: 0;
}

.checklist-item.missing {
  background: rgba(239, 68, 68, 0.03);
}

.checklist-item.missing .status-icon {
  color: #ef4444;
}

.checklist-item.valid {
  background: rgba(16, 185, 129, 0.03);
}

.checklist-item.valid .status-icon {
  color: #10b981;
}

.checklist-item.caution {
  background: rgba(245, 158, 11, 0.045);
}

.checklist-item.caution .status-icon {
  color: #d97706;
}

.checklist-details {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.checklist-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.checklist-status {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.expense-warning-confirm-ask {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}

.btn-primary.warning-confirm-btn {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}

.btn-primary.warning-confirm-btn:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
}

/* Waiting List Status Toggle button and Resting styles */
.ready-player-chip {
  position: relative;
}

.btn-toggle-play-status {
  margin-left: auto;
  border: 1px solid transparent;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  cursor: pointer;
  user-select: none;
  transition: all 0.12s ease;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 0 !important;
  flex-shrink: 0;
  box-sizing: border-box;
}

.btn-toggle-play-status.status-ready {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.15) !important;
}

.btn-toggle-play-status.status-ready:hover {
  background: rgba(16, 185, 129, 0.15) !important;
}

.btn-toggle-play-status.status-rest {
  background: rgba(100, 116, 139, 0.08) !important;
  color: #64748b !important;
  border-color: rgba(100, 116, 139, 0.15) !important;
}

.btn-toggle-play-status.status-rest:hover {
  background: rgba(100, 116, 139, 0.15) !important;
}

.ready-player-chip.is-resting-player {
  opacity: 0.65;
}

.ready-player-chip.is-resting-player .player-avatar {
  background: var(--bg3) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

/* Player pinning styles */
.player-action-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn-pin {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn-pin svg {
  width: 17px;
  height: 17px;
}

.icon-btn-pin:hover {
  color: #f59e0b;
  background: rgba(245, 158, 11, .08);
}

.icon-btn-pin.active {
  color: #f59e0b;
}

.checkin-player-row {
  position: relative !important;
}

.checkin-pin-icon {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #f59e0b;
  opacity: 0.35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.checkin-pin-icon svg {
  width: 14px;
  height: 14px;
}

html[data-theme="dark"] .checkin-pin-icon {
  color: #f59e0b;
  opacity: 0.45;
}

#checkin-toggle-pinned {
  margin-left: auto;
}

#checkin-toggle-pinned.active {
  text-decoration: underline;
  color: var(--accent) !important;
}

.queue-spread-warning {
  display: grid;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 16px;
  background: rgba(245, 158, 11, 0.07);
}

.queue-spread-warning-icon {
  display: none;
}

.queue-spread-warning-copy {
  min-width: 0;
  width: 100%;
}

.queue-spread-warning-copy > strong,
.queue-spread-warning-copy strong {
  display: block;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.queue-spread-warning-copy > p,
.queue-spread-warning-copy p {
  margin: 4px 0 0;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.queue-spread-warning-late-note {
  margin: 6px 0 0;
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

html[data-theme="dark"] .queue-spread-warning-late-note {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}

.queue-spread-warning-meta,
.queue-spread-warning-result,
.queue-spread-warning-proceed,
.queue-spread-warning-groups {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.queue-spread-warning-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
}

.queue-spread-warning-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
}

html[data-theme="dark"] .queue-spread-warning-meta span {
  background: rgba(15, 23, 42, 0.58);
  color: #f6c177;
}

.queue-spread-warning-groups {
  margin-top: 0;
  display: grid;
  gap: 8px;
}

.queue-spread-warning-group {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.queue-spread-warning-group strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.queue-spread-warning-group p {
  margin-top: 4px;
}

.queue-spread-warning-group--higher {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(217, 119, 6, 0.22);
}

.queue-spread-warning-group--higher strong {
  color: #b45309;
}

.queue-spread-warning-group--lower {
  background: color-mix(in srgb, var(--accent) 9%, rgba(255, 255, 255, 0.72));
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

.queue-spread-warning-group--lower strong {
  color: color-mix(in srgb, var(--accent) 72%, #065f46);
}

.queue-spread-warning-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.queue-spread-warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  line-height: 1.2;
}

.queue-spread-warning-badge--higher {
  background: rgba(255, 251, 235, 0.95);
  border-color: rgba(217, 119, 6, 0.24);
  color: #92400e;
}

.queue-spread-warning-badge--lower {
  background: color-mix(in srgb, var(--accent) 11%, white);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: #065f46;
}

.queue-spread-warning-badge--on-court {
  border-style: dashed;
}

.queue-spread-warning-badge--lower.queue-spread-warning-badge--on-court .queue-spread-warning-badge-games {
  font-weight: 700;
}

.queue-spread-warning-badge-name {
  font-weight: 800;
}

.queue-spread-warning-badge-games {
  white-space: nowrap;
}

.queue-spread-warning-badge--higher .queue-spread-warning-badge-games {
  color: rgba(146, 64, 14, 0.76);
}

.queue-spread-warning-badge--lower .queue-spread-warning-badge-games {
  color: color-mix(in srgb, var(--accent) 58%, #065f46);
}

.queue-spread-warning-empty {
  color: var(--muted);
}

.queue-spread-warning-proceed {
  margin-top: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.queue-spread-warning-proceed strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #1d4ed8;
}

.queue-spread-warning-queue-list {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.queue-spread-warning-queue-card {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(59, 130, 246, 0.14);
}

.queue-spread-warning-queue-court {
  font-size: 11px;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 6px;
}

.queue-spread-warning-queue-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.queue-spread-warning-queue-team strong {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 4px;
}

.queue-spread-warning-queue-team-players {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.queue-spread-warning-queue-player {
  display: inline-block;
  font-size: 11px;
  line-height: 1.35;
  color: #0f172a;
}

.queue-spread-warning-queue-player--min {
  color: color-mix(in srgb, var(--accent) 72%, #065f46);
  font-weight: 800;
  background: color-mix(in srgb, var(--accent) 11%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
}

.queue-spread-warning-queue-player--max {
  color: #92400e;
  font-weight: 800;
  background: rgba(251, 191, 36, 0.16);
  border: 1px solid rgba(217, 119, 6, 0.24);
  padding: 2px 7px;
  border-radius: 999px;
}

.queue-spread-warning-queue-player--mid {
  color: #334155;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.2);
  border: 1px solid rgba(100, 116, 139, 0.28);
  padding: 2px 7px;
  border-radius: 999px;
}

.queue-spread-warning-result-summary {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.queue-spread-warning-result {
  margin-top: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, rgba(255, 255, 255, 0.72));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.queue-spread-warning-result strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: color-mix(in srgb, var(--accent) 72%, #065f46);
}

.queue-spread-warning-result-list {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.queue-spread-warning-result-list li + li {
  margin-top: 4px;
}

html[data-theme="dark"] .queue-spread-warning-result {
  background: color-mix(in srgb, var(--accent) 12%, rgba(15, 23, 42, 0.52));
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

html[data-theme="dark"] .queue-spread-warning-result strong {
  color: color-mix(in srgb, var(--accent) 68%, #a7f3d0);
}

html[data-theme="dark"] .queue-spread-warning-proceed {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(96, 165, 250, 0.24);
}

html[data-theme="dark"] .queue-spread-warning-proceed strong {
  color: #93c5fd;
}

html[data-theme="dark"] .queue-spread-warning-queue-card {
  background: rgba(15, 23, 42, 0.58);
  border-color: rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] .queue-spread-warning-queue-team strong {
  color: #cbd5e1;
}

html[data-theme="dark"] .queue-spread-warning-queue-player {
  color: #e2e8f0;
}

html[data-theme="dark"] .queue-spread-warning-queue-player--min {
  color: color-mix(in srgb, var(--accent) 78%, #d1fae5);
  background: color-mix(in srgb, var(--accent) 16%, rgba(15, 23, 42, 0.72));
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

html[data-theme="dark"] .queue-spread-warning-queue-player--max {
  color: #f8d7a0;
  background: rgba(69, 26, 3, 0.58);
  border-color: rgba(246, 193, 119, 0.22);
}

html[data-theme="dark"] .queue-spread-warning-queue-player--mid {
  color: #e2e8f0;
  background: rgba(100, 116, 139, 0.28);
  border-color: rgba(148, 163, 184, 0.34);
}

html[data-theme="dark"] .queue-spread-warning-group--higher {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(246, 193, 119, 0.22);
}

html[data-theme="dark"] .queue-spread-warning-group--higher strong {
  color: #f6c177;
}

html[data-theme="dark"] .queue-spread-warning-group--lower {
  background: color-mix(in srgb, var(--accent) 14%, rgba(15, 23, 42, 0.52));
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

html[data-theme="dark"] .queue-spread-warning-group--lower strong {
  color: color-mix(in srgb, var(--accent) 68%, #a7f3d0);
}

html[data-theme="dark"] .queue-spread-warning-badge--higher {
  background: rgba(69, 26, 3, 0.58);
  border-color: rgba(246, 193, 119, 0.22);
  color: #f8d7a0;
}

html[data-theme="dark"] .queue-spread-warning-badge--higher .queue-spread-warning-badge-games {
  color: rgba(248, 215, 160, 0.76);
}

html[data-theme="dark"] .queue-spread-warning-badge--lower {
  background: color-mix(in srgb, var(--accent) 16%, rgba(15, 23, 42, 0.72));
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, #d1fae5);
}

html[data-theme="dark"] .queue-spread-warning-badge--lower .queue-spread-warning-badge-games {
  color: color-mix(in srgb, var(--accent) 62%, #a7f3d0);
}

/* Room share · QR and social handoff */
.header-share-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}

.header-share-btn svg {
  width: 17px;
  height: 17px;
}

.header-share-btn:hover {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .38);
  background: rgba(17, 184, 154, .08);
}

.header-share-btn:active {
  transform: scale(.96);
}

.header-share-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 184, 154, .16);
}

#room-share-modal {
  z-index: 980 !important;
}

#room-share-modal .room-share-sheet {
  width: min(100%, 440px) !important;
  max-width: 440px !important;
}

.room-share-header {
  padding-bottom: 13px !important;
}

.room-share-header > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.room-share-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 2px !important;
}

.room-share-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}

.room-share-room>span,
.room-share-link-label,
.room-share-social>span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.room-share-room strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}

.room-share-room small {
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
}

.room-share-room small.is-warning {
  color: #d97706;
}

.room-share-qr-card {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(17, 184, 154, .20);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 41, 55, .08);
}

.room-share-qr {
  width: 216px;
  height: 216px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 11px;
  background: #fff;
}

.room-share-qr canvas,
.room-share-qr img {
  display: block;
  width: 216px !important;
  height: 216px !important;
}

.room-share-qr-loading,
.room-share-qr-error {
  max-width: 170px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.room-share-link-label {
  margin-bottom: -8px;
}

.room-share-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.room-share-link-row input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--input-bg, #f8fafc);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-share-copy-btn,
.room-share-native-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.room-share-copy-btn {
  min-width: 96px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.room-share-copy-btn .material-symbols-outlined,
.room-share-native-btn .material-symbols-outlined {
  font-size: 18px;
}

.room-share-copy-btn.is-copied {
  color: var(--accent);
  border-color: rgba(17, 184, 154, .36);
  background: rgba(17, 184, 154, .08);
}

.room-share-native-btn {
  width: 100%;
  min-height: 44px;
}

.room-share-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.room-share-social-actions {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  justify-content: flex-end;
  gap: 8px;
}

.room-share-social-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}

.room-share-social-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.room-share-social-btn:hover,
.room-share-social-btn:focus-visible {
  color: var(--text);
  border-color: rgba(17, 184, 154, .32);
  background: rgba(17, 184, 154, .06);
  outline: none;
}

.room-share-social-btn:active {
  transform: scale(.94);
}

.room-share-social-btn.line:hover,
.room-share-social-btn.line:focus-visible {
  color: #06c755;
  border-color: rgba(6, 199, 85, .32);
}

.room-share-social-btn.facebook:hover,
.room-share-social-btn.facebook:focus-visible {
  color: #0866ff;
  border-color: rgba(8, 102, 255, .30);
}

.room-share-social-btn.x:hover,
.room-share-social-btn.x:focus-visible {
  color: var(--text);
  border-color: rgba(100, 116, 139, .34);
}

html[data-theme="dark"] .header-share-btn {
  background: rgba(17, 26, 46, .78);
  border-color: rgba(148, 163, 184, .16);
}

html[data-theme="dark"] .room-share-link-row input {
  background: rgba(17, 26, 46, .78);
}

@media(max-width:520px) {
  .header-share-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
  }

  .room-share-qr-card {
    padding: 8px;
    border-radius: 18px;
  }

  .room-share-qr,
  .room-share-qr canvas,
  .room-share-qr img {
    width: 196px !important;
    height: 196px !important;
  }

  .room-share-link-row {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .room-share-link-row > .room-share-copy-btn {
    width: 44px;
    min-width: 44px;
    padding: 0 !important;
    border-radius: 12px;
    justify-self: end;
  }

  .room-share-copy-label {
    display: none;
  }

  .room-share-social {
    gap: 10px;
  }

  .room-share-social-actions {
    gap: 7px;
  }

  .room-share-social-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

/* Compact player creation modal */
.add-player-trigger {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 64px;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  cursor: pointer;
}

.add-player-trigger:hover {
  background: rgba(20, 184, 166, .045);
}

.add-player-trigger:focus-visible,
.add-player-another-btn:focus-visible,
.add-player-card-remove:focus-visible {
  outline: 3px solid rgba(20, 184, 166, .2);
  outline-offset: 2px;
}

.add-player-trigger:disabled {
  cursor: not-allowed;
  opacity: .65;
}

.add-player-trigger-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(20, 184, 166, .22);
  border-radius: 11px;
  color: var(--accent);
  background: rgba(20, 184, 166, .07);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.add-player-trigger-icon svg {
  width: 18px;
  height: 18px;
}

.add-player-trigger-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.add-player-trigger-copy strong {
  color: var(--accent);
  font-size: 14px;
  font-weight: 850;
}

.add-player-trigger-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.add-player-trigger-arrow {
  margin-left: auto;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.add-player-card.permission-disabled .add-player-trigger::after {
  content: 'ยังไม่มีสิทธิ์';
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.add-player-card.permission-disabled .add-player-trigger-arrow {
  display: none;
}

#add-player-modal {
  z-index: 1450;
  align-items: center;
}

#add-player-modal .add-player-modal-sheet {
  width: min(100%, 560px);
  max-width: 560px;
  max-height: min(680px, calc(100dvh - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#add-player-modal .modal-header {
  flex: 0 0 auto;
  padding: 14px 16px 11px;
}

#add-player-modal .modal-title {
  font-size: 16px;
}

#add-player-modal .modal-subtitle {
  font-size: 11px;
}

#add-player-modal .modal-close-btn {
  width: 30px;
  height: 30px;
}

#add-player-modal .add-player-modal-body {
  min-height: 0;
  padding: 10px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
}

.add-player-modal-intro {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(20, 184, 166, .16);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(20, 184, 166, .045);
  font-size: 11px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 7px;
}

.add-player-modal-intro .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 17px;
}

.add-player-form-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1px 2px 2px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.add-player-form-card {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3, rgba(148, 163, 184, .05));
}

.add-player-form-card-head {
  min-height: 24px;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.add-player-form-card-head strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.add-player-card-remove {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.add-player-card-remove:hover {
  color: var(--out);
  border-color: rgba(220, 38, 38, .16);
  background: rgba(220, 38, 38, .06);
}

.add-player-card-remove svg {
  width: 15px;
  height: 15px;
}

.add-player-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

#add-player-modal .form-group {
  min-width: 0;
  margin-bottom: 0;
}

#add-player-modal .form-label {
  margin-bottom: 4px;
  font-size: 11px;
}

.form-label-optional {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

#add-player-modal input[type=text],
#add-player-modal input[type=email],
#add-player-modal select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
}

.add-player-another-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px dashed rgba(20, 184, 166, .38);
  border-radius: 10px;
  color: var(--accent);
  background: rgba(20, 184, 166, .035);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.add-player-another-btn:hover {
  background: rgba(20, 184, 166, .08);
  border-color: rgba(20, 184, 166, .55);
}

.add-player-another-btn span {
  font-size: 16px;
  vertical-align: -1px;
}

#add-player-modal .add-player-modal-footer {
  flex: 0 0 auto;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(125, 132, 145, .12);
  display: flex;
  gap: 8px;
}

#add-player-modal .add-player-modal-footer .btn {
  width: auto;
  flex: 1 1 0;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 13px;
}

#add-player-modal .add-player-modal-footer .btn-primary {
  flex: 1 1 0;
}

#add-player-modal.add-player-demo .add-player-modal-intro {
  display: none;
}

#add-player-modal.add-player-demo .add-player-form-grid {
  grid-template-columns: minmax(0, 1fr) minmax(108px, .75fr);
}

#add-player-modal.add-player-demo .add-player-email-group {
  display: none;
}

@media (max-width: 640px) {
  #add-player-modal {
    padding: 8px;
  }

  #add-player-modal .add-player-modal-sheet {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 20px;
  }

  #add-player-modal .add-player-form-grid,
  #add-player-modal.add-player-demo .add-player-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(102px, .7fr);
  }

  .add-player-email-group {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Player settings action belongs in the section header */
#settings-panel-players .settings-panel-head {
  align-items: center;
  flex-wrap: wrap;
}

#settings-panel-players .add-player-header-btn {
  width: auto;
  min-width: 0;
  min-height: 38px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 8px 13px;
  gap: 6px;
  border-radius: 10px;
  white-space: nowrap;
}

#settings-panel-players .add-player-header-btn .material-symbols-outlined {
  font-size: 17px;
  line-height: 1;
}

#settings-panel-players .add-player-header-btn.permission-disabled {
  cursor: not-allowed;
  opacity: .62;
}

body.auth-ready #settings-panel-players > .card:not(.add-player-card) {
  grid-column: 1 / -1 !important;
}

body.role-member-mode #settings-panel-players .add-player-header-btn,
body.guest-mode #settings-panel-players .add-player-header-btn,
body.read-only-mode #settings-panel-players .add-player-header-btn {
  display: none !important;
}

@media (max-width: 520px) {
  #settings-panel-players .settings-panel-head {
    align-items: flex-start;
  }

  #settings-panel-players .settings-panel-head > div:first-child {
    min-width: 0;
    flex: 1 1 180px;
  }

  #settings-panel-players .add-player-header-btn {
    margin-top: 1px;
  }
}

/* Viewer Settings exposes only the top-level sections granted by Admin. */
body.role-viewer-mode .header-settings-btn,
body.role-viewer-mode #header-settings-btn,
body.role-viewer-mode [data-nav-target^="settings-"],
body.role-viewer-mode .settings-tabs {
  display: flex !important;
}

body.role-viewer-mode .settings-tabs {
  display: grid !important;
}

.form-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}

body.role-viewer-mode #settings-tab-players,
body.role-viewer-mode #settings-tab-scheduled-sessions,
body.role-viewer-mode #settings-tab-access,
body.role-viewer-mode #settings-panel-players,
body.role-viewer-mode #settings-panel-scheduled-sessions,
body.role-viewer-mode #settings-panel-access {
  display: none !important;
}

body.role-viewer-mode .settings-tabs[data-viewer-tab-count="1"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.role-viewer-mode .settings-tabs[data-viewer-tab-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.role-member-mode #settings-tab-scheduled-sessions,
body.role-member-mode #settings-panel-scheduled-sessions {
  display: none !important;
}

body.role-viewer-mode #settings-tab-system:not(.hidden),
body.role-viewer-mode #settings-tab-account:not(.hidden) {
  display: flex !important;
}

body.role-viewer-mode #settings-panel-system.active:not(.hidden),
body.role-viewer-mode #settings-panel-account.active:not(.hidden) {
  display: block !important;
}

/* Player settings: daily player management and structural level settings stay distinct. */
.player-settings-subtabs {
  grid-column: 1 / -1;
  width: 100%;
}

.player-settings-subtabs.single-tab {
  display: none;
}

.player-settings-subtab {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 999px;
}

.player-settings-pane {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 14px;
}

/* Player Level Mode: additive settings card; the original 3-level mode remains the default. */
.player-level-mode-card {
  grid-column: 1 / -1;
  padding: 16px;
  border-color: rgba(20, 184, 166, .2);
  display: grid;
  gap: 14px;
}

.player-level-mode-head,
.player-level-mode-title-wrap,
.player-level-mode-footer,
.player-level-detail-head {
  display: flex;
  align-items: center;
}

.player-level-mode-head,
.player-level-mode-footer,
.player-level-detail-head {
  justify-content: space-between;
  gap: 12px;
}

.player-level-mode-title-wrap {
  min-width: 0;
  gap: 10px;
}

.player-level-mode-title-wrap > .material-symbols-outlined {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--accent);
  background: rgba(20, 184, 166, .1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.player-level-mode-title-wrap .card-title {
  margin: 0;
}

.player-level-mode-title-wrap p,
.player-level-mode-footer p,
.player-level-detail-head small {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.settings-state-chip {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--bg3);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
}

.settings-state-chip.is-pending {
  color: #047857;
  background: rgba(16, 185, 129, .1);
  border-color: rgba(16, 185, 129, .3);
}

.player-level-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.player-level-mode-option {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: var(--bg3);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.player-level-mode-option:hover {
  border-color: rgba(20, 184, 166, .38);
}

.player-level-mode-option.active {
  border-color: var(--accent);
  background: rgba(20, 184, 166, .08);
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, .08);
}

.player-level-mode-option > .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--muted);
}

.player-level-mode-option.active > .material-symbols-outlined {
  color: var(--accent);
}

.player-level-mode-option span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.player-level-mode-option strong {
  font-size: 13px;
}

.player-level-mode-option small {
  color: var(--muted);
  font-size: 11px;
}

.player-level-detail-panel {
  padding: 13px;
  border: 1px solid rgba(20, 184, 166, .18);
  border-radius: 14px;
  background: rgba(20, 184, 166, .035);
  display: grid;
  gap: 11px;
}

.player-level-detail-head > div {
  min-width: 0;
}

.player-level-detail-head > div > strong {
  display: block;
  font-size: 13px;
}

.player-level-detail-head > span {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.player-level-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.player-level-toggle {
  min-width: 0;
  min-height: 72px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.player-level-toggle:hover {
  border-color: rgba(20, 184, 166, .38);
}

.player-level-toggle.active {
  border-color: rgba(20, 184, 166, .42);
  background: rgba(20, 184, 166, .065);
}

.player-level-toggle-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.player-level-toggle-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.player-level-toggle-label {
  font-size: 13px;
  font-weight: 900;
}

.player-level-toggle-copy > small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.player-level-toggle-switch {
  margin: 0;
  pointer-events: none;
}

.player-level-mode-footer {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.player-level-mode-footer p {
  margin: 0;
}

.player-level-mode-footer .btn {
  width: auto;
  min-width: 110px;
  margin: 0;
}

body.role-member-mode .player-level-mode-card,
body.role-viewer-mode .player-level-mode-card,
body.guest-mode .player-level-mode-card,
body.read-only-mode .player-level-mode-card {
  display: none !important;
}

@media (max-width: 720px) {
  .player-level-mode-card {
    padding: 13px;
  }

  .player-level-mode-options {
    grid-template-columns: 1fr;
  }

  .player-level-toggle-grid {
    grid-template-columns: 1fr;
  }

  .player-level-mode-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .player-level-mode-footer .btn {
    width: 100%;
  }
}

/* Access management action follows the same header + modal pattern as player management. */
#settings-panel-access .settings-panel-head {
  align-items: center;
  flex-wrap: wrap;
}

#settings-panel-access .access-add-user-header-btn {
  width: auto;
  min-width: 0;
  min-height: 38px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 8px 13px;
  gap: 6px;
  border-radius: 10px;
  white-space: nowrap;
}

#settings-panel-access .access-add-user-header-btn .material-symbols-outlined {
  font-size: 17px;
  line-height: 1;
}

#access-create-user-modal {
  z-index: 1450;
  align-items: center;
}

#access-create-user-modal .access-create-user-sheet {
  width: min(100%, 560px);
  max-width: 560px;
  max-height: min(680px, calc(100dvh - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#access-create-user-modal .modal-header {
  flex: 0 0 auto;
  padding: 14px 16px 11px;
}

#access-create-user-modal .modal-title {
  font-size: 16px;
}

#access-create-user-modal .modal-subtitle {
  font-size: 11px;
}

#access-create-user-modal .modal-close-btn {
  width: 30px;
  height: 30px;
}

#access-create-user-modal .access-create-user-body {
  min-height: 0;
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.access-create-user-intro {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(20, 184, 166, .16);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(20, 184, 166, .045);
  font-size: 11px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 7px;
}

.access-create-user-intro .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 17px;
}

#access-create-user-modal .access-form-grid {
  gap: 10px !important;
}

#access-create-user-modal .access-form-grid .form-group {
  margin-bottom: 0;
}

#access-create-user-modal input[type=text],
#access-create-user-modal input[type=email],
#access-create-user-modal select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
}

#access-create-user-modal .access-create-user-footer {
  flex: 0 0 auto;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(125, 132, 145, .12);
  display: flex;
  gap: 8px;
}

#access-create-user-modal .access-create-user-footer .btn {
  width: auto;
  flex: 1 1 0;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 13px;
}

@media (max-width: 520px) {
  #settings-panel-access .settings-panel-head {
    align-items: flex-start;
    flex-direction: row;
  }

  #settings-panel-access .settings-panel-head > div:first-child {
    min-width: 0;
    flex: 1 1 180px;
  }

  #settings-panel-access .access-add-user-header-btn {
    margin-top: 1px;
  }

  #access-create-user-modal {
    padding: 8px;
  }

  #access-create-user-modal .access-create-user-sheet {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 20px;
  }

  #access-create-user-modal .access-form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Keep every top-level Settings tab anchored by the same quiet card header as Access. */
#settings-panel-players .settings-panel-head,
#settings-panel-queue-settings .settings-panel-head,
#settings-panel-system .settings-panel-head,
#settings-panel-scheduled-sessions .settings-panel-head,
#settings-panel-account .settings-panel-head,
#settings-panel-expense-settings .settings-panel-head,
#settings-panel-access .settings-panel-head {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, .12);
  background: linear-gradient(135deg, rgba(45, 212, 191, .10), rgba(139, 92, 246, .07));
  border-radius: 22px;
  padding: 16px;
}

#settings-panel-players .settings-panel-title,
#settings-panel-queue-settings .settings-panel-title,
#settings-panel-system .settings-panel-title,
#settings-panel-scheduled-sessions .settings-panel-title,
#settings-panel-account .settings-panel-title,
#settings-panel-expense-settings .settings-panel-title,
#settings-panel-access .settings-panel-title {
  font-size: 18px;
  letter-spacing: -.25px;
}

.rotation-mode-card-panel {
  margin-bottom: 16px;
}

.standard-rotation-family-card {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  overflow-x: clip;
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}

.standard-rotation-family-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.standard-rotation-family-card.is-setting-locked,
.winner-stays-family-card.is-setting-locked {
  opacity: .62;
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border));
  background: color-mix(in srgb, var(--muted) 3%, var(--card));
  cursor: not-allowed;
}

.standard-rotation-family-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 4px;
  color: var(--text);
}

.standard-rotation-family-heading > .material-symbols-outlined {
  color: var(--accent);
  font-size: 22px;
}

.standard-rotation-family-heading strong,
.standard-rotation-family-heading small {
  display: block;
}

.standard-rotation-family-heading small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.standard-rotation-family-card #standard-rotation-logic-slot {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.standard-rotation-family-card #queue-logic-settings {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--accent) 2%, var(--card));
  overflow-x: clip;
}

.standard-rotation-family-card #queue-logic-settings .preset-cards-grid {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 0;
}

.standard-rotation-family-card #queue-logic-settings .preset-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.standard-rotation-family-card #queue-logic-settings .preset-card-desc {
  white-space: normal;
}

.winner-stays-family-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  transition: border-color .18s ease, background .18s ease;
}

/* Tint the family card only while one of its submodes is the active mode. */
.winner-stays-family-card:has(.rotation-mode-card.active) {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.winner-stays-family-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 4px;
  color: var(--text);
}

.winner-stays-family-heading > .material-symbols-outlined {
  color: var(--muted);
  font-size: 22px;
}

.winner-stays-family-card:has(.rotation-mode-card.active) .winner-stays-family-heading > .material-symbols-outlined {
  color: var(--accent);
}

.winner-stays-family-heading strong,
.winner-stays-family-heading small {
  display: block;
}

.winner-stays-family-heading small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.rotation-family-toggle {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  min-height: 48px;
  padding: 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rotation-family-toggle .rotation-mode-active-badge {
  position: static;
  justify-self: end;
}

.rotation-family-toggle.active .rotation-mode-active-badge {
  opacity: 1;
  transform: scale(1);
}

.rotation-family-toggle:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.rotation-family-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
}

.rotation-family-toggle > .material-symbols-outlined {
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

.standard-rotation-family-card.is-active .rotation-family-toggle > .material-symbols-outlined,
.winner-stays-family-card.is-active .rotation-family-toggle > .material-symbols-outlined {
  color: var(--accent);
}

.rotation-family-heading-copy,
.rotation-family-heading-copy strong,
.rotation-family-heading-copy small {
  display: block;
  min-width: 0;
}

.rotation-family-heading-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.rotation-family-chevron {
  justify-self: end;
  color: var(--muted) !important;
  transition: transform .18s ease, color .18s ease;
}

.rotation-family-toggle[aria-expanded="true"] .rotation-family-chevron {
  color: var(--accent) !important;
  transform: rotate(180deg);
}

.rotation-family-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#stay-on-court-rules-slot {
  display: grid;
  min-width: 0;
}

#stay-on-court-rules-slot .winner-stays-rules {
  margin-top: 0;
}

.standard-rotation-family-card.is-setting-locked .rotation-family-toggle,
.winner-stays-family-card.is-setting-locked .rotation-family-toggle {
  cursor: not-allowed;
}

.winner-stays-submode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.winner-stays-submode-grid .rotation-mode-card {
  min-height: 104px;
  padding: 12px;
}

.rotation-mode-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.rotation-mode-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.rotation-settings-save-bar {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.rotation-settings-save-bar.is-dirty {
  border-color: color-mix(in srgb, #10b981 38%, var(--border));
  background: color-mix(in srgb, #10b981 7%, var(--card));
}

.rotation-settings-save-bar.is-saved {
  opacity: .72;
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border));
  background: color-mix(in srgb, var(--muted) 5%, var(--card));
}

.rotation-settings-save-bar.is-saving {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.rotation-settings-save-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.rotation-settings-save-copy strong {
  font-size: 13px;
}

.rotation-settings-save-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.rotation-settings-save-copy span.is-dirty {
  color: #047857;
  font-weight: 800;
}

.rotation-settings-save-copy span.is-saving {
  color: var(--accent);
  font-weight: 700;
}

.rotation-settings-save-btn {
  width: auto;
  min-width: 176px;
  min-height: 44px;
  white-space: nowrap;
}

.rotation-settings-save-btn.is-disabled,
.rotation-settings-save-btn:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.rotation-settings-save-bar.is-saved .rotation-settings-save-btn.is-disabled,
.rotation-settings-save-bar.is-saved .rotation-settings-save-btn:disabled {
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border));
  background: color-mix(in srgb, var(--muted) 18%, var(--card));
  color: var(--muted);
  box-shadow: none;
  opacity: 1;
}

.queue-logic-help {
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.ready-player-pair-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: fit-content;
  max-width: min(180px, 42vw);
  min-width: 24px;
  min-height: 22px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid rgba(125, 132, 145, .22);
  border-radius: 8px;
  background: rgba(125, 132, 145, .07);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  vertical-align: middle;
}

.custom-player-pair-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 120px;
  overflow: hidden;
  margin-left: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-player-pair-label .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  opacity: .72;
}

.custom-current-pill .material-symbols-outlined {
  font-size: 13px;
  line-height: 1;
}

.ready-player-pair-badge .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}

.ready-player-pair-badge:hover {
  border-color: rgba(125, 132, 145, .4);
  background: rgba(125, 132, 145, .12);
  color: var(--text);
}

.ready-player-pair-badge.is-paired {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  color: var(--accent);
}

.ready-player-pair-badge.is-paired:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
}

.ready-player-pair-badge:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
}

.ready-player-pair-badge:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.ready-player-pair-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 150px;
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.queue-locked-pair-existing-badge {
  display: inline-flex;
  align-items: center;
  max-width: 150px;
  padding: 2px 6px;
  border: 1px solid rgba(125, 132, 145, .22);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.queue-locked-pair-setting-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 16px !important;
}

/* This display setting lives in a system group, so its gap comes from the group rhythm. */
.queue-repeat-history-notice-setting-card {
  margin-top: 0;
}

.queue-feature-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  max-width: 280px;
  text-align: right;
}

.queue-feature-compatibility {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .queue-feature-head-actions {
    max-width: 180px;
    gap: 8px;
  }

  .queue-feature-compatibility {
    max-width: 122px;
  }
}

/* Keep queue feature cards readable on narrow screens: copy first, controls second. */
@media (max-width: 640px) {
  .queue-locked-pair-setting-card,
  .queue-gender-pairing-setting-card,
  .prepared-queue-setting-card,
  .queue-preview-setting-card,
  .queue-repeat-history-notice-setting-card {
    min-width: 0;
    overflow: hidden;
    gap: 8px;
    padding: 12px 14px !important;
  }

  .queue-locked-pair-setting-card .personal-queue-setting-head,
  .queue-gender-pairing-setting-card .personal-queue-setting-head,
  .prepared-queue-setting-card .personal-queue-setting-head,
  .queue-preview-setting-card .personal-queue-setting-head,
  .queue-repeat-history-notice-setting-card .personal-queue-setting-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }

  .queue-locked-pair-setting-card .personal-queue-setting-title,
  .queue-gender-pairing-setting-card .personal-queue-setting-title,
  .prepared-queue-setting-card .personal-queue-setting-title,
  .queue-preview-setting-card .personal-queue-setting-title,
  .queue-repeat-history-notice-setting-card .personal-queue-setting-title {
    width: 100%;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
  }

  .queue-locked-pair-setting-card .personal-queue-setting-title .material-symbols-outlined,
  .queue-gender-pairing-setting-card .personal-queue-setting-title .material-symbols-outlined,
  .prepared-queue-setting-card .personal-queue-setting-title .material-symbols-outlined,
  .queue-preview-setting-card .personal-queue-setting-title .material-symbols-outlined,
  .queue-repeat-history-notice-setting-card .personal-queue-setting-title .material-symbols-outlined {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 18px;
  }

  .queue-locked-pair-setting-card .personal-queue-setting-title strong,
  .queue-gender-pairing-setting-card .personal-queue-setting-title strong,
  .prepared-queue-setting-card .personal-queue-setting-title strong,
  .queue-preview-setting-card .personal-queue-setting-title strong,
  .queue-repeat-history-notice-setting-card .personal-queue-setting-title strong {
    font-size: 14px;
  }

  .queue-locked-pair-setting-card .personal-queue-setting-title small,
  .queue-gender-pairing-setting-card .personal-queue-setting-title small,
  .prepared-queue-setting-card .personal-queue-setting-title small,
  .queue-preview-setting-card .personal-queue-setting-title small,
  .queue-repeat-history-notice-setting-card .personal-queue-setting-title small {
    font-size: 10.5px;
    line-height: 1.3;
  }

  .queue-locked-pair-setting-card .queue-feature-head-actions,
  .queue-gender-pairing-setting-card .queue-feature-head-actions,
  .prepared-queue-setting-card .queue-feature-head-actions,
  .queue-preview-setting-card .queue-feature-head-actions,
  .queue-repeat-history-notice-setting-card .queue-feature-head-actions {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
  }

  .queue-locked-pair-setting-card .queue-feature-compatibility,
  .queue-gender-pairing-setting-card .queue-feature-compatibility,
  .prepared-queue-setting-card .queue-feature-compatibility,
  .queue-preview-setting-card .queue-feature-compatibility,
  .queue-repeat-history-notice-setting-card .queue-feature-compatibility {
    max-width: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }

  .queue-preview-setting-card .personal-queue-alert-toggle-row {
    gap: 10px;
    padding-top: 10px;
  }

  .queue-preview-setting-card .personal-queue-alert-setting-copy {
    min-width: 0;
  }
}

@media (max-width: 380px) {
  .queue-locked-pair-setting-card .queue-feature-compatibility,
  .queue-gender-pairing-setting-card .queue-feature-compatibility,
  .prepared-queue-setting-card .queue-feature-compatibility,
  .queue-preview-setting-card .queue-feature-compatibility,
  .queue-repeat-history-notice-setting-card .queue-feature-compatibility {
    font-size: 9px;
  }

  .prepared-queue-playing-setting {
    align-items: flex-start;
    gap: 10px;
  }
}

.queue-locked-pair-setting-card.is-dimmed,
.queue-gender-pairing-setting-card.is-dimmed,
.prepared-queue-setting-card.is-dimmed,
.queue-preview-setting-card.is-dimmed,
.queue-repeat-history-notice-setting-card.is-dimmed {
  opacity: .62;
  border-color: color-mix(in srgb, var(--muted) 32%, var(--border));
  background: color-mix(in srgb, var(--muted) 5%, var(--card));
  cursor: not-allowed;
}

.queue-locked-pair-setting-card.is-dimmed .personal-queue-setting-title .material-symbols-outlined,
.queue-gender-pairing-setting-card.is-dimmed .personal-queue-setting-title .material-symbols-outlined,
.prepared-queue-setting-card.is-dimmed .personal-queue-setting-title .material-symbols-outlined,
.queue-preview-setting-card.is-dimmed .personal-queue-setting-title .material-symbols-outlined,
.queue-repeat-history-notice-setting-card.is-dimmed .personal-queue-setting-title .material-symbols-outlined {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, var(--card));
}

.queue-locked-pair-setting-card.is-dimmed .qbad-toggle-switch,
.queue-gender-pairing-setting-card.is-dimmed .qbad-toggle-switch,
.prepared-queue-setting-card.is-dimmed .qbad-toggle-switch,
.queue-preview-setting-card.is-dimmed .qbad-toggle-switch,
.queue-repeat-history-notice-setting-card.is-dimmed .qbad-toggle-switch {
  opacity: .72;
}

.queue-locked-pair-setting-card.is-enabled,
.queue-gender-pairing-setting-card.is-enabled,
.prepared-queue-setting-card.is-enabled,
.queue-preview-setting-card.is-enabled,
.queue-repeat-history-notice-setting-card.is-enabled {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
}

.prepared-queue-playing-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.prepared-queue-playing-setting-copy {
  min-width: 0;
}

.prepared-queue-playing-setting-copy strong,
.prepared-queue-playing-setting-copy small {
  display: block;
}

.prepared-queue-playing-setting-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.prepared-queue-playing-setting-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.queue-locked-pair-sheet {
  max-width: 540px;
}

.queue-locked-pair-modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0;
  padding: 10px 18px 0;
}

.queue-locked-pair-modal-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: none;
  padding: 0 0 12px;
}

.queue-locked-pair-modal-footer {
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  margin: 0 !important;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom)) !important;
  background: var(--card);
  border-top: 1px solid rgba(125, 132, 145, .16);
  box-shadow: 0 -10px 24px rgba(31, 41, 55, .08);
}

#queue-locked-pair-modal {
  z-index: 1400 !important;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 96px;
  overflow: hidden;
}

#queue-locked-pair-modal .checkin-sheet {
  position: relative !important;
  z-index: 1410 !important;
  width: min(100%, 520px);
  max-width: calc(100vw - 24px);
  height: min(760px, calc(100dvh - 116px - env(safe-area-inset-bottom)));
  max-height: calc(100dvh - 116px - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 24px;
}

#queue-locked-pair-modal .modal-header {
  flex: 0 0 auto;
}

#queue-locked-pair-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: none;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 18px 0;
}

#queue-locked-pair-modal .queue-locked-pair-search-collapse,
#queue-locked-pair-modal .checkin-player-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#queue-locked-pair-modal .queue-locked-pair-search-collapse,
#queue-locked-pair-modal .queue-locked-pair-toolbar {
  flex: 0 0 auto;
}

#queue-locked-pair-modal #queue-locked-pair-modal-count {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#queue-locked-pair-modal .queue-locked-pair-remove-link {
  flex: 0 0 auto;
}

#queue-locked-pair-modal .queue-locked-pair-toolbar {
  justify-content: space-between;
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

#queue-locked-pair-modal .queue-locked-pair-remove-link {
  border: 0;
  padding: 2px 0;
  background: transparent;
  color: var(--out);
  font: inherit;
  cursor: pointer;
}

#queue-locked-pair-modal .queue-locked-pair-remove-link:hover {
  text-decoration: underline;
}

#queue-locked-pair-modal .queue-locked-pair-modal-footer .btn {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

#queue-locked-pair-modal .queue-locked-pair-modal-footer .btn-primary.is-disabled,
#queue-locked-pair-modal .queue-locked-pair-modal-footer .btn-primary:disabled {
  background: #d1d5db;
  color: #ffffff;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

body:has(#queue-locked-pair-modal:not(.hidden)) .topbar,
body:has(#queue-locked-pair-modal:not(.hidden)) .bottom-nav {
  z-index: 300 !important;
  pointer-events: none !important;
}

@supports not (height: 100dvh) {
  #queue-locked-pair-modal .checkin-sheet {
    height: min(760px, calc(100vh - 116px - env(safe-area-inset-bottom)));
    max-height: calc(100vh - 116px - env(safe-area-inset-bottom));
  }
}

html[data-theme="dark"] #queue-locked-pair-modal .queue-locked-pair-modal-footer {
  background: rgba(18, 26, 43, .98);
  border-top-color: rgba(148, 163, 184, .16);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] #queue-locked-pair-modal .queue-locked-pair-modal-footer .btn-primary.is-disabled,
html[data-theme="dark"] #queue-locked-pair-modal .queue-locked-pair-modal-footer .btn-primary:disabled {
  background: #475569;
  color: #cbd5e1;
}

html[data-theme="dark"] .preset-card-badge.is-pending,
html[data-theme="dark"] .rotation-mode-active-badge.is-pending,
html[data-theme="dark"] .rotation-settings-save-copy span.is-dirty {
  color: #6ee7b7;
}

@media (max-width: 420px) {
  #queue-locked-pair-modal {
    padding: 12px 12px calc(82px + env(safe-area-inset-bottom));
  }

  #queue-locked-pair-modal .checkin-sheet {
    height: calc(100dvh - 102px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 102px - env(safe-area-inset-bottom));
    border-radius: 22px;
  }

  #queue-locked-pair-modal .modal-body {
    padding: 8px 16px 0;
  }

  #queue-locked-pair-modal .queue-locked-pair-modal-footer {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qbad-toggle-slider,
  .qbad-toggle-slider::before {
    transition: none;
  }
}

.rotation-mode-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.rotation-mode-card {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 12px;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rotation-mode-card .material-symbols-outlined {
  grid-row: 1 / span 2;
  color: var(--muted);
}

.rotation-mode-card strong {
  font-size: 14px;
  padding-right: 82px;
}

.rotation-mode-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.rotation-mode-card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  transform: translateY(-1px);
}

.rotation-mode-card.is-disabled,
.rotation-mode-card[aria-disabled="true"] {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.rotation-mode-card.is-disabled:hover,
.rotation-mode-card[aria-disabled="true"]:hover {
  border-color: var(--border);
  background: var(--card);
  transform: none;
}

#court-scoreboard-setting-card.is-quick-game-over-locked {
  opacity: .72;
}

#court-scoreboard-setting-card.is-quick-game-over-locked .qbad-toggle-switch {
  opacity: .55;
}

.quick-game-over-panel .winner-pick-title {
  color: var(--accent);
}

.rotation-mode-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent), 0 10px 24px color-mix(in srgb, var(--accent) 10%, transparent);
}

.rotation-mode-card.active .material-symbols-outlined {
  color: var(--accent);
}

.rotation-mode-card:focus-visible,
.preset-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
}

.rotation-mode-active-badge {
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: .01em;
}

.rotation-mode-card.active .preset-card-badge {
  opacity: 1;
  transform: scale(1);
}

.winner-stays-rules {
  display: grid;
  grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);
  align-items: stretch;
  column-gap: 16px;
  row-gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 2%, var(--card));
}

.rotation-rules-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  grid-column: 1 / -1;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
}

.rotation-rules-heading strong {
  color: var(--text);
  font-size: 13.5px;
  letter-spacing: -.1px;
}

.winner-stays-control {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
}

.winner-stays-control select {
  width: 100%;
  min-height: 44px;
}

.winner-stays-control small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.fixed-swap-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.fixed-swap-toggle .fixed-swap-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.fixed-swap-toggle .qbad-toggle-switch {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
}

.fixed-swap-toggle strong,
.fixed-swap-toggle small {
  display: block;
}

.fixed-swap-toggle strong {
  font-size: 12.5px;
}

.fixed-swap-toggle small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.rotation-rule-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.winner-stays-projection {
  align-items: center;
  min-height: 100%;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

.winner-stays-projection > div {
  display: grid;
  gap: 4px;
}

.winner-stays-projection strong {
  color: var(--text);
  font-size: 13px;
}

.winner-stays-projection span:not(.material-symbols-outlined) {
  display: block;
}

.rotation-rule-note .material-symbols-outlined {
  color: var(--accent);
  font-size: 19px;
}

.winner-stays-auto-logic {
  display: flex;
  align-items: flex-start;
  grid-column: 1 / -1;
  gap: 8px;
  margin-top: 0;
  padding: 12px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
}

.winner-stays-auto-logic .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 20px;
}

.winner-stays-auto-logic > div {
  display: grid;
  gap: 3px;
}

.winner-stays-auto-logic strong {
  color: var(--text);
  font-size: 13px;
}

.winner-stays-auto-logic span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.rotation-mode-nested-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
}

.custom-priority-settings {
  margin-top: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.custom-priority-label {
  display: block;
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.4;
}

.standard-rotation-family-card #queue-logic-settings .custom-priority-settings {
  margin-top: 10px;
}

.standard-rotation-family-card #queue-logic-settings .preset-detail-panel {
  margin-top: 10px;
  margin-bottom: 8px;
  padding: 10px 12px;
}

.standard-rotation-family-card #queue-logic-settings .priority-item {
  padding: 9px 10px;
  gap: 6px 8px;
}

.standard-rotation-family-card #queue-logic-settings .qbad-toggle-switch {
  margin-right: 0;
}

.rotation-mode-nested-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rotation-mode-nested-heading strong {
  color: var(--text);
  font-size: 14px;
}

.rotation-mode-nested-heading .queue-logic-help {
  margin-bottom: 8px;
}

.rotation-mode-context-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.manual-court-draft {
  border-color: rgba(17, 184, 154, .3);
}

.manual-draft-player-chip {
  display: flex;
  min-height: 54px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.manual-draft-player-chip.is-empty {
  border-style: dashed !important;
  border-color: rgba(100, 116, 139, .32) !important;
  background: var(--bg3) !important;
  color: var(--text-muted) !important;
}

.manual-draft-player-name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-draft-player-meta {
  min-width: 0;
  max-width: 100%;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-court-draft .btn-start-game:disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: saturate(.35);
}

.manual-empty-player-option .custom-player-avatar {
  color: var(--text-muted);
}

.manual-empty-player-option .material-symbols-outlined {
  font-size: 20px;
}

@media (max-width: 900px) and (min-width: 721px) {
  .rotation-mode-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .winner-stays-family-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .rotation-settings-save-bar {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .rotation-settings-save-btn {
    width: 100%;
  }

  .rotation-mode-grid,
  .winner-stays-rules {
    grid-template-columns: 1fr;
  }

  .rotation-mode-grid {
    gap: 10px;
  }

  .rotation-mode-card {
    min-height: 0;
    padding: 12px;
    gap: 3px 10px;
  }

  .rotation-mode-card strong {
    padding-right: 68px;
    font-size: 13.5px;
  }

  .rotation-mode-card small {
    font-size: 11.5px;
    line-height: 1.5;
  }

  .rotation-mode-card .material-symbols-outlined {
    font-size: 22px;
  }

  .winner-stays-family-card {
    padding: 10px;
    gap: 8px;
  }

  .standard-rotation-family-card {
    padding: 10px;
    gap: 8px;
  }

  .standard-rotation-family-card #queue-logic-settings {
    padding: 10px;
  }

  .standard-rotation-family-card #queue-logic-settings .priority-item {
    grid-template-columns: 24px auto 20px minmax(0, 1fr);
    padding: 8px 9px;
  }

  .standard-rotation-family-card #queue-logic-settings .priority-item-title {
    font-size: 12.5px;
  }

  .standard-rotation-family-card #queue-logic-settings .priority-item-desc {
    font-size: 10.5px;
  }

  .standard-rotation-family-card #queue-logic-settings .priority-drag-handle {
    width: 24px;
    height: 24px;
  }

  .winner-stays-submode-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .winner-stays-submode-grid .rotation-mode-card {
    min-height: 0;
    padding: 11px 12px;
  }

  .winner-stays-rules {
    margin-top: 12px;
    padding: 12px;
    row-gap: 10px;
  }

  .rotation-rules-heading {
    padding-bottom: 8px;
  }

  .winner-stays-projection {
    min-height: 0;
    padding: 10px 12px;
  }

  .rotation-mode-nested-panel {
    padding: 12px;
  }

  .rotation-mode-nested-heading {
    align-items: center;
  }

}

html[data-theme="dark"] #settings-panel-players .settings-panel-head,
html[data-theme="dark"] #settings-panel-queue-settings .settings-panel-head,
html[data-theme="dark"] #settings-panel-system .settings-panel-head,
html[data-theme="dark"] #settings-panel-scheduled-sessions .settings-panel-head,
html[data-theme="dark"] #settings-panel-account .settings-panel-head,
html[data-theme="dark"] #settings-panel-expense-settings .settings-panel-head,
html[data-theme="dark"] #settings-panel-access .settings-panel-head {
  border-color: rgba(148, 163, 184, .14);
  background: linear-gradient(135deg, rgba(45, 212, 191, .10), rgba(139, 92, 246, .09));
}

/* Temporary Viewer is intentionally limited to Queue + current-round Stats. */
body.role-provisional-viewer-mode #page-settings,
body.role-provisional-viewer-mode #header-settings-btn,
body.role-provisional-viewer-mode .desktop-account-member-only,
body.role-provisional-viewer-mode .viewer-no-session-settings-action,
body.role-provisional-viewer-mode #settings-tab-account,
body.role-provisional-viewer-mode #settings-panel-account,
body.role-provisional-viewer-mode .stats-history-entry-btn,
body.role-provisional-viewer-mode #stats-tab-alltime,
body.role-provisional-viewer-mode #stats-panel-alltime,
body.role-provisional-viewer-mode #alltime-session-picker-modal,
body.role-provisional-viewer-mode #player-dashboard-modal {
  display: none !important;
}

/* =========================================================
   QBAD Pro v47 — All-time stats export wizard
   Scope: cumulative statistics export only
========================================================= */

.alltime-export-open-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  white-space: nowrap;
}

.alltime-export-open-btn .material-symbols-outlined {
  font-size: 17px;
}

.alltime-export-wizard-sheet {
  width: min(920px, calc(100vw - 28px));
  max-width: 920px;
  max-height: min(900px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.alltime-export-wizard-body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 24px;
}

.alltime-export-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 24px 16px;
  border-bottom: 1px solid var(--border);
}

.alltime-export-step {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.alltime-export-step span {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg3);
  font-size: 12px;
}

.alltime-export-step.active,
.alltime-export-step.complete {
  color: var(--accent);
}

.alltime-export-step.active span,
.alltime-export-step.complete span {
  border-color: rgba(17, 184, 154, .45);
  background: rgba(17, 184, 154, .12);
  color: var(--accent);
}

.alltime-export-section-intro h3 {
  margin: 0;
  font-size: 18px;
}

.alltime-export-section-intro p {
  margin: 5px 0 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.alltime-export-range-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.alltime-export-range-section .alltime-export-section-intro p {
  margin-bottom: 10px;
}

.alltime-export-range-filter {
  max-width: 560px;
}

.alltime-export-session-range-panel {
  max-width: 560px;
  margin-top: 10px;
}

.alltime-export-session-range-panel .alltime-session-range-card-value {
  font-size: 13px;
}

.alltime-export-field-label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.alltime-export-select,
.alltime-export-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--text);
  background: var(--bg3);
  font: inherit;
  font-size: 13px;
}

.alltime-export-select:focus-visible,
.alltime-export-input:focus-visible,
.alltime-export-column-option:has(input:focus-visible),
.alltime-export-preset-card:focus-visible {
  outline: 3px solid rgba(34, 211, 238, .32);
  outline-offset: 2px;
}

.alltime-export-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.alltime-export-preset-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: var(--bg3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.alltime-export-preset-card:hover,
.alltime-export-preset-card.selected {
  border-color: rgba(17, 184, 154, .48);
  background: rgba(17, 184, 154, .09);
  transform: translateY(-1px);
}

.alltime-export-preset-card strong {
  font-size: 13px;
}

.alltime-export-preset-card span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.alltime-export-save-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed rgba(17, 184, 154, .35);
  border-radius: 14px;
  background: rgba(17, 184, 154, .04);
}

.alltime-export-save-box>div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.alltime-export-save-box strong {
  font-size: 13px;
}

.alltime-export-save-box span {
  color: var(--muted);
  font-size: 11px;
}

.alltime-export-save-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(340px, 48%);
}

.alltime-export-save-row input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 10px;
  color: var(--text);
  background: var(--bg3);
  font: inherit;
  font-size: 12px;
}

.alltime-export-save-box .text-btn {
  align-self: flex-end;
}

.alltime-export-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.alltime-export-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 18px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.alltime-export-toggle-row label,
.alltime-export-column-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.alltime-export-columns-fieldset {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.alltime-export-columns-fieldset legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.alltime-export-column-option {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--bg3);
  font-size: 12px;
}

.alltime-export-column-option.required {
  opacity: .72;
}

.alltime-export-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}

.alltime-export-wizard-status {
  min-width: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.alltime-export-wizard-actions,
.alltime-export-preview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.alltime-export-preview-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.alltime-export-preview-meta strong {
  color: var(--text);
}

.alltime-export-preview-surface {
  --export-preview-columns: 1;
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f7fafc;
  color: #1e2a36;
}

.alltime-export-preview-surface.dark {
  background: #101923;
  color: #f4f7fb;
}

.alltime-export-preview-title {
  font-size: 18px;
  font-weight: 900;
}

.alltime-export-preview-subtitle {
  margin-top: 3px;
  color: #657487;
  font-size: 11px;
}

.alltime-export-preview-surface.dark .alltime-export-preview-subtitle {
  color: #aebdd0;
}

.alltime-export-preview-tables {
  display: grid;
  grid-template-columns: repeat(var(--export-preview-columns), minmax(0, 1fr));
  gap: 10px;
  margin-top: 13px;
  min-width: 640px;
}

.alltime-export-preview-table {
  overflow: hidden;
  border: 1px solid #d9e3ee;
  border-radius: 10px;
  background: #fff;
}

.alltime-export-preview-surface.dark .alltime-export-preview-table {
  border-color: #38506b;
  background: #172536;
}

.alltime-export-preview-row {
  display: grid;
  grid-template-columns: 44px minmax(110px, 1.7fr) repeat(7, minmax(42px, .75fr));
  gap: 4px;
  align-items: center;
  min-height: 31px;
  padding: 0 7px;
  border-bottom: 1px solid #e7edf3;
  font-size: 10px;
}

.alltime-export-preview-surface.dark .alltime-export-preview-row {
  border-color: #2b4056;
}

.alltime-export-preview-row:last-child {
  border-bottom: 0;
}

.alltime-export-preview-row:nth-child(odd):not(.alltime-export-preview-head) {
  background: #f3f7fa;
}

.alltime-export-preview-surface.dark .alltime-export-preview-row:nth-child(odd):not(.alltime-export-preview-head) {
  background: #1c2e42;
}

.alltime-export-preview-head {
  min-height: 34px;
  color: #657487;
  font-weight: 800;
  background: #eef3f7;
}

.alltime-export-preview-surface.dark .alltime-export-preview-head {
  color: #aebdd0;
  background: #1d3045;
}

.alltime-export-preview-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alltime-export-preview-row span.accent {
  color: #0f9f87;
  font-weight: 800;
}

.alltime-export-preview-surface.dark .alltime-export-preview-row span.accent {
  color: #42e0c4;
}

.alltime-export-preview-empty {
  padding: 18px;
  color: #657487;
  font-size: 11px;
  text-align: center;
}

.alltime-export-preview-actions {
  margin-top: 12px;
}

.alltime-export-save-inline {
  margin-top: 12px;
  text-align: right;
}

@media (max-width: 899px), (orientation: portrait) {
  #alltime-export-wizard-modal {
    z-index: 1450 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  #alltime-export-wizard-modal .alltime-export-wizard-sheet {
    width: min(100%, 600px) !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 auto !important;
  }

  #alltime-export-wizard-modal .modal-header {
    flex: 0 0 auto !important;
    padding: 12px 14px 10px;
  }

  #alltime-export-wizard-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px 14px 20px;
  }

  #alltime-export-wizard-modal .alltime-export-stepper {
    padding: 0 14px 12px;
  }

  #alltime-export-wizard-modal .alltime-export-step {
    gap: 5px;
    font-size: 10px;
  }

  #alltime-export-wizard-modal .alltime-export-step label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .alltime-export-preset-grid,
  .alltime-export-form-grid,
  .alltime-export-columns-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alltime-export-save-box {
    align-items: stretch;
    flex-direction: column;
  }

  .alltime-export-save-row {
    min-width: 0;
  }

  .alltime-export-wizard-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }

  .alltime-export-wizard-status {
    min-height: 18px;
  }

  .alltime-export-wizard-actions {
    width: 100%;
  }

  .alltime-export-wizard-actions .btn {
    flex: 1;
  }
}

@media (max-width: 420px) {
  .alltime-export-preset-grid,
  .alltime-export-form-grid,
  .alltime-export-columns-grid {
    grid-template-columns: 1fr;
  }

  .alltime-export-preview-surface {
    padding: 12px;
  }
}

/* =========================================================
   QBAD Pro v50 — Keep all-time export as a quiet header action
   Scope: cumulative statistics card only
========================================================= */

#stats-panel-alltime .alltime-card-head {
  gap: 8px;
  margin-bottom: 16px;
}

#stats-panel-alltime .alltime-card-head > :first-child {
  min-width: 0;
  flex: 1 1 auto;
}

#stats-panel-alltime .alltime-card-head-actions {
  width: auto;
  margin-top: 0;
  margin-left: auto;
  flex: 0 0 auto;
}

#stats-panel-alltime .alltime-export-open-btn {
  min-height: 40px;
  padding: 6px 9px;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 12px;
  font-weight: 700;
}

#stats-panel-alltime .alltime-export-open-btn:hover,
#stats-panel-alltime .alltime-export-open-btn:focus-visible {
  border-color: rgba(17, 184, 154, .34) !important;
  background: var(--bg3) !important;
  color: var(--text) !important;
}

@media (max-width: 620px) {
  #stats-panel-alltime .alltime-card-head {
    flex-wrap: nowrap;
  }

  #stats-panel-alltime .alltime-card-head-actions {
    width: auto;
  }
}

/* Keep Temporary Viewer focused on the blocking state while preserving the normal chrome. */
body.viewer-no-session-open .page,
body.viewer-no-session-open .main-bottom-nav,
body.viewer-no-session-open .provisional-access-banner {
  display: none !important;
}

body.viewer-no-session-open .topbar {
  position: relative;
  z-index: 1600 !important;
  display: grid !important;
}

body.viewer-no-session-open #topbar-logout-btn {
  display: inline-flex !important;
  pointer-events: auto;
}

/* On Desktop keep only the account control in the lower-left sidebar. */
body.viewer-no-session-open .desktop-sidebar {
  z-index: auto !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.viewer-no-session-open .desktop-sidebar .desktop-brand,
body.viewer-no-session-open .desktop-sidebar .desktop-nav-scroll {
  display: none !important;
}

body.viewer-no-session-open .desktop-sidebar .desktop-account-menu {
  display: block !important;
  margin-top: auto !important;
  position: relative !important;
  z-index: 1600 !important;
}

body.viewer-no-session-open .desktop-sidebar .desktop-user-card {
  position: relative !important;
  z-index: 1601 !important;
  pointer-events: auto !important;
}

body.viewer-no-session-open .desktop-account-menu .desktop-room-share-btn,
body.viewer-no-session-open .desktop-account-menu .desktop-account-member-only,
body.viewer-no-session-open .desktop-account-menu .desktop-account-demo-settings-action {
  display: none !important;
}

body.viewer-no-session-open .desktop-account-menu .desktop-account-theme-action {
  display: flex !important;
}

/* Guest login lives in the separate CTA while the no-session gate is open. */
body.viewer-no-session-open .desktop-account-menu .desktop-account-logout-action {
  display: none !important;
}

body.viewer-no-session-open:not(.guest-mode) .desktop-account-menu .desktop-account-logout-action {
  display: flex !important;
}

body.viewer-no-session-open .viewer-no-session-account-host {
  position: fixed !important;
  left: max(16px, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  width: min(280px, calc(100vw - 32px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  background: var(--card) !important;
  box-shadow: 0 18px 40px rgba(31, 41, 55, .18) !important;
  z-index: 1601 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body.viewer-no-session-open .viewer-no-session-account-host > * {
  pointer-events: auto !important;
}

body.viewer-no-session-open .viewer-no-session-account-menu {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  display: block !important;
  z-index: 1601 !important;
}

body.viewer-no-session-open .viewer-no-session-account-menu .desktop-user-card {
  width: 100% !important;
  margin: 0 !important;
  background: color-mix(in srgb, var(--bg3) 72%, var(--card)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  color: var(--text) !important;
  pointer-events: auto !important;
}

body.viewer-no-session-open .viewer-no-session-account-menu .desktop-account-popover {
  z-index: 1602 !important;
}

body.viewer-no-session-open .desktop-guest-login-cta.viewer-no-session-guest-login {
  display: flex !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
  border-radius: 16px !important;
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  opacity: 1 !important;
  filter: none !important;
}

body.viewer-no-session-open .desktop-guest-login-cta.viewer-no-session-guest-login > .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 22px;
}

body.viewer-no-session-open .desktop-guest-login-cta.viewer-no-session-guest-login > span:last-child,
body.viewer-no-session-open .desktop-guest-login-cta.viewer-no-session-guest-login strong,
body.viewer-no-session-open .desktop-guest-login-cta.viewer-no-session-guest-login small {
  display: block;
  min-width: 0;
}

body.viewer-no-session-open .desktop-guest-login-cta.viewer-no-session-guest-login strong {
  font-size: 13px;
  line-height: 1.15;
}

body.viewer-no-session-open .desktop-guest-login-cta.viewer-no-session-guest-login small {
  margin-top: 3px;
  color: rgba(255, 255, 255, .78);
  font-size: 10px;
  line-height: 1.2;
}

@media (max-width: 899px) {
  body.viewer-no-session-open .desktop-sidebar {
    display: none !important;
  }

  body.viewer-no-session-open .viewer-no-session-account-host {
    display: none !important;
  }
}

@media (min-width: 900px) and (min-height: 560px),
(min-width: 768px) and (orientation: landscape) and (min-height: 560px) {
  /* Desktop keeps the normal sidebar backdrop; only the account control stays interactive. */
body.viewer-no-session-open .topbar {
    display: none !important;
  }
}

/* =========================================================
   QBAD Pro v49 — Export wizard spacing and divider polish
   Scope: all-time statistics export flow
========================================================= */

.alltime-card-head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.alltime-export-open-btn {
  width: auto !important;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 12px;
  border-color: rgba(17, 184, 154, .24) !important;
  background: rgba(17, 184, 154, .06) !important;
  color: var(--accent) !important;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
}

.alltime-export-open-btn:hover,
.alltime-export-open-btn:focus-visible {
  border-color: rgba(17, 184, 154, .52) !important;
  background: rgba(17, 184, 154, .12) !important;
  color: var(--accent) !important;
}

.alltime-export-open-btn .material-symbols-outlined {
  font-size: 18px;
}

.alltime-card-actions {
  min-height: 38px;
}

.alltime-export-preset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.alltime-export-preset-card {
  position: relative;
  min-height: 142px;
  gap: 6px;
  padding: 16px;
  border-radius: 16px;
  border-color: rgba(125, 132, 145, .18);
  background: var(--bg3);
  box-shadow: 0 5px 14px rgba(15, 23, 42, .03);
}

.alltime-export-preset-card:hover,
.alltime-export-preset-card.selected {
  border-color: rgba(17, 184, 154, .5);
  background: rgba(17, 184, 154, .07);
  box-shadow: 0 8px 18px rgba(17, 184, 154, .09);
  transform: none;
}

.alltime-export-preset-card:active {
  transform: scale(.985);
}

.alltime-export-preset-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: rgba(17, 184, 154, .11);
  color: var(--accent);
  font-size: 20px;
}

.alltime-export-preset-card strong {
  font-size: 14px;
}

.alltime-export-preset-card span:not(.material-symbols-outlined) {
  max-width: 28ch;
  font-size: 11.5px;
}

.alltime-export-preset-check {
  position: absolute;
  top: 14px;
  right: 14px;
  display: none;
  color: var(--accent);
  font-size: 18px;
}

.alltime-export-preset-card.selected .alltime-export-preset-check {
  display: block;
}

.alltime-export-autosave-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(17, 184, 154, .18);
  border-radius: 12px;
  background: rgba(17, 184, 154, .045);
  color: var(--accent);
}

.alltime-export-autosave-note > .material-symbols-outlined {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 18px;
}

.alltime-export-autosave-note span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.alltime-export-autosave-note strong {
  font-size: 12px;
}

.alltime-export-autosave-note small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.alltime-export-toggle-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
}

.alltime-export-toggle-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid rgba(125, 132, 145, .16);
  border-radius: 13px;
  background: rgba(125, 132, 145, .045);
  color: var(--text);
}

.alltime-export-toggle-row > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.alltime-export-toggle-row strong {
  font-size: 12px;
}

.alltime-export-toggle-row small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.alltime-export-toggle-row .qbad-toggle-switch input:focus-visible + .qbad-toggle-slider {
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .25);
}

.alltime-export-check-option {
  position: relative;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(125, 132, 145, .16);
  border-radius: 12px;
  background: rgba(125, 132, 145, .045);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.alltime-export-check-option:hover,
.alltime-export-check-option:has(input:checked) {
  border-color: rgba(17, 184, 154, .42);
  background: rgba(17, 184, 154, .07);
}

.alltime-export-check-option:focus-within {
  outline: 3px solid rgba(34, 211, 238, .25);
  outline-offset: 2px;
}

.alltime-export-check-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.alltime-export-checkmark {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(125, 132, 145, .48);
  border-radius: 6px;
  color: transparent;
  background: var(--card-bg);
  font-size: 15px;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.alltime-export-check-option:has(input:checked) .alltime-export-checkmark {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.alltime-export-check-option.required {
  cursor: default;
  opacity: .8;
}

.alltime-export-check-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.alltime-export-check-copy strong {
  font-size: 12px;
}

.alltime-export-check-copy small {
  color: var(--muted);
  font-size: 10px;
}

.alltime-export-preview-surface {
  overflow: auto;
  padding: 12px;
  border-radius: 16px;
  background: #eaf0f5;
}

.alltime-export-preview-surface.dark {
  background: #0d1722;
}

.alltime-export-preview-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .14);
}

.alltime-export-preview-actions {
  justify-content: flex-start;
  margin-top: 12px;
}

.alltime-export-preview-actions .btn {
  width: auto;
  min-height: 42px;
}

.alltime-export-wizard-actions {
  margin-left: auto;
}

.alltime-export-wizard-actions .btn {
  width: auto;
  min-width: 108px;
  min-height: 42px;
}

@media (max-width: 620px) {
  .alltime-card-head-actions {
    width: 100%;
    margin-top: -3px;
    justify-content: flex-end;
  }

  .alltime-export-open-btn {
    min-height: 38px;
  }

  .alltime-export-preset-grid {
    grid-template-columns: 1fr;
  }

  .alltime-export-range-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }

  .alltime-export-range-filter {
    gap: 4px;
    padding: 4px;
  }

  .alltime-export-range-filter .alltime-range-btn {
    height: 36px;
    font-size: 11px;
  }

  .alltime-export-preset-card {
    min-height: 96px;
  }

  .alltime-export-preset-icon {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .alltime-export-wizard-actions .btn {
    flex: 1;
    min-width: 0;
  }
}

/* Keep the wizard header and progress band on one clear spacing rhythm. */
#alltime-export-wizard-modal .modal-header {
  padding: 20px 24px 10px;
  border-bottom: 0;
}

#alltime-export-wizard-modal .modal-title {
  line-height: 1.25;
}

#alltime-export-wizard-modal .modal-subtitle {
  margin-top: 4px;
  line-height: 1.45;
}

#alltime-export-wizard-modal .alltime-export-stepper {
  position: relative;
  gap: 12px;
  padding: 10px 24px 15px;
  border-bottom: 0;
}

#alltime-export-wizard-modal .alltime-export-stepper::after {
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 1px;
  background: rgba(125, 132, 145, .18);
  content: '';
  pointer-events: none;
}

#alltime-export-wizard-modal .alltime-export-step {
  gap: 8px;
  line-height: 1.3;
}

#alltime-export-wizard-modal .alltime-export-step span {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

@media (max-width: 899px) {
  #alltime-export-wizard-modal .modal-header {
    padding: 14px 14px 8px !important;
    border-bottom: 0 !important;
  }

  #alltime-export-wizard-modal .alltime-export-stepper {
    gap: 6px;
    padding: 10px 14px 13px;
  }

  #alltime-export-wizard-modal .alltime-export-stepper::after {
    right: 14px;
    left: 14px;
  }

  #alltime-export-wizard-modal .alltime-export-step {
    gap: 5px;
    line-height: 1.3;
  }
}

@media (max-width: 420px) {
  #alltime-export-wizard-modal .modal-header {
    padding: 15px 15px 8px !important;
  }

  #alltime-export-wizard-modal .alltime-export-stepper {
    padding-right: 15px;
    padding-left: 15px;
  }

  #alltime-export-wizard-modal .alltime-export-stepper::after {
    right: 15px;
    left: 15px;
  }
}

/* =========================================================
   QBAD — Queue preview wizard
   Scope: simulated queue plan export only
========================================================= */

.queue-preview-setting-card {
  margin-top: 12px;
}

.queue-preview-setting-card .personal-queue-alert-toggle-row {
  padding-top: 14px;
  border-bottom: 0;
}

.queue-preview-wizard-sheet {
  width: min(920px, calc(100vw - 28px));
}

.queue-preview-disclaimer {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 12px;
  background: rgba(245, 158, 11, .08);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.queue-preview-meta {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.queue-preview-empty {
  padding: 18px 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.queue-preview-table-wrap {
  overflow: auto;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.queue-preview-round-list {
  display: grid;
  gap: 12px;
}

.queue-preview-round-block {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
}

.queue-preview-round-title {
  margin: 0;
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-family: Sarabun, sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.queue-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Sarabun, sans-serif;
  font-size: 13px;
}

.queue-preview-table td:last-child {
  min-width: 280px;
}

.queue-preview-table thead th {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}

.queue-preview-table th,
.queue-preview-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.queue-preview-table tbody tr:last-child th,
.queue-preview-table tbody tr:last-child td {
  border-bottom: 0;
}

.queue-preview-table th {
  width: 72px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.queue-preview-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 280px;
}

.queue-preview-team {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: Sarabun, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.queue-preview-team-a {
  border: 1px solid color-mix(in srgb, var(--teamA) 34%, var(--border));
  background: color-mix(in srgb, var(--teamA) 10%, var(--card));
  color: var(--teamA);
}

.queue-preview-team-b {
  border: 1px solid color-mix(in srgb, var(--teamB) 34%, var(--border));
  background: color-mix(in srgb, var(--teamB) 10%, var(--card));
  color: var(--teamB);
}

.queue-preview-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 28px;
  color: var(--muted);
  font-family: Sarabun, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

#queue-preview-wizard-modal .alltime-export-wizard-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--card);
  border-top: 1px solid var(--border);
}

#queue-preview-wizard-modal .alltime-export-wizard-actions .material-symbols-outlined {
  font-size: 17px;
}

#queue-preview-wizard-modal .alltime-export-stepper {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#queue-preview-wizard-modal .modal-header {
  padding: 20px 24px 10px;
  border-bottom: 0;
}

#queue-preview-wizard-modal .alltime-export-stepper {
  position: relative;
  gap: 12px;
  padding: 10px 24px 15px;
  border-bottom: 0;
}

#queue-preview-wizard-modal .alltime-export-stepper::after {
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 1px;
  background: rgba(125, 132, 145, .18);
  content: '';
  pointer-events: none;
}

@media (max-width: 899px) {
  #queue-preview-wizard-modal .modal-header {
    padding: 14px 14px 8px !important;
  }

  #queue-preview-wizard-modal .alltime-export-stepper {
    gap: 6px;
    padding: 10px 14px 13px;
  }

  #queue-preview-wizard-modal .alltime-export-stepper::after {
    right: 14px;
    left: 14px;
  }
}

#queue-preview-wizard-modal {
  z-index: 1450 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding:
    calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) !important;
}

#queue-preview-wizard-modal .queue-preview-wizard-sheet {
  position: relative !important;
  z-index: 1460 !important;
  width: min(920px, calc(100vw - 28px)) !important;
  max-height:
    calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#queue-preview-wizard-modal .modal-header,
#queue-preview-wizard-modal .alltime-export-stepper,
#queue-preview-wizard-modal .alltime-export-wizard-footer {
  flex: 0 0 auto !important;
}

#queue-preview-wizard-modal .alltime-export-wizard-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

body:has(#queue-preview-wizard-modal:not(.hidden)) .topbar,
body:has(#queue-preview-wizard-modal:not(.hidden)) .bottom-nav {
  z-index: 300 !important;
  pointer-events: none !important;
}

@media (max-width: 899px), (orientation: portrait) {
  #queue-preview-wizard-modal {
    padding:
      calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  #queue-preview-wizard-modal .queue-preview-wizard-sheet {
    width: min(100%, 600px) !important;
    max-height:
      calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  #queue-preview-wizard-modal .alltime-export-wizard-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }

  #queue-preview-wizard-modal .alltime-export-wizard-actions {
    width: 100%;
  }

  #queue-preview-wizard-modal .alltime-export-wizard-actions .btn {
    flex: 1;
  }
}

@supports not (height: 100dvh) {
  #queue-preview-wizard-modal .queue-preview-wizard-sheet {
    max-height:
      calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

/* Prepared next-game queue */
.prepared-queue-panel {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  box-shadow: 0 12px 30px rgba(23, 37, 61, 0.05);
}

.prepared-queue-panel-head,
.prepared-queue-card-head,
.prepared-queue-panel-actions,
.prepared-queue-card-actions {
  display: flex;
  align-items: center;
}

.prepared-queue-panel-head,
.prepared-queue-card-head {
  justify-content: space-between;
  gap: 12px;
}

.prepared-queue-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.prepared-queue-panel-title > .material-symbols-outlined {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.prepared-queue-panel-title > div,
.prepared-queue-card-head > div,
.prepared-queue-player-copy,
.prepared-queue-choice-card > span:nth-child(2) {
  min-width: 0;
}

.prepared-queue-panel-title strong,
.prepared-queue-panel-title small,
.prepared-queue-card-head strong,
.prepared-queue-player-copy strong,
.prepared-queue-player-copy small,
.prepared-queue-choice-card strong,
.prepared-queue-choice-card small {
  display: block;
}

.prepared-queue-panel-title strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.prepared-queue-panel-title small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.prepared-queue-panel-actions,
.prepared-queue-card-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.prepared-queue-panel-actions .btn,
.prepared-queue-card-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.prepared-queue-panel-actions .material-symbols-outlined,
.prepared-queue-card-actions .material-symbols-outlined {
  font-size: 18px;
}

.prepared-queue-count {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.prepared-queue-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.prepared-queue-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 80%, transparent);
}

.prepared-queue-empty > .material-symbols-outlined {
  color: var(--accent);
}

.prepared-queue-empty strong,
.prepared-queue-empty small {
  display: block;
}

.prepared-queue-empty strong {
  color: var(--text);
  font-size: 13px;
}

.prepared-queue-empty small {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
}

.prepared-queue-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.prepared-queue-card.has-target-court {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}

.prepared-queue-card.is-waiting-for-player {
  border-color: color-mix(in srgb, #f59e0b 48%, var(--border));
  background: color-mix(in srgb, #f59e0b 5%, var(--card));
}

.prepared-queue-card.needs-attention {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border));
  background: color-mix(in srgb, var(--danger) 4%, var(--card));
}

.prepared-queue-card.is-waiting-for-player .prepared-queue-order {
  color: #b66a00;
}

.prepared-queue-card.needs-attention .prepared-queue-order,
.prepared-queue-card.needs-attention .prepared-queue-card-head strong {
  color: var(--danger);
}

.prepared-queue-order {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.prepared-queue-card-head strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prepared-queue-team-players {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.prepared-team-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding: 8px 34px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  line-height: 1.25;
}

.prepared-team-chip.team-a { color: #235ac7; border-color: #b9d0ff; background: #edf3ff; }
.prepared-team-chip.team-b { color: #c53c5d; border-color: #ffc2cf; background: #fff0f3; }
.prepared-team-player-name {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prepared-queue-player-level-badge {
  position: absolute;
  top: 4px;
  inset-inline-end: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 17px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 82%, currentColor 18%);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}
.prepared-queue-player-level-badge-a {
  color: var(--teamA) !important;
  background: rgba(79, 127, 223, .10) !important;
  border-color: rgba(79, 127, 223, .34) !important;
}
.prepared-queue-player-level-badge-b {
  color: var(--teamB) !important;
  background: rgba(224, 82, 117, .10) !important;
  border-color: rgba(224, 82, 117, .34) !important;
}
.prepared-queue-edit-btn {
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.prepared-queue-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  background: var(--bg3);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.prepared-queue-action-btn .material-symbols-outlined {
  font-size: 19px;
}

.prepared-queue-action-btn.prepared-queue-edit-btn {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.prepared-queue-action-btn.prepared-queue-court-btn {
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
}

.prepared-queue-action-btn:hover,
.prepared-queue-action-btn:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--accent) 13%, var(--card));
  outline: none;
}

.prepared-queue-action-btn:active {
  transform: scale(.94);
}

.prepared-queue-edit-sheet { width: min(94vw, 620px); }
.prepared-queue-edit-warning {
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: 12px;
  color: #a16207;
  background: rgba(245, 158, 11, .08);
  font-size: 12px;
  font-weight: 800;
}
.prepared-queue-edit-warning.is-valid { color: #087f6b; border-color: rgba(17, 184, 154, .25); background: rgba(17, 184, 154, .08); }
.prepared-queue-edit-selected, .prepared-queue-edit-candidates { display: grid; gap: 8px; }
.prepared-queue-edit-selected-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg3);
}
.prepared-queue-edit-selected-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prepared-queue-edit-selected-row select { min-height: 32px; }
.prepared-queue-edit-divider { margin: 16px 0 8px; color: var(--muted); font-size: 11px; font-weight: 850; }
.prepared-queue-edit-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: var(--card);
  text-align: left;
  cursor: pointer;
}
.prepared-queue-edit-candidate.selected { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.prepared-queue-edit-candidate small { color: var(--muted); font-size: 10px; }
.prepared-queue-edit-empty { padding: 12px; color: var(--muted); font-size: 12px; text-align: center; }

.prepared-queue-edit-guidance {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.prepared-queue-edit-guidance .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 18px;
}

.prepared-queue-edit-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}

.prepared-queue-edit-team {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg3);
}

.prepared-queue-edit-team-a {
  border-color: color-mix(in srgb, #75a5ff 40%, var(--border));
  background: color-mix(in srgb, #edf3ff 65%, var(--card));
}

.prepared-queue-edit-team-b {
  border-color: color-mix(in srgb, #ff91aa 42%, var(--border));
  background: color-mix(in srgb, #fff0f3 65%, var(--card));
}

.prepared-queue-edit-team-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.prepared-queue-edit-team-header > .prepared-team-chip {
  grid-column: 2;
  justify-self: center;
  width: auto;
  min-height: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
}

.prepared-queue-edit-team-count {
  grid-column: 3;
  justify-self: end;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.prepared-queue-edit-team-slots {
  display: grid;
  gap: 7px;
}

.prepared-queue-edit-vs {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
}

.prepared-edit-player-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 46px;
  padding: 9px 36px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  cursor: grab;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease;
}

.prepared-edit-player-chip.team-chip-a {
  color: #235ac7;
  border-color: #b9d0ff;
  background: #edf3ff;
}

.prepared-edit-player-chip.team-chip-b {
  color: #c53c5d;
  border-color: #ffc2cf;
  background: #fff0f3;
}

.prepared-edit-player-chip.is-empty {
  color: var(--muted);
  border-style: dashed;
  background: color-mix(in srgb, var(--card) 80%, var(--bg3));
  cursor: pointer;
}

.prepared-edit-player-chip:hover,
.prepared-edit-player-chip:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.prepared-edit-player-chip.is-drag-source {
  opacity: .42;
  cursor: grabbing;
  transform: scale(.98);
}

.prepared-edit-player-chip.is-drop-target {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translateY(-2px);
}

.prepared-edit-player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prepared-edit-player-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
}

.prepared-team-player-name,
.prepared-edit-player-name {
  text-align: center;
}

/* Keep the cloned prepared-edit chip in the viewport while dragging. The
   generic chip rule appears later in the stylesheet and otherwise changes the
   clone back to position: relative. */
.court-player-drag-ghost.is-prepared-edit-drag-ghost {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 10090 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transform-origin: center center;
  transition: none !important;
}

@media (max-width: 480px) {
  .prepared-queue-edit-card { gap: 5px; padding: 7px; }
  .prepared-queue-edit-team { padding: 8px; }
  .prepared-team-chip { min-height: 36px; padding: 7px 31px; font-size: 11px; }
  .prepared-edit-player-chip { min-height: 44px; padding: 8px 34px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .prepared-edit-player-chip { transition: none; }
}

.prepared-queue-cancel-btn {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: var(--card);
}

.prepared-queue-cancel-btn:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.prepared-queue-cancel-btn .material-symbols-outlined {
  font-size: 18px;
}

.prepared-queue-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
}

.prepared-queue-teams > div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--bg3);
}

.prepared-queue-teams > div > span,
.prepared-queue-teams strong {
  display: block;
}

.prepared-queue-teams > div > span {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.prepared-queue-teams strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prepared-queue-vs {
  align-self: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.prepared-queue-sheet,
.prepared-court-sheet {
  width: min(94vw, 560px);
  max-height: min(86dvh, 760px);
  overflow: hidden;
}

#prepared-queue-modal,
#prepared-queue-court-modal {
  z-index: 1450 !important;
  align-items: center !important;
  justify-content: center !important;
  padding:
    calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

#prepared-queue-edit-modal {
  z-index: 1450 !important;
  align-items: center !important;
  justify-content: center !important;
  padding:
    calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

#prepared-queue-modal .prepared-queue-sheet,
#prepared-queue-court-modal .prepared-court-sheet,
#prepared-queue-edit-modal .prepared-queue-edit-sheet {
  position: relative !important;
  z-index: 1460 !important;
  width: min(100%, 560px) !important;
  max-height:
    calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#prepared-queue-modal .modal-header,
#prepared-queue-modal .prepared-queue-modal-footer,
#prepared-queue-court-modal .modal-header,
#prepared-queue-edit-modal .modal-header,
#prepared-queue-edit-modal .modal-footer {
  flex: 0 0 auto !important;
}

#prepared-queue-edit-modal .modal-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(125, 132, 145, .12);
}

#prepared-queue-edit-modal .modal-footer .btn {
  width: 100%;
  min-width: 0;
  min-height: 40px;
}

body:has(#prepared-queue-modal:not(.hidden)) .topbar,
body:has(#prepared-queue-modal:not(.hidden)) .bottom-nav,
body:has(#prepared-queue-court-modal:not(.hidden)) .topbar,
body:has(#prepared-queue-court-modal:not(.hidden)) .bottom-nav,
body:has(#prepared-queue-edit-modal:not(.hidden)) .topbar,
body:has(#prepared-queue-edit-modal:not(.hidden)) .bottom-nav {
  z-index: 300 !important;
  pointer-events: none !important;
}

.prepared-queue-modal-body,
.prepared-court-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

.prepared-queue-choice-grid {
  display: grid;
  gap: 8px;
}

.prepared-queue-choice-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  background: var(--card);
  text-align: start;
}

.prepared-queue-choice-card:hover {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
}

.prepared-queue-choice-card > .material-symbols-outlined:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

.prepared-queue-choice-card strong {
  font-size: 14px;
}

.prepared-queue-choice-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.prepared-queue-choice-chevron {
  color: var(--muted);
}

.prepared-queue-picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.prepared-queue-picker-toolbar .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.prepared-queue-picker-toolbar strong {
  color: var(--accent);
  font-size: 12px;
}

.prepared-queue-player-list {
  display: grid;
  gap: 6px;
}

.prepared-queue-player-warning {
  margin-bottom: 9px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, #f59e0b 38%, var(--border));
  border-radius: 12px;
  color: color-mix(in srgb, #b66a00 82%, var(--text));
  background: color-mix(in srgb, #f59e0b 9%, var(--card));
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.prepared-queue-player-group {
  display: grid;
  gap: 6px;
}

.prepared-queue-player-group + .prepared-queue-player-group {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.prepared-queue-player-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-inline: 2px;
}

.prepared-queue-player-group-title strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.prepared-queue-player-group-title span {
  color: var(--muted);
  font-size: 10px;
}

.prepared-queue-player-option {
  display: grid;
  grid-template-columns: 26px 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: var(--card);
  text-align: start;
}

.prepared-queue-player-option.selected {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.prepared-queue-player-option.is-playing {
  border-color: color-mix(in srgb, #f59e0b 30%, var(--border));
}

.prepared-queue-player-check {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: white;
  font-size: 17px;
}

.prepared-queue-player-option.selected .prepared-queue-player-check {
  border-color: var(--accent);
  background: var(--accent);
}

.prepared-queue-player-avatar {
  width: 36px !important;
  height: 36px !important;
}

.prepared-queue-player-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prepared-queue-player-copy small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prepared-queue-player-side {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
}

.prepared-queue-player-wait-time {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.prepared-queue-player-playing-badge {
  max-width: 150px;
  overflow: hidden;
  padding: 4px 7px;
  border-radius: 999px;
  color: #9a5b00;
  background: color-mix(in srgb, #f59e0b 14%, var(--card));
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prepared-queue-autofill-confirm .expense-warning-desc {
  max-width: 420px;
  margin-bottom: 12px;
}

.prepared-queue-manual-mode-confirm .expense-warning-desc {
  max-width: 420px;
  margin-bottom: 12px;
}

.prepared-queue-manual-mode-confirm .expense-warning-checklist {
  margin-bottom: 0;
}

.prepared-queue-autofill-icon {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
}

.prepared-queue-autofill-suggestion {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  text-align: start;
}

.prepared-queue-autofill-suggestion span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.prepared-queue-autofill-suggestion strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.prepared-queue-autofill-list {
  display: grid;
  gap: 0;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.prepared-queue-autofill-player {
  display: grid;
  gap: 4px;
  padding: 9px 0;
}

.prepared-queue-autofill-player + .prepared-queue-autofill-player {
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
}

.prepared-queue-autofill-player-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.prepared-queue-autofill-player-head strong {
  min-width: 0;
}

.prepared-queue-autofill-player-head small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.prepared-queue-autofill-player p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 380px) {
  .prepared-queue-autofill-player-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

.prepared-queue-autofill-waiting {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 11px;
  color: color-mix(in srgb, #b66a00 82%, var(--text));
  background: color-mix(in srgb, #f59e0b 9%, var(--card));
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
  text-align: start;
}

.prepared-queue-autofill-waiting .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 17px;
}

html[data-theme="dark"] .access-subtab {
  border-color: rgba(148, 163, 184, .14);
  background: rgba(18, 26, 43, .95);
  box-shadow: none;
}

html[data-theme="dark"] .access-subtab.active {
  color: #06201c;
  border-color: #5eead4;
  background: #5eead4;
}

.prepared-queue-modal-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

.prepared-court-auto-option,
.prepared-court-option {
  display: grid;
  align-items: center;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: var(--card);
  text-align: start;
}

.prepared-court-auto-option {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
}

.prepared-court-auto-option > .material-symbols-outlined {
  color: var(--accent);
}

.prepared-court-auto-option strong,
.prepared-court-auto-option small {
  display: block;
}

.prepared-court-auto-option strong {
  font-size: 13px;
}

.prepared-court-auto-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.prepared-court-list {
  display: grid;
  gap: 8px;
}

.prepared-court-option {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 9px;
  padding: 12px;
}

.prepared-court-option.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.prepared-court-option:disabled {
  opacity: 0.48;
}

.prepared-court-number {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.prepared-court-status {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prepared-court-recommended {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 640px) {
  #prepared-queue-modal,
  #prepared-queue-court-modal {
    padding:
      calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .prepared-queue-panel {
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 17px;
  }

  .prepared-queue-panel-head {
    align-items: flex-start;
  }

  .prepared-queue-panel-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .prepared-queue-panel-title small {
    max-width: 200px;
  }

  .prepared-queue-count {
    order: 2;
  }

  .prepared-queue-card-head {
    align-items: flex-start;
  }

  .prepared-queue-card-actions .btn span:not(.material-symbols-outlined) {
    display: none;
  }

  .prepared-queue-card-actions .btn {
    width: 34px;
    height: 34px;
    padding: 0;
  }

  .prepared-queue-teams {
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
    gap: 4px;
  }

  .prepared-queue-teams > div {
    padding: 8px;
  }

  .prepared-queue-teams strong {
    white-space: normal;
  }

  .prepared-queue-sheet,
  .prepared-court-sheet {
    width: 100%;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .prepared-queue-player-option {
    grid-template-columns: 24px 32px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 50px;
    padding: 7px 8px;
  }

  .prepared-queue-player-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .prepared-queue-player-wait-time {
    padding-inline: 5px;
    font-size: 9.5px;
  }

  .prepared-court-option {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .prepared-court-recommended {
    grid-column: 2;
    justify-self: start;
  }
}

@supports not (height: 100dvh) {
  #prepared-queue-modal .prepared-queue-sheet,
  #prepared-queue-court-modal .prepared-court-sheet {
    max-height:
      calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

/* Player settings mobile fit
   Keep the player card inside the viewport and show every status filter without
   letting the filter row define a wider intrinsic layout. */
@media (max-width: 560px) {
  body.auth-ready #page-settings,
  body.auth-ready #page-settings .settings-content,
  body.auth-ready #settings-panel-players,
  body.auth-ready #settings-panel-players .player-settings-pane,
  body.auth-ready #settings-panel-players .player-settings-pane > .card,
  body.auth-ready #settings-panel-players #player-list,
  body.auth-ready #settings-panel-players .player-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.auth-ready #settings-panel-players,
  body.auth-ready #settings-panel-players .player-settings-pane,
  body.auth-ready #settings-panel-players .player-settings-pane > .card {
    overflow-x: clip;
  }

  body.auth-ready #settings-panel-players .player-status-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 7px;
    overflow: visible;
    padding: 2px 0 10px;
  }

  body.auth-ready #settings-panel-players .player-filter-chip {
    width: 100%;
    min-width: 0;
    padding: 6px 7px;
    gap: 5px;
    justify-content: center;
    white-space: nowrap;
  }

  body.auth-ready #settings-panel-players .player-filter-chip strong {
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
  }

  body.auth-ready #settings-panel-players .player-row {
    gap: 9px;
  }

  body.auth-ready #settings-panel-players .player-row > .player-info {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }

  body.auth-ready #settings-panel-players .player-row > .player-actions {
    flex: 0 0 90px;
    width: 90px;
    min-width: 0;
  }

  body.auth-ready #settings-panel-players .player-actions .status-select {
    width: 90px;
    min-width: 0;
    max-width: 100%;
    padding: 5px 6px 6px;
  }

  body.auth-ready #settings-panel-players .player-actions .status-select-shell {
    width: 90px;
    min-width: 90px;
    max-width: 100%;
  }
}

/* Guest entry, role-aware navigation, and Standard + manual court controls. */
.guest-login-btn {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.guest-login-btn .material-symbols-outlined {
  font-size: 19px;
}

.guest-login-btn.hidden,
.room-history-hidden {
  display: none !important;
}

body.guest-mode.viewer-no-session-open #topbar-logout-btn {
  display: none !important;
}

body.guest-mode.viewer-no-session-open #guest-login-btn {
  display: inline-flex !important;
  pointer-events: auto;
}

.manual-court-clear-btn .material-symbols-outlined {
  font-size: 18px;
}

.manual-court-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.manual-court-actions .btn {
  min-width: 0;
  min-height: 46px;
  white-space: normal;
  line-height: 1.25;
}

.smart-queue-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.smart-queue-action:not(:disabled) {
  background: linear-gradient(135deg, #18c5a8, #0ea889) !important;
  color: #fff !important;
  border: 1px solid rgba(17, 184, 154, .42) !important;
  box-shadow: 0 8px 18px rgba(14, 168, 137, .18);
}

.manual-court-actions .btn-start-game:disabled,
#court-scoreboard-modal .court-scoreboard-save-btn:disabled {
  background: var(--bg3) !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}

.smart-queue-action .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 500;
}

@media (max-width: 899px) {
  body.guest-mode.auth-ready .main-bottom-nav {
    display: none !important;
  }

  body.guest-mode.auth-ready .page {
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }

  body.auth-ready .main-bottom-nav[data-visible-count="2"] {
    width: min(calc(100vw - 32px), 360px) !important;
    min-height: 68px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  body.auth-ready .main-bottom-nav[data-visible-count="2"] .nav-btn {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: transparent !important;
  }

  body.auth-ready .main-bottom-nav[data-visible-count="2"] .nav-btn.active {
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    color: var(--accent) !important;
  }

  body.auth-ready .main-bottom-nav[data-visible-count="2"] .nav-btn svg {
    width: 23px !important;
    height: 23px !important;
  }

  body.auth-ready .main-bottom-nav[data-visible-count="2"] .nav-btn span {
    position: static !important;
    transform: none !important;
    color: inherit !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 420px) {
  .guest-login-btn {
    width: 42px;
    padding-inline: 0;
  }

  .guest-login-btn > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* Member / Viewer mobile navigation fallback for one or two visible tabs.
   When all three tabs are visible, keep the original raised Queue layout. */
@media (max-width: 899px) {
  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .bottom-nav.main-bottom-nav[data-visible-count="1"],
  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .bottom-nav.main-bottom-nav[data-visible-count="2"] {
    width: min(calc(100vw - 24px), 430px) !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 76px !important;
    gap: 6px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--card) 94%, transparent) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .13) !important;
    backdrop-filter: blur(18px) !important;
    overflow: hidden !important;
  }

  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .bottom-nav.main-bottom-nav[data-visible-count="1"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .bottom-nav.main-bottom-nav[data-visible-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .bottom-nav.main-bottom-nav:not([data-visible-count="3"])::before,
  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .bottom-nav.main-bottom-nav:not([data-visible-count="3"])::after {
    content: none !important;
    display: none !important;
  }

  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .main-bottom-nav[data-visible-count]:not([data-visible-count="3"])
    :is(#nav-settings, #nav-queue, #nav-stats):not(.hidden) {
    position: relative !important;
    inset: auto !important;
    grid-column: auto !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 6px 4px !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #64748b !important;
    overflow: hidden !important;
    font-size: 11px !important;
    isolation: isolate;
  }

  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .main-bottom-nav[data-visible-count]:not([data-visible-count="3"])
    :is(#nav-settings, #nav-queue, #nav-stats)::before,
  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .main-bottom-nav[data-visible-count]:not([data-visible-count="3"])
    :is(#nav-settings, #nav-queue, #nav-stats)::after {
    content: none !important;
    display: none !important;
  }

  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .main-bottom-nav[data-visible-count]:not([data-visible-count="3"])
    :is(#nav-settings, #nav-queue, #nav-stats) svg {
    width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
    color: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    -webkit-text-fill-color: currentColor !important;
  }

  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .main-bottom-nav[data-visible-count]:not([data-visible-count="3"])
    :is(#nav-settings, #nav-queue, #nav-stats) span {
    display: block !important;
    position: static !important;
    width: auto !important;
    transform: none !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .main-bottom-nav[data-visible-count]:not([data-visible-count="3"])
    :is(#nav-settings, #nav-queue, #nav-stats).active {
    background: color-mix(in srgb, var(--accent) 13%, transparent) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .bottom-nav.main-bottom-nav[data-visible-count]:not([data-visible-count="3"]) {
    background: color-mix(in srgb, #111827 94%, transparent) !important;
    border-color: rgba(148, 163, 184, .18) !important;
  }

  html[data-theme="dark"] body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .main-bottom-nav[data-visible-count]:not([data-visible-count="3"])
    :is(#nav-settings, #nav-queue, #nav-stats) {
    color: #94a3b8 !important;
  }

  html[data-theme="dark"] body.auth-ready:is(.role-member-mode, .role-viewer-mode)
    .main-bottom-nav[data-visible-count]:not([data-visible-count="3"])
    :is(#nav-settings, #nav-queue, #nav-stats).active {
    background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
    color: #5eead4 !important;
  }
}

/* Two-tab mobile navigation: keep both destinations on the same baseline.
   Queue stays on the left and receives stronger hierarchy without becoming a
   floating center action. This also hardens hidden role-based tabs against
   older nav rules that force buttons to display. */
@media (max-width: 899px) {
  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] {
    width: min(calc(100vw - 24px), 430px) !important;
    max-width: 430px !important;
    min-height: 76px !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"]::before,
  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"]::after,
  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] > .nav-btn::before,
  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] > .nav-btn::after {
    content: none !important;
    display: none !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] > .nav-btn.hidden {
    display: none !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] > .nav-btn:not(.hidden) {
    position: relative !important;
    inset: auto !important;
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border-radius: 17px !important;
    box-shadow: none !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] > #nav-queue:not(.hidden) {
    order: 1;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)) !important;
    background: color-mix(in srgb, var(--accent) 9%, var(--card)) !important;
    color: var(--accent) !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] > #nav-queue.active {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 25%, transparent) !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"]
    > :is(#nav-expense, #nav-settings, #nav-stats):not(.hidden) {
    order: 2;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #64748b !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"]
    > :is(#nav-expense, #nav-settings, #nav-stats).active {
    border-color: color-mix(in srgb, var(--accent) 16%, var(--border)) !important;
    background: color-mix(in srgb, var(--accent) 11%, transparent) !important;
    color: var(--accent) !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] > #nav-queue svg {
    width: 25px !important;
    height: 25px !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] > #nav-queue span {
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"]
    > :is(#nav-expense, #nav-settings, #nav-stats) svg {
    width: 22px !important;
    height: 22px !important;
  }

  html[data-theme="dark"] body.auth-ready
    .bottom-nav.main-bottom-nav[data-visible-count="2"] > #nav-queue:not(.hidden):not(.active) {
    border-color: color-mix(in srgb, var(--accent) 34%, #334155) !important;
    background: color-mix(in srgb, var(--accent) 13%, #111827) !important;
    color: #5eead4 !important;
  }

  html[data-theme="dark"] body.auth-ready
    .bottom-nav.main-bottom-nav[data-visible-count="2"]
    > :is(#nav-expense, #nav-settings, #nav-stats):not(.hidden) {
    color: #94a3b8 !important;
  }
}

/* Mobile two-tab footer: keep the compact check-in/queue shell from growing
   into a large white band, while reserving only the device's real safe area. */
@media (max-width: 899px) {
  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] {
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    min-height: 64px !important;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] > .nav-btn:not(.hidden) {
    height: 48px !important;
    min-height: 48px !important;
    padding: 4px 6px !important;
    gap: 3px !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"] > #nav-queue svg {
    width: 23px !important;
    height: 23px !important;
  }

  body.auth-ready .bottom-nav.main-bottom-nav[data-visible-count="2"]
    > :is(#nav-expense, #nav-settings, #nav-stats) svg {
    width: 21px !important;
    height: 21px !important;
  }

  body.auth-ready .page {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
}

/* Guest status belongs to the page chrome, not the brand. Keep it subtle and
   outside the primary interaction area so it reads as a watermark. */
.guest-view-watermark {
  display: none;
  position: fixed;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 70;
  max-width: calc(100vw - 32px);
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--rest) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  color: var(--rest);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .07em;
  opacity: .58;
  pointer-events: none;
  transform: translateX(-50%);
  user-select: none;
}

.guest-view-watermark .material-symbols-outlined {
  font-size: 11px;
  line-height: 1;
}

body.guest-mode.auth-ready .guest-view-watermark {
  display: inline-flex;
}

html.court-scoreboard-open .guest-view-watermark,
body.modal-open .guest-view-watermark {
  display: none !important;
}

.desktop-guest-login-cta {
  display: none;
}

@media (min-width: 900px) {
  body.guest-mode.auth-ready .desktop-guest-login-cta {
    width: calc(100% - 28px);
    min-height: 54px;
    margin: 0 14px 8px;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    border-radius: 16px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 24%, transparent);
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  }

  body.guest-mode.auth-ready .desktop-guest-login-cta:hover {
    filter: brightness(1.03);
    box-shadow: 0 13px 28px color-mix(in srgb, var(--accent) 30%, transparent);
    transform: translateY(-1px);
  }

  body.guest-mode.auth-ready .desktop-guest-login-cta:active {
    transform: translateY(0);
  }

  body.guest-mode.auth-ready.desktop-sidebar-collapsed .desktop-guest-login-cta {
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0 auto 8px;
    padding: 0;
    justify-content: center;
    border-radius: 15px;
  }

  body.guest-mode.auth-ready.desktop-sidebar-collapsed .desktop-guest-login-cta > span:last-child {
    display: none;
  }

  .desktop-guest-login-cta > .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 22px;
  }

  .desktop-guest-login-cta > span:last-child,
  .desktop-guest-login-cta strong,
  .desktop-guest-login-cta small {
    display: block;
    min-width: 0;
  }

  .desktop-guest-login-cta strong {
    font-size: 13px;
    line-height: 1.15;
  }

  .desktop-guest-login-cta small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .78);
    font-size: 10px;
    line-height: 1.2;
  }

  body.guest-mode .desktop-account-logout-action {
    display: none !important;
  }

  .guest-view-watermark {
    left: auto;
    right: 18px;
    bottom: 12px;
    transform: none;
  }
}

/* Mobile Guest: make authentication an explicit primary action instead of an
   ambiguous door icon. The compact brand treatment preserves room for a
   44px touch target without removing Share or Theme. */
@media (max-width: 899px) {
  body.guest-mode.auth-ready .topbar {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding-inline: 10px !important;
  }

  body.guest-mode.auth-ready .topbar-logo {
    justify-self: start !important;
    gap: 6px !important;
  }

  body.guest-mode.auth-ready .topbar-brand-mark {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
  }

  body.guest-mode.auth-ready .topbar-wordmark {
    min-width: 0 !important;
    font-size: 18px !important;
  }

  body.guest-mode.auth-ready .topbar-actions {
    gap: 4px !important;
  }

  body.guest-mode.auth-ready #guest-login-btn {
    width: auto !important;
    min-width: 90px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 11px !important;
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    color: #fff !important;
    gap: 5px !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 25%, transparent);
    white-space: nowrap;
  }

  body.guest-mode.auth-ready #guest-login-btn .material-symbols-outlined {
    font-size: 18px !important;
  }

  body.guest-mode.auth-ready #guest-login-btn > span:last-child {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  body.guest-mode.auth-ready #guest-login-btn:active {
    filter: brightness(.96);
    transform: scale(.98);
  }
}

@media (max-width: 360px) {
  body.guest-mode.auth-ready .topbar-wordmark {
    font-size: 16px !important;
  }

  body.guest-mode.auth-ready #guest-login-btn {
    min-width: 84px !important;
    padding-inline: 9px !important;
  }

  body.guest-mode.auth-ready #guest-login-btn > span:last-child {
    font-size: 10.5px !important;
  }
}
/* Session-scoped court aliases */
.queue-control-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-control-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.queue-control-card-head .card-title {
  margin: 0;
}

.court-alias-open-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.court-alias-open-btn .material-symbols-outlined {
  font-size: 18px;
}

.court-alias-backdrop {
  z-index: 10060;
}

.court-alias-sheet {
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 40px));
}

.court-alias-modal-body {
  display: grid;
  gap: 12px;
  overflow: auto;
}

.court-alias-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 999px;
  background: var(--bg3);
}

.court-alias-mode-switch button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all .18s ease;
}

.court-alias-mode-switch button.active {
  background: var(--card);
  color: var(--ready);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .07);
}

.court-alias-mode-switch button.active .material-symbols-outlined {
  color: var(--ready);
}

.court-alias-mode-switch .material-symbols-outlined {
  font-size: 18px;
}

.court-alias-help {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.court-alias-list {
  display: grid;
  gap: 10px;
}

.court-alias-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 14px;
  background: var(--card);
  transition: all .18s ease;
}

.court-alias-row:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .03);
}

.court-alias-row > span {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.court-alias-row strong {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}

.court-alias-row small {
  color: var(--muted);
  font-size: 11.5px;
}

.court-alias-row input {
  flex: 0 1 210px;
  width: 210px;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg3);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  transition: all .18s ease;
}

.court-alias-row input:focus {
  border-color: var(--accent);
  background: var(--card);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 212, 170, .12);
}

.court-alias-row input.is-duplicate,
.court-alias-row input[aria-invalid="true"] {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, var(--card));
  color: var(--danger);
}

.court-alias-row input.is-duplicate:focus,
.court-alias-row input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}

.court-alias-number-control {
  flex: 0 0 144px;
  width: 144px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 6px 3px 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg3);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  transition: all .18s ease;
}

.court-alias-number-control:hover,
.court-alias-number-control:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--card);
}

.court-alias-prefix-label,
.court-alias-number-control > span:not(.material-symbols-outlined) {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  user-select: none;
}

.court-alias-number-control i {
  display: none;
}

.court-alias-number-trigger {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.court-alias-number-trigger:hover,
.court-alias-number-trigger:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: 0;
}

.court-alias-number-value {
  font-size: 16px;
  font-weight: 900;
  color: var(--ready);
  font-variant-numeric: tabular-nums;
}

.court-alias-number-trigger .material-symbols-outlined {
  color: var(--muted);
  font-size: 18px;
  transition: transform .15s ease;
}

.court-alias-number-trigger:hover .material-symbols-outlined {
  color: var(--ready);
}

.court-alias-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  transition: all .15s ease;
  width: fit-content;
}

.court-alias-reset-btn .material-symbols-outlined {
  font-size: 17px;
  transition: transform .25s ease;
}

.court-alias-reset-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.court-alias-reset-btn:hover .material-symbols-outlined {
  transform: rotate(-90deg);
}

.court-alias-number-picker-backdrop {
  z-index: 10080 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
  background: rgba(8, 11, 20, .68) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.court-alias-number-picker-sheet {
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  background: var(--card) !important;
  color: var(--text) !important;
  box-shadow: 0 24px 72px rgba(8, 11, 20, .32) !important;
}

.court-alias-number-picker-sheet .modal-header {
  padding: 18px 20px 14px;
}

.court-alias-number-picker-sheet .modal-body {
  padding: 16px 20px 20px;
}

.court-alias-number-picker-sheet .court-score-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.court-alias-number-picker-sheet .court-score-picker-option {
  min-width: 48px;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
}

.court-alias-number-picker-sheet .court-score-picker-option:hover,
.court-alias-number-picker-sheet .court-score-picker-option:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--bg3));
}

.court-alias-number-picker-sheet .court-score-picker-option.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.court-alias-number-picker-sheet .court-score-picker-option.is-used,
.court-alias-number-picker-sheet .court-score-picker-option[aria-disabled="true"] {
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--bg3) 68%, var(--card));
  color: color-mix(in srgb, var(--muted) 58%, transparent);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .48;
}

.court-alias-number-picker-sheet .court-score-picker-option.is-used:hover,
.court-alias-number-picker-sheet .court-score-picker-option.is-used:focus-visible,
.court-alias-number-picker-sheet .court-score-picker-option[aria-disabled="true"]:hover,
.court-alias-number-picker-sheet .court-score-picker-option[aria-disabled="true"]:focus-visible {
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--bg3) 68%, var(--card));
  color: color-mix(in srgb, var(--muted) 58%, transparent);
}

.court-alias-number-control:focus-within {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.court-alias-reset-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.court-alias-reset-btn .material-symbols-outlined {
  font-size: 17px;
}

.court-alias-modal-footer {
  display: block;
}

.court-alias-modal-footer .btn {
  width: 100%;
}

.court-num,
.court-scoreboard-topbar-title,
.prepared-court-number {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#court-scoreboard-modal .court-scoreboard-pill-number {
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .queue-control-card-head {
    margin-bottom: 8px;
  }

  .court-alias-sheet {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .court-alias-row {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 8px 10px;
  }

  .court-alias-number-control {
    grid-template-columns: auto 1px minmax(116px, 1fr);
    gap: 7px;
    padding-left: 9px;
  }

  .court-alias-number-picker-sheet .court-score-picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .court-alias-number-picker-sheet .modal-body {
    padding: 14px;
  }

  .court-alias-open-btn {
    min-height: 32px;
    padding: 0 9px;
    border-radius: 9px;
    font-size: 11px;
    white-space: nowrap;
  }

  .court-alias-open-btn .material-symbols-outlined {
    font-size: 16px;
  }
}

/* Custom Room Branding & 1:1 Image Cropper */
.room-branding-form-grid {
  display: grid;
  gap: 16px;
  padding: 12px 0 4px;
}

.room-logo-preview-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  background: var(--bg-surface-secondary, rgba(255, 255, 255, .04));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, .08));
}

.room-logo-preview-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 212, 170, .15), rgba(45, 212, 191, .25));
  border: 1px solid rgba(0, 212, 170, .3);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.room-logo-preview-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-logo-preview-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.room-logo-preview-info strong {
  font-size: 14px;
  font-weight: 800;
}

.room-logo-preview-info span {
  font-size: 12px;
  color: var(--muted);
}

.room-logo-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.room-branding-save-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Cropper Modal */
.room-logo-cropper-sheet {
  max-width: 480px;
  width: 92vw;
}

.room-logo-cropper-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.cropper-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card, #0f172a) 82%, transparent);
  backdrop-filter: blur(2px);
}

.cropper-loading-overlay.hidden {
  display: none;
}

.cropper-loading-overlay .room-logo-upload-progress {
  width: min(100%, 320px);
  margin: 0;
}

.room-logo-dropzone.is-busy #room-logo-status-text,
.room-logo-dropzone.is-busy #room-logo-status-sub {
  color: var(--primary, #0d9488);
}

.cropper-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cropper-viewport {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 18px;
  overflow: hidden;
  background: #090d16;
  border: 2px solid var(--border-accent, rgba(0, 212, 170, .4));
  box-shadow: 0 12px 36px rgba(0, 0, 0, .4);
  touch-action: none;
  cursor: grab;
}

.cropper-viewport:active {
  cursor: grabbing;
}

#cropper-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.cropper-circle-mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(9, 13, 22, .55);
  pointer-events: none;
}

.cropper-overlay-grid {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, .3);
  pointer-events: none;
}

.cropper-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  color: var(--muted);
}

.cropper-zoom-slider {
  flex: 1;
  accent-color: #00d4aa;
}

.cropper-preview-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--bg-surface-secondary, rgba(255, 255, 255, .04));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, .08));
}

.cropper-preview-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
}

.cropper-preview-row {
  display: flex;
  gap: 20px;
  align-items: center;
}

.cropper-preview-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}

.cropper-preview-avatar {
  overflow: hidden;
  background: #000;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .15);
}

.cropper-preview-avatar img,
.cropper-preview-avatar canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cropper-preview-avatar.is-topbar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.cropper-preview-avatar.is-login {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

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

.cropper-modal-actions .btn {
  flex: 1;
}

.qbad-logo-img.custom-brand-logo,
.topbar-brand-mark.custom-brand-logo,
.desktop-qbad-mark.custom-brand-logo,
.auth-brand-mark.custom-brand-logo {
  border-radius: 8px !important;
  object-fit: cover !important;
  object-position: center !important;
  overflow: hidden !important;
}

/* Clip custom logos on the wrapper — parent used overflow:visible for SVG marks. */
.desktop-brand-mark.has-custom-brand-logo,
.auth-brand-mark-wrap.has-custom-brand-logo {
  overflow: hidden !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.desktop-brand-mark.has-custom-brand-logo .desktop-qbad-mark,
.auth-brand-mark-wrap.has-custom-brand-logo .auth-brand-mark {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

.topbar-logo.has-custom-brand-logo .topbar-brand-mark.custom-brand-logo {
  border-radius: 7px !important;
  overflow: hidden !important;
}

.auth-brand-mark.custom-brand-logo {
  border-radius: 10px !important;
}

html[data-theme="dark"] .desktop-brand-mark.has-custom-brand-logo,
html[data-theme="dark"] .auth-brand-mark-wrap.has-custom-brand-logo {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Uploaded room logos must keep original colors in Dark Mode.
   Default QBAD mark uses invert-to-white; custom photos must not. */
html[data-theme="dark"] .qbad-logo-img.custom-brand-logo,
html[data-theme="dark"] .topbar-brand-mark.custom-brand-logo,
html[data-theme="dark"] .desktop-qbad-mark.custom-brand-logo,
html[data-theme="dark"] .auth-brand-mark.custom-brand-logo {
  filter: none !important;
  opacity: 1 !important;
}

@media (max-width: 520px) {
  html[data-theme="dark"] .topbar-brand-mark.custom-brand-logo,
  html[data-theme="dark"] .auth-brand-mark.custom-brand-logo {
    filter: none !important;
  }
}

.room-logo-preview-badge {
  overflow: hidden;
}

.room-logo-preview-badge img {
  border-radius: 8px;
}

.auth-powered-by {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.auth-powered-by.hidden {
  display: none !important;
}

.auth-powered-by-logo {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  object-fit: contain;
  opacity: 0.42;
}

html[data-theme="dark"] .auth-powered-by-logo {
  filter: brightness(0) invert(1);
  opacity: 0.34;
}

.btn-label-short {
  display: none;
}

/* Room Branding Modal UX/UI Enhancement */
.room-branding-sheet {
  position: relative;
  max-width: 520px;
  width: 92vw;
  padding: 20px 24px;
}

.room-branding-busy-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--card, #0f172a) 88%, transparent);
  backdrop-filter: blur(3px);
}

.room-branding-busy-overlay.hidden {
  display: none !important;
}

.room-branding-busy-overlay .room-logo-upload-progress {
  width: min(100%, 340px);
  margin: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.modal-title-with-icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-header-icon {
  color: var(--primary);
  font-size: 26px;
}

.room-branding-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 14px;
}

.branding-form-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg-card-sub, var(--card-bg, rgba(255, 255, 255, 0.03)));
  border: 1px solid var(--border);
  border-radius: 14px;
}

.branding-form-section input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  background: var(--input-bg, rgba(0, 0, 0, 0.2));
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.branding-form-section input[type="text"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}

.branding-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.branding-section-head .material-symbols-outlined {
  color: var(--primary);
  font-size: 22px;
  flex-shrink: 0;
}

.branding-section-head strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
}

.branding-section-head small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

.branding-form-section .form-group {
  margin-bottom: 0;
}

.branding-form-section .form-help-text {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.branding-form-section .form-help-text .material-symbols-outlined {
  font-size: 16px;
  color: var(--primary);
  flex-shrink: 0;
}

#room-branding-modal .modal-header-icon,
#room-branding-modal .branding-section-head .material-symbols-outlined,
#room-branding-modal .form-help-text .material-symbols-outlined {
  color: var(--primary, #0d9488) !important;
}

/* Drag & Drop Upload Zone (Style 2) */
.room-logo-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  border: 2px dashed var(--primary-alpha-40, rgba(13, 148, 136, 0.4));
  border-radius: 14px;
  background: var(--primary-alpha-05, rgba(13, 148, 136, 0.04));
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  outline: none;
}

.room-logo-dropzone:hover,
.room-logo-dropzone.is-dragover {
  border-color: var(--primary, #0d9488);
  background: var(--primary-alpha-15, rgba(13, 148, 136, 0.12));
  transform: translateY(-1px);
}

.room-logo-dropzone-content {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.room-logo-preview-badge {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--primary-alpha-10, rgba(13, 148, 136, 0.12));
  border: 1px solid var(--primary-alpha-20, rgba(13, 148, 136, 0.25));
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.room-logo-preview-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-logo-preview-badge .material-symbols-outlined {
  font-size: 24px;
  color: var(--primary, #0d9488);
}

.room-logo-dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.room-logo-dropzone-text strong {
  font-size: 13px;
  color: var(--fg);
  font-weight: 500;
  line-height: 1.3;
}

.room-logo-dropzone-text .upload-link {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 600;
}

.room-logo-dropzone-text span {
  font-size: 11px;
  color: var(--muted);
}

.room-logo-action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.room-logo-upload-progress {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--primary, #0d9488) 28%, var(--border));
  background: color-mix(in srgb, var(--primary, #0d9488) 8%, var(--card, var(--bg-card, #fff)));
}

.room-logo-upload-progress.hidden {
  display: none;
}

.room-logo-upload-progress-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.35;
}

.room-logo-upload-progress-label > span:not(.material-symbols-outlined) {
  flex: 1;
  min-width: 0;
}

.room-logo-upload-progress-label strong {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--primary, #0d9488);
}

.room-logo-upload-progress-icon {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--primary, #0d9488);
}

.room-logo-upload-progress.is-active .room-logo-upload-progress-icon {
  animation: room-logo-progress-spin 0.9s linear infinite;
}

.room-logo-upload-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #0d9488) 16%, var(--border));
}

.room-logo-upload-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary, #0d9488) 75%, #0f766e), var(--primary, #0d9488));
  transition: width 0.18s ease-out;
}

.room-logo-upload-progress.is-indeterminate .room-logo-upload-progress-fill {
  width: 36% !important;
  animation: room-logo-progress-indeterminate 1.1s ease-in-out infinite;
}

.room-logo-dropzone.is-busy {
  pointer-events: none;
  opacity: 0.72;
  cursor: progress;
}

@keyframes room-logo-progress-spin {
  to { transform: rotate(360deg); }
}

@keyframes room-logo-progress-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
  .room-logo-upload-progress.is-active .room-logo-upload-progress-icon,
  .room-logo-upload-progress.is-indeterminate .room-logo-upload-progress-fill {
    animation: none;
  }
}

.room-branding-modal-footer {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.room-branding-modal-footer .btn {
  flex: 1;
  white-space: nowrap;
  justify-content: center;
}

/* Custom Room Name Header Truncation & Mobile Z-Index Fix */
.topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}

.topbar-wordmark {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.custom-room-name-title {
  display: inline-block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .custom-room-name-title {
    max-width: 120px;
    font-size: 15px;
  }
}

@media (max-width: 380px) {
  .custom-room-name-title {
    max-width: 95px;
    font-size: 14px;
  }
}

.desktop-brand-wordmark .custom-room-name-title {
  max-width: 150px;
}

/* Login branding: prioritize the room name and adapt its scale to real text length. */
.qbad-brand-auth {
  width: 100%;
  min-width: 0;
}

.auth-brand-copy {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.auth-wordmark {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
  overflow: hidden;
}

.auth-wordmark .auth-room-name-title {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.auth-wordmark .auth-room-name-title.is-short {
  font-size: 40px;
}

.auth-wordmark .auth-room-name-title.is-medium {
  font-size: 34px;
}

.auth-wordmark .auth-room-name-title.is-long {
  font-size: 29px;
}

.auth-wordmark .auth-room-name-title.is-extra-long {
  font-size: 26px;
}

@media (max-width: 520px) {
  .auth-wordmark .auth-room-name-title.is-short {
    font-size: 36px;
  }

  .auth-wordmark .auth-room-name-title.is-medium {
    font-size: 32px;
  }

  .auth-wordmark .auth-room-name-title.is-long {
    font-size: 28px;
  }

  .auth-wordmark .auth-room-name-title.is-extra-long {
    font-size: 24px;
  }
}

#room-branding-account-value {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

@media (max-width: 640px) {
  #room-branding-account-value {
    max-width: 180px;
  }

  #room-branding-modal,
  #room-logo-cropper-modal {
    padding: 8px !important;
    overflow-x: hidden !important;
    align-items: center !important;
  }

  #room-branding-modal .room-branding-sheet,
  #room-logo-cropper-modal .room-logo-cropper-sheet {
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: 100% !important;
    max-height: min(92dvh, 92vh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 12px 12px 10px !important;
    box-sizing: border-box !important;
  }

  #room-branding-modal .modal-header,
  #room-logo-cropper-modal .modal-header {
    gap: 8px;
  }

  #room-branding-modal .modal-title,
  #room-logo-cropper-modal .modal-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  #room-branding-modal .modal-subtitle,
  #room-logo-cropper-modal .modal-subtitle {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .room-branding-modal-body {
    gap: 10px !important;
    padding-top: 10px !important;
  }

  .branding-form-section {
    gap: 8px !important;
    padding: 12px !important;
  }

  .room-logo-cropper-body {
    gap: 10px !important;
    padding: 8px 0 0 !important;
  }

  .cropper-viewport {
    width: min(220px, calc(100vw - 72px)) !important;
    height: min(220px, calc(100vw - 72px)) !important;
    border-radius: 14px;
  }

  .cropper-preview-section {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .cropper-preview-title {
    font-size: 11px !important;
  }

  .cropper-preview-avatar.is-topbar {
    width: 28px !important;
    height: 28px !important;
  }

  .cropper-preview-avatar.is-login {
    width: 36px !important;
    height: 36px !important;
  }

  .cropper-modal-actions,
  .room-branding-modal-footer {
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .cropper-modal-actions .btn,
  .room-branding-modal-footer .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 10px 8px !important;
    justify-content: center;
  }

  .cropper-modal-actions .btn .material-symbols-outlined,
  .room-branding-modal-footer .btn .material-symbols-outlined {
    font-size: 18px !important;
  }

  .btn-label-long {
    display: none !important;
  }

  .btn-label-short {
    display: inline !important;
  }

  .auth-powered-by {
    margin-top: 12px;
    padding-top: 12px;
    font-size: 11px;
    gap: 6px;
  }

  .auth-powered-by-logo {
    width: 14px;
    height: 14px;
  }
}

/* Ensure Room Branding and Cropper modals sit on top of header and footer on Mobile */
#room-branding-modal,
#room-logo-cropper-modal {
  z-index: 999999 !important;
}

#room-branding-modal .modal-sheet,
#room-logo-cropper-modal .modal-sheet {
  position: relative;
  z-index: 1000000 !important;
}

/* Viewer / Guest only consume the queue display. Court-count, capacity and
   queue-generation controls belong to roles that can operate the queue.
   Keep this rule after desktop collapse styles so a stored collapsed state
   cannot bring the compact operation rail back. */
body.role-viewer-mode #page-queue .queue-control-card,
body.role-viewer-mode #page-queue .desktop-queue-rail,
body.guest-mode #page-queue .queue-control-card,
body.guest-mode #page-queue .desktop-queue-rail {
  display: none !important;
}

/* Incomplete Check-in: hide court controls/board and show a quiet roster card. */
body.queue-checkin-roster-mode #page-queue .desktop-queue-layout {
  display: none !important;
}

body.queue-checkin-roster-mode #page-queue .queue-checkin-roster {
  display: grid;
}

.queue-checkin-roster {
  display: none;
  width: min(100%, 560px);
  margin: 0 auto;
  gap: 12px;
}

.queue-checkin-roster-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(239, 68, 68, .18);
  background: linear-gradient(135deg, rgba(239, 68, 68, .10), rgba(251, 113, 133, .05));
  color: var(--text);
}

.queue-checkin-roster-notice-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: #ef4444;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, .12);
}

.queue-checkin-roster-notice-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.queue-checkin-roster-notice-copy strong {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
  color: #b91c1c;
}

.queue-checkin-roster-notice-copy span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

html[data-theme="dark"] .queue-checkin-roster-notice {
  border-color: rgba(248, 113, 113, .22);
  background: linear-gradient(135deg, rgba(239, 68, 68, .16), rgba(251, 113, 133, .08));
}

html[data-theme="dark"] .queue-checkin-roster-notice-copy strong {
  color: #fca5a5;
}

.queue-checkin-roster-actions-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 48%),
    var(--card, var(--bg2));
}

.queue-checkin-roster-actions-card .btn {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.queue-checkin-roster-actions-card .material-symbols-outlined {
  font-size: 18px;
}

.checkin-scheduled-settings-action,
.checkin-scheduled-gate-action,
.queue-checkin-roster-scheduled-action {
  color: var(--muted) !important;
}

.checkin-scheduled-settings-action:hover,
.checkin-scheduled-settings-action:focus-visible,
.checkin-scheduled-gate-action:hover,
.checkin-scheduled-gate-action:focus-visible,
.queue-checkin-roster-scheduled-action:hover,
.queue-checkin-roster-scheduled-action:focus-visible {
  color: color-mix(in srgb, var(--muted) 35%, var(--text)) !important;
}

.queue-checkin-roster-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 36%),
    var(--card, var(--bg2));
}

.queue-checkin-roster-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.queue-checkin-roster-copy {
  min-width: 0;
  flex: 1;
}

.queue-checkin-roster-card .card-title {
  letter-spacing: 0.01em;
}

.queue-checkin-roster-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-wrap: pretty;
}

.queue-checkin-roster-card .ready-count-pill {
  margin: 0;
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.queue-checkin-roster-list {
  gap: 4px;
  padding-top: 2px;
}

.queue-checkin-roster-list .ready-player-chip {
  cursor: default;
  padding: 10px 12px !important;
  border-radius: 12px;
  border-bottom: 0;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--bg3) 72%, transparent);
}

.queue-checkin-roster-list .ready-player-chip + .ready-player-chip {
  margin-top: 0;
}

.queue-checkin-roster-empty {
  padding: 18px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg3) 70%, transparent);
  text-align: center;
}

.queue-checkin-roster-self-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(17, 184, 154, .20);
  background: rgba(17, 184, 154, .09);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.queue-checkin-roster-list .ready-player-chip.is-self-player {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

.queue-checkin-roster-status {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.queue-checkin-roster-status.is-ready {
  background: color-mix(in srgb, var(--ready) 16%, transparent);
  color: var(--ready);
}

.queue-checkin-roster-status.is-rest {
  background: color-mix(in srgb, var(--rest) 16%, transparent);
  color: var(--rest);
}

.queue-checkin-roster-status.is-playing {
  background: color-mix(in srgb, var(--playing) 16%, transparent);
  color: var(--playing);
}

.queue-checkin-roster-status.is-muted {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}

/* Pending approval preview: keep the whole modal above app chrome and give
   the list the scroll area instead of pushing the footer into the bottom nav. */
#approve-all-preview-modal {
  z-index: 1550 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(72px + env(safe-area-inset-top)) 12px
    calc(88px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

#approve-all-preview-modal .approve-all-preview-sheet {
  position: relative !important;
  z-index: 1551 !important;
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  max-height: calc(100dvh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#approve-all-preview-modal .modal-header {
  flex: 0 0 auto !important;
  padding: 14px 16px 10px !important;
}

#approve-all-preview-modal .approve-all-preview-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 10px 16px 12px !important;
  overflow: hidden !important;
}

#approve-all-preview-modal .approve-all-preview-warning {
  flex: 0 0 auto !important;
}

#approve-all-preview-modal .approve-all-preview-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#approve-all-preview-modal .approve-all-preview-footer {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(125, 132, 145, .16) !important;
  background: var(--card) !important;
  box-shadow: 0 -8px 20px rgba(31, 41, 55, .07) !important;
}

#approve-all-preview-modal .approve-all-preview-footer .btn {
  width: auto !important;
  min-width: 96px !important;
  min-height: 40px !important;
  height: 40px !important;
  flex: 1 1 0 !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#approve-all-preview-modal .approve-all-preview-footer #approve-all-preview-confirm {
  flex-grow: 1.25 !important;
}

body:has(#approve-all-preview-modal:not(.hidden)) .topbar,
body:has(#approve-all-preview-modal:not(.hidden)) .bottom-nav {
  z-index: 300 !important;
  pointer-events: none !important;
}

html[data-theme="dark"] #approve-all-preview-modal .approve-all-preview-footer {
  background: rgba(18, 26, 43, .98) !important;
  border-top-color: rgba(148, 163, 184, .16) !important;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .22) !important;
}

@media (max-width: 520px) {
  #approve-all-preview-modal {
    padding: calc(64px + env(safe-area-inset-top)) 10px
      calc(82px + env(safe-area-inset-bottom)) !important;
  }

  #approve-all-preview-modal .approve-all-preview-sheet {
    width: 100% !important;
    max-height: calc(100dvh - 146px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 22px !important;
  }

  #approve-all-preview-modal .modal-header {
    padding: 12px 14px 9px !important;
  }

  #approve-all-preview-modal .approve-all-preview-body {
    padding: 9px 14px 10px !important;
  }

  #approve-all-preview-modal .approve-all-preview-footer {
    gap: 7px !important;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom)) !important;
  }

  #approve-all-preview-modal .approve-all-preview-footer .btn {
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
  }
}

/* =========================================================
   System > General — shared settings-card rhythm
   Keep each setting card on one spacing/divider pattern so the
   page reads as a calm list instead of nested boxes.
   ========================================================= */
#settings-panel-system .settings-system-flow {
  gap: 24px !important;
}

#settings-panel-system .system-settings-group {
  gap: 8px;
}

#settings-panel-system .system-settings-group-head {
  padding: 0 4px;
}

#settings-panel-system .system-settings-group-head h3 {
  font-size: 15px;
  line-height: 1.35;
}

#settings-panel-system .system-settings-group-head p {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
}

#settings-panel-system .system-settings-group > .card {
  margin-bottom: 0 !important;
}

#settings-panel-system .system-settings-group > .card:not(.system-collapse-card) {
  padding: 16px !important;
  border-radius: 16px !important;
  border-color: var(--border) !important;
  background: var(--card) !important;
  box-shadow: 0 8px 22px rgba(31, 41, 55, .045) !important;
}

#settings-panel-system .personal-queue-alert-setting-card,
#settings-panel-system .court-game-timer-setting-card {
  display: grid;
  gap: 0;
}

#settings-panel-system .personal-queue-setting-head {
  align-items: flex-start;
  gap: 10px;
}

#settings-panel-system .personal-queue-setting-title {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
}

#settings-panel-system .personal-queue-setting-title .material-symbols-outlined {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 19px;
}

#settings-panel-system .personal-queue-alert-toggle-row {
  position: relative;
  margin-top: 12px;
  padding: 12px 0 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent) !important;
  border-bottom: 0 !important;
}

#settings-panel-system .personal-queue-alert-toggle-row + .personal-queue-alert-toggle-row {
  margin-top: 10px;
}

#settings-panel-system .court-scoreboard-format-setting {
  margin-top: 12px;
  padding-top: 12px;
  border-top-color: color-mix(in srgb, var(--border) 84%, transparent);
}

#settings-panel-system .queue-spread-warning-setting-body {
  margin-top: 12px;
  border-top-color: color-mix(in srgb, var(--border) 84%, transparent);
}

#settings-panel-system .system-notification-expand {
  margin-top: 12px;
  padding: 12px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
}

#settings-panel-system .system-collapse-card {
  margin-bottom: 0 !important;
  border-radius: 16px !important;
}

#settings-panel-system .room-branding-account-card {
  margin: 0 !important;
}

html[data-theme="dark"] #settings-panel-system .system-settings-group > .card:not(.system-collapse-card) {
  border-color: var(--border) !important;
  background: var(--card) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16) !important;
}

@media (max-width: 520px) {
  #settings-panel-system .settings-system-flow {
    gap: 18px !important;
  }

  #settings-panel-system .system-settings-group > .card:not(.system-collapse-card) {
    padding: 14px !important;
    border-radius: 15px !important;
  }

  #settings-panel-system .system-settings-group-head {
    padding: 0 2px;
  }

  #settings-panel-system .personal-queue-setting-title {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
  }

  #settings-panel-system .personal-queue-setting-title .material-symbols-outlined {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 18px;
  }
}

@supports not (height: 100dvh) {
  #approve-all-preview-modal .approve-all-preview-sheet {
    max-height: calc(100vh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  @media (max-width: 520px) {
    #approve-all-preview-modal .approve-all-preview-sheet {
      max-height: calc(100vh - 146px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }
  }
}

/* =========================================================
   Game shuttle controls — QBAD CI polish
   Keep the control compact, scannable and touch friendly while
   reusing the same card, border and teal accent language as courts.
   ========================================================= */
.game-shuttle-box {
  display: block;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 8px 22px rgba(31, 41, 55, .045);
}

.game-shuttle-copy {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.game-shuttle-copy strong {
  color: var(--text);
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.3;
}

.game-shuttle-copy span {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}

.game-shuttle-chip-wrap,
.game-shuttle-chip-list {
  display: grid;
  width: 100%;
  gap: 8px;
  align-items: stretch;
}

.game-shuttle-chip {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
  color: var(--text);
  box-shadow: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.game-shuttle-chip.has-count {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

.game-shuttle-profile-btn {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  max-width: none;
  min-height: 44px;
  padding: 4px 6px;
  border-radius: 10px;
  color: inherit;
  text-align: left;
  touch-action: manipulation;
  transition: background-color .15s ease;
}

.game-shuttle-profile-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.game-shuttle-profile-btn:focus-visible,
.game-shuttle-stepper button:focus-visible,
.game-shuttle-remove-btn:focus-visible,
.game-shuttle-add-dropdown:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 1px;
}

.game-shuttle-profile-btn .shuttlecock-img-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 6px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  object-fit: contain;
  opacity: .86;
}

.game-shuttle-profile-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.game-shuttle-profile-copy strong,
.game-shuttle-profile-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-shuttle-profile-copy strong {
  color: var(--text);
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.25;
}

.game-shuttle-profile-copy small {
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.25;
}

.game-shuttle-stepper {
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--card);
}

.game-shuttle-stepper button {
  display: inline-flex;
  width: 31px;
  height: 31px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}

.game-shuttle-stepper button:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
}

.game-shuttle-stepper button:active,
.game-shuttle-remove-btn:active {
  transform: scale(.94);
}

.game-shuttle-stepper span {
  min-width: 24px;
  color: var(--text);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-align: center;
}

.game-shuttle-remove-btn {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--muted);
  touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}

.game-shuttle-remove-btn:hover {
  background: color-mix(in srgb, var(--out) 9%, var(--card));
  color: var(--out);
}

.game-shuttle-remove-btn .material-symbols-outlined {
  font-size: 17px !important;
}

.game-shuttle-add-dropdown {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 0 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  color: var(--accent);
  font-size: .8rem;
  font-weight: 900;
  transition: border-color .15s ease, background-color .15s ease;
}

.game-shuttle-add-dropdown:hover {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
}

.game-shuttle-add-dropdown .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 18px !important;
}

.game-shuttle-add-dropdown select {
  min-width: 0;
  min-height: 42px;
  flex: 1 1 auto;
  max-width: none;
  padding: 0 18px 0 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  color: var(--text) !important;
  font: inherit;
  cursor: pointer;
}

.game-shuttle-add-dropdown select:disabled {
  cursor: default;
  opacity: .55;
}

@media (max-width: 560px) {
  .game-shuttle-box {
    padding: 12px;
  }

  .game-shuttle-chip {
    min-height: 54px;
    padding: 5px 6px;
  }

  .game-shuttle-profile-btn {
    gap: 7px;
    min-height: 42px;
    padding-inline: 4px;
  }

  .game-shuttle-stepper {
    height: 36px;
  }

  .game-shuttle-stepper button {
    width: 29px;
    height: 29px;
  }

  .game-shuttle-remove-btn {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-shuttle-chip,
  .game-shuttle-profile-btn,
  .game-shuttle-stepper button,
  .game-shuttle-remove-btn,
  .game-shuttle-add-dropdown {
    transition: none;
  }
}
/* Court icons: Flaticon court asset, tinted by the surrounding CI color. */
.qbad-court-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url('/assets/court-17525449.png') center / contain no-repeat;
  mask: url('/assets/court-17525449.png') center / contain no-repeat;
  filter:
    drop-shadow(.55px 0 currentColor)
    drop-shadow(-.55px 0 currentColor)
    drop-shadow(0 .55px currentColor)
    drop-shadow(0 -.55px currentColor);
  vertical-align: middle;
}

.prepared-queue-court-btn .qbad-prepared-court-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.expense-settings-subtab .qbad-expense-court-icon {
  width: 20px;
  height: 20px;
  color: currentColor;
  transition: transform 0.2s ease;
}

.expense-settings-subtab.active .qbad-expense-court-icon {
  color: var(--accent);
  transform: scale(1.05);
}

/* Game shuttle profile picker: confirm profile changes in the shared modal flow. */
.game-shuttle-icon-badge {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  box-sizing: border-box;
}

.game-shuttle-icon-badge .shuttlecock-mini-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  padding: 0;
  border-radius: 0;
  background-color: var(--accent) !important;
  opacity: 1;
}

.game-shuttle-profile-option .game-shuttle-icon-badge {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 10px;
}

.game-shuttle-add-btn {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 0 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  color: var(--accent);
  font: inherit;
  font-size: .8rem;
  font-weight: 900;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}

.game-shuttle-add-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
}

.game-shuttle-add-btn:active {
  transform: scale(.99);
}

.game-shuttle-add-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.game-shuttle-add-btn .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 18px !important;
}

#game-shuttle-profile-modal {
  z-index: 1510 !important;
}

#game-shuttle-profile-modal .game-shuttle-profile-picker-sheet {
  display: flex !important;
  width: min(94vw, 480px) !important;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  flex-direction: column;
  overflow: hidden !important;
}

.game-shuttle-profile-picker-body {
  min-height: 0;
  overflow: auto;
  padding: 12px 16px !important;
}

.game-shuttle-profile-picker-list {
  display: grid;
  gap: 8px;
}

.game-shuttle-profile-option {
  display: flex;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}

.game-shuttle-profile-option:hover,
.game-shuttle-profile-option:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  outline: none;
}

.game-shuttle-profile-option:active {
  transform: scale(.99);
}

.game-shuttle-profile-option.selected {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

.game-shuttle-profile-option-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 2px;
}

.game-shuttle-profile-option-copy strong,
.game-shuttle-profile-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-shuttle-profile-option-copy strong {
  color: var(--text);
  font-size: .84rem;
  font-weight: 900;
}

.game-shuttle-profile-option-copy small {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
}

.game-shuttle-profile-option-check {
  color: var(--accent);
  font-size: 20px !important;
  opacity: 0;
}

.game-shuttle-profile-option.selected .game-shuttle-profile-option-check {
  opacity: 1;
}

/* Prepared-queue edit chips keep their team's color on hover instead of
   inheriting the generic green player-chip hover state. */
.prepared-edit-player-chip.team-chip-a:hover:not(.is-drop-target),
.prepared-edit-player-chip.team-chip-a:focus-visible:not(.is-drop-target) {
  border-color: #75a5ff;
  background: #dbe7ff;
  box-shadow: 0 0 0 3px rgba(37, 90, 199, .16);
}

.prepared-edit-player-chip.team-chip-b:hover:not(.is-drop-target),
.prepared-edit-player-chip.team-chip-b:focus-visible:not(.is-drop-target) {
  border-color: #f18da5;
  background: #ffe0e7;
  box-shadow: 0 0 0 3px rgba(197, 60, 93, .16);
}

/* Prepared-queue chips use a darker, matte team tint in dark mode so they
   remain distinct from the brighter gradient chips used on live court cards. */
html[data-theme="dark"] .prepared-queue-team-players .prepared-team-chip.team-a,
html[data-theme="dark"] .prepared-edit-player-chip.team-chip-a {
  color: #b7d0ff !important;
  border-color: rgba(111, 165, 255, .48) !important;
  background: rgba(31, 58, 99, .82) !important;
  box-shadow: inset 0 0 0 1px rgba(143, 185, 255, .10);
}

html[data-theme="dark"] .prepared-queue-team-players .prepared-team-chip.team-b,
html[data-theme="dark"] .prepared-edit-player-chip.team-chip-b {
  color: #ffc0cd !important;
  border-color: rgba(255, 139, 162, .48) !important;
  background: rgba(93, 38, 59, .82) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 169, 186, .10);
}

html[data-theme="dark"] .prepared-edit-player-chip.team-chip-a:hover:not(.is-drop-target),
html[data-theme="dark"] .prepared-edit-player-chip.team-chip-a:focus-visible:not(.is-drop-target) {
  color: #c9dcff !important;
  border-color: rgba(132, 181, 255, .78) !important;
  background: rgba(40, 77, 130, .94) !important;
  box-shadow: 0 0 0 3px rgba(86, 145, 241, .18);
}

html[data-theme="dark"] .prepared-edit-player-chip.team-chip-b:hover:not(.is-drop-target),
html[data-theme="dark"] .prepared-edit-player-chip.team-chip-b:focus-visible:not(.is-drop-target) {
  color: #ffd2db !important;
  border-color: rgba(255, 157, 177, .78) !important;
  background: rgba(119, 48, 74, .94) !important;
  box-shadow: 0 0 0 3px rgba(230, 93, 124, .18);
}

html[data-theme="dark"] .prepared-queue-player-level-badge-a {
  color: #b7d0ff !important;
  background: rgba(20, 42, 76, .84) !important;
  border-color: rgba(111, 165, 255, .48) !important;
}

html[data-theme="dark"] .prepared-queue-player-level-badge-b {
  color: #ffc0cd !important;
  background: rgba(67, 27, 46, .84) !important;
  border-color: rgba(255, 139, 162, .48) !important;
}

.game-shuttle-profile-picker-empty {
  padding: 20px 12px;
  color: var(--muted);
  text-align: center;
}

.game-shuttle-profile-picker-footer {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}

#game-shuttle-profile-picker-confirm:disabled {
  cursor: not-allowed;
  opacity: .55;
}

@media (max-width: 520px) {
  #game-shuttle-profile-modal .game-shuttle-profile-picker-sheet {
    width: min(96vw, 480px) !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  .game-shuttle-profile-picker-body {
    padding-inline: 12px !important;
  }

  .game-shuttle-profile-picker-footer {
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-shuttle-add-btn,
  .game-shuttle-profile-option {
    transition: none;
  }
}

@media (min-width: 1121px) and (min-height: 560px) {
  body.auth-ready #settings-panel-expense.active > .expense-court-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body.auth-ready #settings-panel-expense.active > .expense-shuttle-card {
    grid-column: 2 !important;
    grid-row: 2 / span 3 !important;
    align-self: start !important;
    min-height: 0 !important;
    max-height: min(70vh, 640px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.auth-ready #settings-panel-expense.active > .expense-discount-card {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  body.auth-ready #settings-panel-expense.active > .expense-summary-card {
    grid-column: 1 !important;
    grid-row: 4 !important;
    align-self: start !important;
  }

  body.auth-ready #settings-panel-expense.active > .expense-shuttle-card #shuttle-owner-list {
    min-height: 0 !important;
    max-height: min(52vh, 520px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 6px;
  }
}

/* Restore is a safe, positive action: keep it green on hover/focus instead of
   inheriting the generic dark button hover treatment. */
.deleted-session-restore-btn:hover,
.deleted-session-restore-btn:focus-visible {
  color: #047857 !important;
  border-color: color-mix(in srgb, var(--accent) 64%, #047857) !important;
  background: color-mix(in srgb, var(--accent) 15%, var(--card)) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}

html[data-theme="dark"] .deleted-session-restore-btn:hover,
html[data-theme="dark"] .deleted-session-restore-btn:focus-visible {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, .54) !important;
  background: rgba(16, 185, 129, .18) !important;
}

/* iOS Safari/Chrome + standalone PWA viewport revalidation.
   WebKit can restore a stale desktop media-query branch after SPA navigation;
   script.js applies this class only to iPhone/iPod. Android keeps its existing
   responsive rules unchanged. */
:root {
  --qbad-viewport-width: 100vw;
  --qbad-viewport-height: 100dvh;
}

body.qbad-ios-viewport.modal-open {
  min-height: var(--qbad-viewport-height, 100dvh) !important;
  height: var(--qbad-viewport-height, 100dvh) !important;
}

body.qbad-ios-viewport #checkin-modal .checkin-sheet {
  max-height: calc(var(--qbad-viewport-height, 100dvh) - 116px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

body.qbad-ios-viewport.auth-ready {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.qbad-ios-viewport.auth-ready .desktop-sidebar {
  display: none !important;
}

body.qbad-ios-viewport.auth-ready .topbar {
  /* The mobile shell uses a three-column grid (theme / centered brand /
     actions). Flex here makes every child start at the left after returning
     to Queue in an iOS standalone PWA. */
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  height: 60px !important;
  padding: 0 12px !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}

body.qbad-ios-viewport.auth-ready .bottom-nav.main-bottom-nav {
  /* Keep the same mobile grid that gives the Queue action its raised circle;
     flex makes the middle button stretch into a pill. */
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr) !important;
  width: min(calc(var(--qbad-viewport-width, 100vw) - 32px), 430px) !important;
  max-width: 430px !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}

@media (max-width: 380px) {
  body.qbad-ios-viewport.auth-ready .bottom-nav.main-bottom-nav {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) !important;
    width: min(calc(var(--qbad-viewport-width, 100vw) - 20px), 360px) !important;
    padding-inline: 10px !important;
  }
}

body.qbad-ios-viewport.auth-ready .page,
body.qbad-ios-viewport.auth-ready #page-queue,
body.qbad-ios-viewport.auth-ready #page-stats,
body.qbad-ios-viewport.auth-ready #page-settings {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

body.qbad-ios-viewport.auth-ready #page-queue .desktop-queue-layout {
  display: contents !important;
}

body.qbad-ios-viewport.auth-ready #page-queue .desktop-queue-left,
body.qbad-ios-viewport.auth-ready #page-queue .desktop-queue-right {
  display: contents !important;
  width: auto !important;
  max-width: none !important;
}

/* iOS auto-zooms focused controls below 16px. Keep the visible form scale
   stable in both Safari and Chrome iOS (including the standalone PWA). */
body.qbad-ios-viewport input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.qbad-ios-viewport select,
body.qbad-ios-viewport textarea {
  font-size: 16px !important;
}

body.qbad-ios-viewport #checkin-modal .checkin-sheet {
  max-height: calc(var(--qbad-viewport-height, 100dvh) - 102px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

body.qbad-ios-viewport #checkin-modal.checkin-gate-mode .checkin-sheet {
  height: auto !important;
  min-height: 0 !important;
}

/* Historical expense editing + revision audit */
.expense-history-edited-note {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}

.expense-history-edited-note .material-symbols-outlined {
  font-size: 13px;
}

.history-edit-btn,
.history-revision-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.history-edit-btn {
  border: 1px solid rgba(17, 184, 154, .24);
  background: rgba(17, 184, 154, .09);
  color: var(--accent);
}

.history-revision-btn {
  border: 1px solid rgba(100, 116, 139, .22);
  background: rgba(100, 116, 139, .08);
  color: var(--muted);
}

.history-edit-btn:hover,
.history-edit-btn:focus-visible {
  background: rgba(17, 184, 154, .15);
  border-color: rgba(17, 184, 154, .40);
}

.history-revision-btn:hover,
.history-revision-btn:focus-visible {
  background: rgba(100, 116, 139, .14);
  border-color: rgba(100, 116, 139, .34);
  color: var(--text);
}

.history-edit-btn .material-symbols-outlined,
.history-revision-btn .material-symbols-outlined {
  font-size: 15px;
  line-height: 1;
}

/* Keep the expense-card action hierarchy clear without hiding utilities in a menu. */
.expense-history-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(125, 132, 145, .12);
}

.expense-history-primary-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.expense-history-primary-actions:empty {
  display: none;
}

.expense-history-primary-actions .history-edit-btn,
.expense-history-primary-actions .history-revision-btn {
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
}

.expense-history-utility-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 4px;
  padding-top: 7px;
  border-top: 1px solid rgba(125, 132, 145, .10);
}

.expense-history-primary-actions:empty + .expense-history-utility-actions {
  padding-top: 0;
  border-top: 0;
}

.expense-history-utility-actions .history-receipt-btn,
.expense-history-utility-actions .history-session-summary-btn,
.expense-history-utility-actions .history-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 38px;
  padding: 7px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}

.expense-history-utility-actions .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
}

.expense-history-utility-actions .history-receipt-btn:hover,
.expense-history-utility-actions .history-session-summary-btn:hover,
.expense-history-utility-actions .history-copy-btn:hover,
.expense-history-utility-actions .history-receipt-btn:focus-visible,
.expense-history-utility-actions .history-session-summary-btn:focus-visible,
.expense-history-utility-actions .history-copy-btn:focus-visible {
  background: rgba(100, 116, 139, .09);
  color: var(--text);
}

html[data-theme="dark"] .expense-history-card-actions,
html[data-theme="dark"] .expense-history-utility-actions {
  border-color: rgba(148, 163, 184, .12);
}

html[data-theme="dark"] .expense-history-utility-actions .history-receipt-btn,
html[data-theme="dark"] .expense-history-utility-actions .history-session-summary-btn,
html[data-theme="dark"] .expense-history-utility-actions .history-copy-btn {
  border: 0;
  background: transparent;
  color: #94a3b8;
}

html[data-theme="dark"] .expense-history-utility-actions .history-receipt-btn:hover,
html[data-theme="dark"] .expense-history-utility-actions .history-session-summary-btn:hover,
html[data-theme="dark"] .expense-history-utility-actions .history-copy-btn:hover,
html[data-theme="dark"] .expense-history-utility-actions .history-receipt-btn:focus-visible,
html[data-theme="dark"] .expense-history-utility-actions .history-session-summary-btn:focus-visible,
html[data-theme="dark"] .expense-history-utility-actions .history-copy-btn:focus-visible {
  background: rgba(148, 163, 184, .10);
  color: #e2e8f0;
}

@media(max-width:360px) {
  .expense-history-primary-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.expense-history-edit-locked {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.45;
}

.expense-history-edit-locked .material-symbols-outlined {
  font-size: 13px;
  margin-top: 1px;
}

.expense-edit-modal-sheet,
.expense-revision-modal-sheet {
  width: min(640px, calc(100vw - 28px));
  max-height: min(88vh, 820px);
}

.expense-edit-form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.expense-edit-modal-body {
  display: grid;
  gap: 12px;
}

.expense-edit-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 184, 154, .16);
  border-radius: 13px;
  background: rgba(17, 184, 154, .06);
}

.expense-edit-context strong {
  color: var(--text);
  font-size: 13px;
}

.expense-edit-context span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

#expense-edit-fields {
  display: grid;
  gap: 12px;
}

.expense-edit-section {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.expense-edit-section.is-locked {
  border-style: dashed;
  background: rgba(100, 116, 139, .045);
}

.expense-edit-section.is-locked p,
.expense-edit-empty-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.expense-edit-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.expense-edit-section-head > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.expense-edit-section-head .material-symbols-outlined {
  color: var(--accent);
  font-size: 18px;
}

.expense-edit-section-head .expense-edit-shuttle-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.expense-edit-section-head strong {
  color: var(--text);
  font-size: 13px;
}

.expense-edit-mode-chip {
  border: 1px solid rgba(100, 116, 139, .18);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(100, 116, 139, .07);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.expense-edit-field,
.expense-edit-court-rate-row label,
.expense-edit-shuttle-row label,
.expense-edit-reason-field {
  display: grid;
  gap: 5px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 800;
}

.expense-edit-optional-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.expense-edit-field input,
.expense-edit-court-rate-row input,
.expense-edit-shuttle-row input,
.expense-edit-shuttle-row select,
.expense-edit-reason-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.expense-edit-field input,
.expense-edit-court-rate-row input,
.expense-edit-shuttle-row input,
.expense-edit-shuttle-row select {
  min-height: 42px;
  padding: 9px 10px;
}

.expense-edit-shuttle-row select {
  appearance: none;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 18px, calc(100% - 10px) 18px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.expense-edit-reason-field textarea {
  min-height: 82px;
  padding: 10px 11px;
  resize: vertical;
}

.expense-edit-field input:focus,
.expense-edit-court-rate-row input:focus,
.expense-edit-shuttle-row input:focus,
.expense-edit-shuttle-row select:focus,
.expense-edit-reason-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(17, 184, 154, .12);
}

.expense-edit-reason-field textarea[aria-invalid="true"] {
  border-color: var(--out);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .10);
}

.expense-edit-field small,
.expense-edit-reason-field small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}

.expense-edit-rate-list,
.expense-edit-shuttle-list {
  display: grid;
  gap: 9px;
}

.expense-edit-safety-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: -1px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.45;
}

.expense-edit-safety-note .material-symbols-outlined {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent);
  font-size: 16px;
}

.expense-edit-court-rate-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(72px, .7fr) minmax(82px, .8fr) 44px;
  align-items: end;
  gap: 7px;
}

.expense-edit-shuttle-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.35fr) minmax(82px, .75fr) minmax(82px, .75fr) 44px;
  align-items: end;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(100, 116, 139, .12);
  border-radius: 12px;
  background: rgba(100, 116, 139, .04);
}

.expense-edit-shuttle-owner {
  display: grid;
  gap: 2px;
  align-self: center;
  min-width: 0;
}

.expense-edit-shuttle-owner span {
  overflow: hidden;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-edit-shuttle-owner small {
  color: var(--muted);
  font-size: 10px;
}

.expense-edit-row-remove {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(239, 68, 68, .16);
  border-radius: 10px;
  background: rgba(239, 68, 68, .06);
  color: var(--out);
  cursor: pointer;
}

.expense-edit-row-remove:focus-visible {
  outline: 3px solid rgba(239, 68, 68, .22);
  outline-offset: 2px;
}

.expense-edit-row-remove .material-symbols-outlined {
  font-size: 17px;
}

.expense-edit-add-row {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.expense-edit-add-row .material-symbols-outlined {
  font-size: 16px;
}

.expense-edit-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(17, 184, 154, .16);
  border-radius: 13px;
  background: rgba(17, 184, 154, .055);
}

.expense-edit-preview > div {
  display: grid;
  gap: 3px;
}

.expense-edit-preview span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
}

.expense-edit-preview strong {
  color: var(--text);
  font-size: 12px;
}

.expense-edit-preview-total strong {
  color: var(--accent);
}

.expense-edit-preview.is-error {
  display: block;
  border-color: rgba(239, 68, 68, .16);
  background: rgba(239, 68, 68, .05);
}

.expense-edit-preview.is-error span {
  color: var(--out);
  font-size: 11px;
}

.expense-edit-error {
  padding: 9px 10px;
  border: 1px solid rgba(239, 68, 68, .16);
  border-radius: 11px;
  background: rgba(239, 68, 68, .06);
  color: var(--out);
  font-size: 11px;
  font-weight: 700;
}

.expense-edit-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--card);
}

.expense-edit-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.expense-edit-submit .material-symbols-outlined {
  font-size: 17px;
}

.expense-revision-list {
  display: grid;
  gap: 10px;
}

.expense-revision-card {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--card);
}

.expense-revision-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.expense-revision-card-head > div {
  display: grid;
  gap: 2px;
}

.expense-revision-card-head strong {
  color: var(--text);
  font-size: 12.5px;
}

.expense-revision-card-head span,
.expense-revision-actor {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.expense-revision-actor {
  max-width: 46%;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-revision-reason {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}

.expense-revision-change-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.expense-revision-change-summary span {
  font-weight: 700;
}

.expense-revision-change-summary strong {
  color: var(--text);
  font-weight: 700;
}

.expense-revision-details {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.expense-revision-details summary {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.expense-revision-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}

.expense-revision-snapshot {
  display: grid;
  gap: 6px;
  padding: 9px;
  border-radius: 11px;
  background: rgba(100, 116, 139, .055);
}

.expense-revision-snapshot > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.expense-revision-snapshot dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.expense-revision-snapshot dl div {
  display: flex;
  justify-content: space-between;
  gap: 7px;
}

.expense-revision-snapshot dt,
.expense-revision-snapshot dd {
  margin: 0;
  color: var(--muted);
  font-size: 9.5px;
}

.expense-revision-snapshot dd {
  color: var(--text);
  font-weight: 800;
  text-align: right;
}

html[data-theme="dark"] .expense-edit-section,
html[data-theme="dark"] .expense-revision-card,
html[data-theme="dark"] .expense-edit-footer {
  background: rgba(17, 26, 46, .96);
}

html[data-theme="dark"] .expense-edit-field input,
html[data-theme="dark"] .expense-edit-court-rate-row input,
html[data-theme="dark"] .expense-edit-shuttle-row input,
html[data-theme="dark"] .expense-edit-shuttle-row select,
html[data-theme="dark"] .expense-edit-reason-field textarea {
  background: rgba(8, 11, 20, .56);
}

@media (max-width: 560px) {
  .expense-edit-modal-sheet,
  .expense-revision-modal-sheet {
    width: 100%;
    max-height: 100dvh;
  }

  .expense-edit-context {
    align-items: flex-start;
    flex-direction: column;
  }

  .expense-edit-context span {
    text-align: left;
  }

  .expense-edit-court-rate-row {
    grid-template-columns: 1fr 1fr 1fr 44px;
  }

  .expense-edit-shuttle-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  }

  .expense-edit-shuttle-owner,
  .expense-edit-shuttle-payer-field {
    grid-column: 1 / -1;
  }

  .expense-edit-shuttle-row .expense-edit-row-remove {
    grid-column: 3;
  }

  .expense-edit-preview {
    grid-template-columns: 1fr;
  }

  .expense-revision-compare {
    grid-template-columns: 1fr;
  }

  .expense-edit-footer .btn {
    flex: 1;
  }
}

@media (max-width: 390px) {
  .expense-edit-court-rate-row {
    grid-template-columns: 1fr 1fr 32px;
  }

  .expense-edit-court-rate-row label:last-of-type {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .expense-edit-court-rate-row .expense-edit-row-remove {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: stretch;
    height: auto;
  }
}

/* Compact Session history detail: keep the scan path short on mobile while
   preserving full match and expense details behind native disclosures. */
.session-detail-view {
  gap: 10px;
}

.session-detail-nav {
  margin-bottom: 0;
}

.session-detail-back-btn {
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 10px;
}

.session-detail-hero {
  position: relative;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(20, 184, 166, .055);
  box-shadow: none;
}

.session-detail-title-wrap {
  width: 100%;
  padding-right: 82px;
  text-align: left;
}

.session-detail-hero .session-status-mini {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0 !important;
}

.session-detail-title {
  font-size: 17px;
  line-height: 1.35;
}

.session-detail-kicker {
  gap: 5px;
  margin-bottom: 2px;
}

.session-detail-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border-radius: 12px;
}

.session-detail-tab {
  min-height: 38px;
  padding: 7px 10px;
}

.session-detail-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 0 2px !important;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
}

.session-detail-summary-grid > div,
.session-detail-summary-grid > div:first-child {
  grid-column: auto;
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset -1px 0 0 var(--border) !important;
}

.session-detail-summary-grid > div:last-child {
  box-shadow: none !important;
}

.session-detail-summary-grid span {
  font-size: 10.5px;
  line-height: 1.35;
}

.session-detail-summary-grid strong {
  font-size: 13.5px;
  line-height: 1.35;
}

.session-detail-view .compact-section {
  margin: 0 !important;
  padding: 10px 0 !important;
}

.session-detail-view .session-player-section {
  padding-top: 5px !important;
  border-top: 0 !important;
}

.session-detail-view .session-expense-section {
  border-top: 0 !important;
}

.session-player-section-head {
  align-items: center;
  gap: 10px;
}

.session-section-count {
  display: inline-flex;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(100, 116, 139, .09);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}

.session-reuse-hint {
  max-width: 560px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.45;
}

.session-reuse-hint.is-blocked {
  color: var(--muted);
}

.session-reuse-checkin-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  white-space: nowrap;
}

.session-reuse-checkin-btn .material-symbols-outlined {
  font-size: 18px;
}

.session-reuse-checkin-btn:disabled {
  border-color: var(--border);
  background: rgba(100, 116, 139, .07);
  color: var(--muted);
  opacity: 1;
}

.session-detail-disclosure {
  margin: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.session-detail-disclosure-summary,
.session-expense-disclosure > .session-expense-head {
  list-style: none;
  cursor: pointer;
}

.session-detail-disclosure-summary::-webkit-details-marker,
.session-expense-disclosure > .session-expense-head::-webkit-details-marker {
  display: none;
}

.session-detail-disclosure-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 850;
}

.session-detail-disclosure-meta,
.session-expense-summary-side {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.session-detail-disclosure-meta {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
}

.session-disclosure-chevron {
  font-size: 18px;
}

details[open] > summary .session-disclosure-chevron {
  transform: rotate(180deg);
}

.session-detail-disclosure-body {
  padding: 2px 0 10px;
}

.session-expense-card.session-expense-disclosure {
  padding: 11px;
  border-radius: 14px;
  box-shadow: none;
}

.session-expense-disclosure > .session-expense-head {
  align-items: center;
  margin: 0;
}

.session-expense-disclosure-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.session-detail-actions {
  margin-top: 2px;
}

html[data-theme="dark"] .session-detail-hero {
  background: rgba(45, 212, 191, .075);
}

@media (max-width: 680px) {
  .session-detail-hero {
    align-items: flex-start;
    flex-direction: row;
  }

  .session-detail-title-wrap {
    padding-right: 76px;
  }

  .session-detail-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .session-detail-summary-grid > div,
  .session-detail-summary-grid > div:first-child {
    grid-column: auto;
    min-height: 50px;
  }

  .session-detail-summary-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .session-detail-summary-grid > div:nth-child(2n + 1) {
    box-shadow: none !important;
  }

  .session-player-section-head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .session-reuse-checkin-btn {
    align-self: stretch;
    width: 100%;
  }

  .session-expense-head {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  .session-expense-total {
    text-align: right;
  }
}

@media (max-width: 420px) {
  .session-detail-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .session-detail-summary-grid > div:first-child {
    grid-column: 1 / -1;
  }
}
.subscription-expiry-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.subscription-expiry-actions .btn {
  min-height: 44px;
}

.subscription-renewal-sheet {
  width: min(920px, calc(100vw - 32px));
  max-height: min(860px, calc(100dvh - 32px));
  overflow-y: auto;
}

.subscription-renewal-body {
  position: relative;
  display: grid;
  gap: 18px;
}

.subscription-renewal-body.is-verifying {
  overflow: hidden !important;
}

.subscription-verification-focus-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: rgba(3, 7, 18, .82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.subscription-verification-focus-overlay[hidden] {
  display: none !important;
}

.subscription-verification-focus-panel {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 320px);
  padding: 28px 24px 24px;
  border: 1px solid rgba(94, 234, 212, .38);
  border-radius: 24px;
  background: rgba(15, 23, 42, .96);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .32);
  color: #f8fafc;
  text-align: center;
}

.subscription-verification-focus-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(94, 234, 212, .42);
  border-radius: 16px;
  background: rgba(20, 184, 166, .16);
  color: #5eead4;
  font-size: 26px;
  animation: subscription-spin 1s linear infinite;
}

.subscription-verification-focus-panel strong {
  font-size: 16px;
  line-height: 1.4;
}

.subscription-verification-focus-percent {
  color: #5eead4;
  font-size: clamp(40px, 10vw, 58px);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.subscription-verification-focus-panel small {
  max-width: 250px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.55;
}

.subscription-verification-focus-track {
  width: 100%;
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .28);
}

.subscription-verification-focus-fill {
  display: block;
  width: var(--verification-focus-progress, 42%);
  height: 100%;
  border-radius: inherit;
  background: #2dd4bf;
  animation: subscription-progress 1.2s ease-in-out infinite;
}

.subscription-verification-focus-overlay.is-active[aria-valuenow] .subscription-verification-focus-fill {
  animation: none;
}

.subscription-renewal-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 2px;
}

.subscription-step {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  background: var(--bg3);
}

button.subscription-step {
  appearance: none;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: default;
}

button.subscription-step.is-actionable {
  cursor: pointer;
}

button.subscription-step.is-actionable:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 12%, transparent);
}

button.subscription-step:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}

button.subscription-step:disabled {
  cursor: default;
  opacity: .78;
}

.subscription-step.is-active,
.subscription-step.is-complete {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.subscription-step-index {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--card);
  font-size: 12px;
  font-weight: 900;
}

.subscription-step.is-active .subscription-step-index,
.subscription-step.is-complete .subscription-step-index {
  color: #fff;
  background: var(--accent);
}

.subscription-step-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.subscription-step-copy strong,
.subscription-step-copy small {
  overflow-wrap: anywhere;
}

.subscription-step-copy small {
  color: var(--muted);
  font-size: 11px;
}

.subscription-selection-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.subscription-plan-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.subscription-plan-selection {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.subscription-plan-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.subscription-plan-option::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 4px var(--card);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.subscription-plan-option strong {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.subscription-plan-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.subscription-plan-option:has(input:checked)::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 5px var(--card);
}

.subscription-plan-option:has(input:checked) .subscription-plan-copy strong {
  color: var(--accent);
}

.subscription-plan-option:has(input:checked) .subscription-plan-price {
  color: var(--accent);
}

.subscription-plan-option:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  transform: translateY(-1px);
}

.subscription-plan-option:focus-within {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 2px;
}

.subscription-plan-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .subscription-plan-option,
  .subscription-plan-option::before {
    transition: none;
  }

  .subscription-plan-option:hover {
    transform: none;
  }
}

.subscription-plan-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.subscription-plan-copy small,
.subscription-promo-field small {
  color: var(--muted);
}

.subscription-plan-price {
  display: grid;
  justify-items: end;
  gap: 1px;
  min-width: max-content;
  white-space: nowrap;
  color: var(--accent);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  text-align: right;
}

.subscription-plan-price-current {
  font-size: inherit;
  font-weight: inherit;
}

.subscription-plan-price-compare {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.subscription-plan-price-saving {
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  font-size: 10px;
  font-weight: 900;
  line-height: 1.35;
}

.subscription-plan-option:has(input:checked) .subscription-plan-price-compare {
  color: var(--muted);
}

.subscription-promo-collapse {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.subscription-promo-collapse.is-expanded {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.subscription-promo-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  user-select: none;
  appearance: none;
  touch-action: manipulation;
}

.subscription-promo-summary:active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

@media (max-width: 720px) {
  .subscription-promo-summary {
    min-height: 48px;
    padding: 12px 14px;
  }
}

.subscription-promo-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.subscription-promo-summary-label .material-symbols-outlined {
  font-size: 18px;
  color: var(--accent);
}

.subscription-promo-summary-label small {
  color: var(--muted);
  font-weight: 500;
}

.subscription-promo-arrow {
  font-size: 20px;
  color: var(--muted);
  transition: transform 180ms ease;
}

.subscription-promo-collapse.is-expanded .subscription-promo-arrow {
  transform: rotate(180deg);
}

.subscription-promo-collapse .subscription-promo-field {
  padding: 0 14px 14px;
}

.subscription-promo-field {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.subscription-promo-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.subscription-promo-input-row .btn {
  min-width: 104px;
  min-height: 46px;
  white-space: nowrap;
}

.subscription-promo-feedback {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.subscription-promo-feedback[hidden] {
  display: none;
}

.subscription-promo-feedback.is-success {
  color: var(--accent);
}

.subscription-promo-feedback.is-error {
  color: var(--danger, #b42318);
}

.subscription-plan-price-promo-compare,
.subscription-plan-price-promo-saving {
  display: block;
}

.subscription-plan-price-promo-compare[hidden],
.subscription-plan-price-promo-saving[hidden],
.subscription-plan-price-annual-compare[hidden],
.subscription-plan-price-annual-saving[hidden] {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.subscription-promo-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  box-sizing: border-box;
}

.subscription-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.subscription-qr-panel,
.subscription-order-summary,
.subscription-evidence-panel,
.subscription-payment-history {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}

.subscription-qr-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 280px);
  aspect-ratio: 1;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: var(--bg3);
  overflow: hidden;
}

.subscription-qr-expired-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  text-align: center;
  border-radius: inherit;
  z-index: 5;
  transition: opacity 180ms ease;
}

.subscription-qr-expired-overlay.hidden,
.subscription-qr-expired-overlay[hidden] {
  display: none !important;
}

.subscription-qr-expired-overlay .material-symbols-outlined {
  font-size: 36px;
  color: #f87171;
}

.subscription-qr-expired-overlay strong {
  font-size: 15px;
  font-weight: 750;
  color: #fff;
}

.subscription-qr-expired-overlay small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
}

.subscription-qr-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.subscription-qr-placeholder {
  color: var(--muted);
  font-size: 72px;
}

.subscription-qr-frame img:not([hidden]) + .subscription-qr-placeholder {
  display: none;
}

.subscription-qr-brand-header,
.subscription-qr-brand-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.subscription-qr-brand-header {
  justify-content: center;
  min-height: 34px;
  margin: -2px 0 12px;
}

.subscription-qr-brand-header img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.subscription-qr-brand-header .qbad-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -.02em;
}

.subscription-qr-brand-header .qbad-word {
  color: var(--text);
}

.subscription-qr-brand-header .qbad-pro {
  color: var(--accent);
}

.subscription-download-qr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin: 0 auto 12px;
}

.subscription-download-qr-btn .material-symbols-outlined {
  font-size: 18px;
}

.subscription-download-qr-btn:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.subscription-download-qr-btn.is-expired:disabled {
  border-color: color-mix(in srgb, #f59e0b 32%, var(--border));
  background: color-mix(in srgb, #f59e0b 8%, var(--card));
  color: #a16207;
  opacity: 1;
}

html[data-theme="dark"] .subscription-download-qr-btn.is-expired:disabled {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.subscription-qr-brand-footer {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.subscription-qr-brand-footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-weight: 750;
}

.subscription-qr-brand-footer-mark img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.subscription-verification-status,
.subscription-summary-empty {
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
}

.subscription-verification-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg3);
  transition: color 180ms ease, background 180ms ease;
}

.subscription-verification-status.is-processing,
.subscription-verification-status.is-pending {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg3));
}

.subscription-verification-status.is-processing::before {
  content: "sync";
  display: inline-block;
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  animation: subscription-spin 1s linear infinite;
}

.subscription-verification-status.is-success {
  color: #047857;
  background: rgba(20, 184, 166, .10);
}

.subscription-verification-status.is-error {
  color: #b42318;
  background: rgba(239, 68, 68, .08);
}

.subscription-verification-progress {
  width: min(100%, 280px);
  height: 4px;
  margin: -4px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 20%, transparent);
}

.subscription-verification-progress[hidden] {
  display: none;
}

.subscription-verification-progress-bar {
  display: block;
  width: var(--verification-progress, 42%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  animation: subscription-progress 1.2s ease-in-out infinite;
}

.subscription-verification-progress.is-determinate .subscription-verification-progress-bar {
  animation: none;
}

#subscription-upload-slip-btn.is-loading {
  cursor: wait;
  opacity: .82;
}

#subscription-upload-slip-btn[aria-busy="true"]::before {
  content: "sync";
  display: inline-block;
  margin-right: 6px;
  font-family: "Material Symbols Outlined";
  vertical-align: -3px;
  animation: subscription-spin 1s linear infinite;
}

.subscription-history-status[data-live="true"]::before {
  content: "sync";
  display: inline-block;
  margin-right: 4px;
  font-family: "Material Symbols Outlined";
  font-size: 14px;
  vertical-align: -2px;
  animation: subscription-spin 1s linear infinite;
}

@keyframes subscription-progress {
  0% { transform: translateX(-140%); }
  100% { transform: translateX(300%); }
}

@keyframes subscription-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-verification-progress-bar,
  .subscription-verification-status.is-processing::before,
  .subscription-verification-focus-icon,
  .subscription-verification-focus-fill,
  #subscription-upload-slip-btn[aria-busy="true"]::before,
  .subscription-history-status[data-live="true"]::before {
    animation: none;
  }

  .subscription-package-details > summary::after {
    transition: none;
  }

  .subscription-promo-summary,
  .subscription-promo-arrow,
  .subscription-qr-expired-overlay {
    transition: none;
  }
}

.subscription-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.subscription-package-details {
  margin: -2px 0 4px;
  border-bottom: 1px solid var(--border);
}

.subscription-package-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.subscription-package-details > summary::-webkit-details-marker {
  display: none;
}

.subscription-package-details > summary::after {
  content: "expand_more";
  flex: 0 0 auto;
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: var(--muted);
  transition: transform 180ms ease;
}

.subscription-package-details[open] > summary::after {
  transform: rotate(180deg);
}

.subscription-package-details > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 3px;
  border-radius: 8px;
}

.subscription-promo-summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: -2px;
}

.subscription-package-details > summary .material-symbols-outlined {
  display: none;
}

.subscription-package-details .subscription-summary-row:first-of-type {
  padding-top: 4px;
}

.subscription-summary-row.discount strong {
  color: var(--ready);
}

.subscription-summary-row.total {
  margin-top: 6px;
  border-bottom: 0;
  font-size: 18px;
}

.subscription-summary-row.total strong {
  color: var(--accent);
  font-size: 23px;
}

.subscription-order-reference {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg3);
  overflow-wrap: anywhere;
}

.subscription-order-reference span {
  color: var(--muted);
  font-size: 12px;
}

.subscription-order-state {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.subscription-order-state[data-tone="success"] {
  border-color: color-mix(in srgb, #10b981 28%, var(--border));
  background: color-mix(in srgb, #10b981 7%, var(--card));
}

.subscription-order-state[data-tone="danger"] {
  border-color: color-mix(in srgb, #ef4444 28%, var(--border));
  background: color-mix(in srgb, #ef4444 6%, var(--card));
}

.subscription-order-state-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
}

.subscription-order-state-heading .material-symbols-outlined {
  color: var(--accent);
  font-size: 18px;
}

.subscription-order-state[data-tone="success"] .subscription-order-state-heading .material-symbols-outlined {
  color: #047857;
}

.subscription-order-state[data-tone="danger"] .subscription-order-state-heading .material-symbols-outlined {
  color: #b42318;
}

.subscription-order-state-detail,
.subscription-order-state-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.subscription-order-state-meta {
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
}

.subscription-qr-countdown-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 12px;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, #f59e0b 28%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 10%, var(--card));
  color: color-mix(in srgb, var(--text) 88%, #92400e);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
  transition: all 180ms ease;
}

.subscription-qr-countdown-box.hidden,
.subscription-qr-countdown-box[hidden] {
  display: none !important;
}

.subscription-qr-countdown-box .material-symbols-outlined {
  font-size: 16px;
  color: #b45309;
}

.subscription-qr-countdown-box strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--text);
}

.subscription-qr-countdown-box strong.is-expired {
  color: #b45309;
}

html[data-theme="dark"] .subscription-qr-countdown-box {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .subscription-qr-countdown-box .material-symbols-outlined {
  color: #fbbf24;
}

html[data-theme="dark"] .subscription-qr-countdown-box strong {
  color: #fef3c7;
}

.subscription-order-deadline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #f59e0b 24%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, #f59e0b 7%, var(--card));
  color: color-mix(in srgb, var(--text) 86%, #92400e);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.subscription-order-deadline > .material-symbols-outlined {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #b45309;
  font-size: 18px;
}

.subscription-order-deadline small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.subscription-order-deadline-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  width: 100%;
}

.subscription-countdown-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.subscription-countdown-row strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}

.subscription-countdown-row strong.is-expired {
  color: #b45309;
}

.subscription-evidence-panel {
  display: grid;
  gap: 10px;
}

.subscription-evidence-uploader {
  display: grid;
  gap: 10px;
}

.subscription-evidence-uploader[hidden],
.subscription-evidence-progress-card[hidden],
.subscription-evidence-retry[hidden] {
  display: none !important;
}

.subscription-evidence-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.subscription-evidence-header label {
  margin: 0;
  font-weight: 750;
  color: var(--text);
}

.subscription-evidence-deadline-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, #f59e0b 26%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 8%, var(--card));
  color: color-mix(in srgb, var(--text) 88%, #92400e);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.06);
}

.subscription-evidence-deadline-badge.hidden,
.subscription-evidence-deadline-badge[hidden] {
  display: none !important;
}

.subscription-evidence-deadline-badge .material-symbols-outlined {
  font-size: 14px;
  color: #b45309;
}

.subscription-evidence-deadline-badge strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--text);
}

.subscription-evidence-deadline-badge strong.is-expired {
  color: #b45309;
}

html[data-theme="dark"] .subscription-evidence-deadline-badge {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

html[data-theme="dark"] .subscription-evidence-deadline-badge .material-symbols-outlined {
  color: #fbbf24;
}

html[data-theme="dark"] .subscription-evidence-deadline-badge strong {
  color: #fef3c7;
}

.subscription-slip-dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  width: 100%;
  padding: 14px 16px;
  border: 2px dashed color-mix(in srgb, var(--primary, var(--accent, #00a884)) 42%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary, var(--accent, #00a884)) 5%, var(--bg3, #eef4ff));
  color: var(--fg, var(--text, #1f2937));
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.subscription-slip-dropzone:hover,
.subscription-slip-dropzone.is-dragover {
  border-color: var(--primary, var(--accent, #00a884));
  background: color-mix(in srgb, var(--primary, var(--accent, #00a884)) 12%, var(--bg3, #eef4ff));
}

.subscription-slip-dropzone:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary, var(--accent, #00a884)) 28%, transparent);
  outline-offset: 2px;
}

.subscription-slip-dropzone.is-disabled {
  cursor: not-allowed;
  opacity: .58;
}

.subscription-slip-dropzone-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid color-mix(in srgb, var(--primary, var(--accent, #00a884)) 22%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary, var(--accent, #00a884)) 10%, var(--card, #fff));
  color: var(--primary, var(--accent, #00a884));
  font-size: 23px;
}

.subscription-slip-dropzone-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.subscription-slip-dropzone-copy strong {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.subscription-slip-dropzone-link {
  color: var(--primary, var(--accent, #00a884));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.subscription-slip-dropzone-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.subscription-slip-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.subscription-evidence-notice {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.subscription-evidence-progress-card {
  display: grid;
  gap: 14px;
  min-height: 152px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

.subscription-evidence-progress-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.subscription-evidence-progress-head > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.subscription-evidence-progress-head strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}

.subscription-evidence-progress-head small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.subscription-evidence-progress-percent {
  margin-left: 6px;
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.subscription-evidence-progress-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 15%, var(--card));
  color: var(--accent);
  font-size: 23px;
  animation: subscription-spin 1s linear infinite;
}

.subscription-evidence-progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--border));
}

.subscription-evidence-progress-fill {
  display: block;
  width: var(--evidence-progress, 42%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  animation: subscription-progress 1.2s ease-in-out infinite;
}

.subscription-evidence-progress-card.is-determinate .subscription-evidence-progress-fill {
  animation: none;
}

.subscription-evidence-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.subscription-evidence-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--card);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.subscription-evidence-step .material-symbols-outlined {
  font-size: 17px;
}

.subscription-evidence-step.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
}

.subscription-evidence-step.is-complete {
  border-color: color-mix(in srgb, #10b981 36%, var(--border));
  background: color-mix(in srgb, #10b981 9%, var(--card));
  color: #047857;
}

.subscription-evidence-progress-card[data-state="pending"] {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--border));
  background: color-mix(in srgb, #f59e0b 7%, var(--card));
}

.subscription-evidence-progress-card[data-state="pending"] .subscription-evidence-progress-icon {
  background: color-mix(in srgb, #f59e0b 14%, var(--card));
  color: #b45309;
  animation: none;
}

.subscription-evidence-progress-card[data-state="pending"] .subscription-evidence-progress-fill {
  background: #f59e0b;
}

.subscription-evidence-progress-card[data-state="success"] {
  border-color: color-mix(in srgb, #10b981 36%, var(--border));
  background: color-mix(in srgb, #10b981 8%, var(--card));
}

.subscription-evidence-progress-card[data-state="success"] .subscription-evidence-progress-icon {
  background: color-mix(in srgb, #10b981 14%, var(--card));
  color: #047857;
  animation: none;
}

.subscription-evidence-progress-card[data-state="success"] .subscription-evidence-progress-track {
  background: color-mix(in srgb, #10b981 18%, var(--border));
}

.subscription-evidence-progress-card[data-state="success"] .subscription-evidence-progress-fill {
  width: 100%;
  background: #10b981;
  animation: none;
}

.subscription-evidence-retry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, #ef4444 30%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, #ef4444 7%, var(--card));
  color: #b42318;
}

.subscription-evidence-retry > .material-symbols-outlined {
  margin-top: 1px;
  font-size: 20px;
}

.subscription-evidence-retry > span:last-child {
  display: grid;
  gap: 2px;
}

.subscription-evidence-retry strong {
  font-size: 12.5px;
  line-height: 1.4;
}

.subscription-evidence-retry small {
  color: color-mix(in srgb, #b42318 72%, var(--muted));
  font-size: 11.5px;
  line-height: 1.5;
}

html[data-theme="dark"] .subscription-evidence-step.is-complete,
html[data-theme="dark"] .subscription-evidence-progress-card[data-state="success"] .subscription-evidence-progress-icon {
  color: #6ee7b7;
}

html[data-theme="dark"] .subscription-evidence-retry,
html[data-theme="dark"] .subscription-evidence-retry small {
  color: #fca5a5;
}

#subscription-slip-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card, #fff);
}

#subscription-slip-preview:empty {
  display: none;
}

#subscription-slip-preview img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
}

#subscription-slip-preview .subscription-slip-preview-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#subscription-slip-preview .subscription-slip-preview-copy strong,
#subscription-slip-preview .subscription-slip-preview-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#subscription-slip-preview .subscription-slip-preview-copy strong {
  font-size: 13px;
  color: var(--fg, var(--text, #1f2937));
}

#subscription-slip-preview .subscription-slip-preview-copy span {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 420px) {
  .subscription-slip-dropzone {
    gap: 10px;
    min-height: 68px;
    padding: 12px;
  }

  .subscription-slip-dropzone-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 21px;
  }

  #subscription-slip-preview {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 10px;
  }

  #subscription-slip-preview img {
    width: 56px;
    height: 56px;
  }

  .subscription-evidence-progress-card {
    min-height: 144px;
    padding: 14px;
  }

  .subscription-evidence-step {
    min-height: 44px;
    padding-inline: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-slip-dropzone,
  .subscription-evidence-step,
  .subscription-verification-focus-icon,
  .subscription-verification-focus-fill {
    transition: none;
  }

  .subscription-evidence-progress-fill,
  .subscription-evidence-progress-icon {
    animation: none;
  }
}

.subscription-history-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.subscription-history-row:last-child {
  border-bottom: 0;
}

.subscription-history-row div {
  display: grid;
  gap: 3px;
}

.subscription-history-row div:last-child {
  text-align: right;
}

.subscription-history-row span {
  color: var(--muted);
  font-size: 12px;
}

.subscription-renewal-footer {
  position: static;
  display: grid;
  justify-items: stretch;
  gap: 10px;
  margin-top: 2px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  background: linear-gradient(180deg, transparent, var(--card) 24%);
}

.subscription-renewal-footer .btn {
  min-height: 46px;
}

.subscription-messenger-link {
  justify-self: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.subscription-messenger-link:hover,
.subscription-messenger-link:focus-visible {
  color: var(--accent);
}

@media (max-width: 720px) {
  .subscription-renewal-sheet {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 22px 22px 0 0;
  }

  .subscription-plan-list,
  .subscription-checkout-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .subscription-plan-option {
    padding: 14px;
  }

  .subscription-promo-input-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .subscription-promo-input-row .btn {
    width: 100%;
  }

  .subscription-renewal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    position: static;
  }

  .subscription-renewal-footer .btn {
    width: 100%;
  }
}

/* Mobile subscription actions: keep the two account actions side-by-side
   instead of letting long Thai labels wrap unpredictably in flex rows. */
.subscription-history-card-actions {
  touch-action: manipulation;
}

@media (max-width: 560px) {
  #settings-panel-account .subscription-expiry-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-content: initial;
    width: 100%;
    gap: 8px;
  }

  #settings-panel-account .subscription-expiry-actions .subscription-history-action,
  #settings-panel-account .subscription-expiry-actions .subscription-renew-action {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 8px;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
}

@media (max-width: 720px) {
  #subscription-payment-history-modal .subscription-history-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
    gap: 8px;
  }

  #subscription-payment-history-modal .subscription-history-card-actions > :only-child {
    grid-column: 1 / -1;
  }

  #subscription-payment-history-modal .subscription-history-card-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 8px;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
}

@media (max-width: 340px) {
  #settings-panel-account .subscription-expiry-actions,
  #subscription-payment-history-modal .subscription-history-card-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .subscription-renewal-progress {
    grid-template-columns: minmax(0, 1fr);
  }

  .subscription-plan-option {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .subscription-plan-price {
    grid-column: 2;
    justify-self: start;
    justify-items: start;
    margin-top: -4px;
    font-size: 18px;
    text-align: left;
  }
}

/* Subscription history: compact account action, status-first cards, and a
   dedicated evidence viewer. */
#settings-panel-account .subscription-expiry-actions {
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
}

#settings-panel-account .subscription-expiry-actions .btn {
  width: auto;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

#settings-panel-subscription-history .settings-panel-head {
  margin-bottom: 14px;
}

#settings-panel-subscription-history .subscription-payment-history {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.subscription-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 4px 14px rgba(31, 41, 55, .035);
}

.subscription-history-card-main,
.subscription-history-card-side,
.subscription-history-card-heading,
.subscription-history-card-meta {
  min-width: 0;
}

.subscription-history-card-main,
.subscription-history-card-side {
  display: grid;
  gap: 6px;
}

.subscription-history-card-side {
  justify-items: end;
  text-align: right;
}

.subscription-history-card-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.subscription-history-card-heading strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.subscription-history-card-heading span,
.subscription-history-card-meta,
.subscription-history-card-meta span {
  color: var(--muted);
  font-size: 11.5px;
}

.subscription-history-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.subscription-history-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.subscription-history-card-meta .material-symbols-outlined {
  font-size: 15px;
  color: color-mix(in srgb, var(--muted) 82%, var(--accent));
}

.subscription-history-amount {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.subscription-history-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--muted) 24%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.subscription-history-status[data-tone="success"] {
  color: #0f766e;
  border-color: rgba(20, 184, 166, .24);
  background: rgba(20, 184, 166, .10);
}

.subscription-history-status[data-tone="danger"] {
  color: #b42318;
  border-color: rgba(239, 68, 68, .24);
  background: rgba(239, 68, 68, .08);
}

.subscription-history-evidence-btn {
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 9px;
  font-size: 11.5px;
  box-shadow: none;
}

.subscription-history-evidence-btn[aria-busy="true"] {
  cursor: wait;
  opacity: .6;
}

.subscription-history-empty,
.subscription-history-error {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 32px 20px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
}

.subscription-history-empty .material-symbols-outlined,
.subscription-history-error .material-symbols-outlined {
  margin-bottom: 3px;
  color: color-mix(in srgb, var(--accent) 72%, var(--muted));
  font-size: 28px;
}

.subscription-history-empty strong,
.subscription-history-error strong {
  color: var(--text);
  font-size: 13px;
}

.subscription-history-empty small,
.subscription-history-error small {
  font-size: 11.5px;
}

.subscription-history-error {
  border-color: rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .06);
}

.subscription-history-error .material-symbols-outlined {
  color: #b45309;
}

.subscription-history-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  min-height: 34px;
  padding: 6px 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.subscription-history-link:hover,
.subscription-history-link:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

.subscription-history-link .material-symbols-outlined {
  font-size: 17px;
}

.subscription-slip-viewer-sheet {
  width: min(720px, calc(100vw - 28px));
  max-width: 720px;
  max-height: min(860px, calc(100dvh - 32px));
  overflow: hidden;
}

.subscription-slip-viewer-body {
  display: grid;
  gap: 14px;
  min-height: 180px;
  overflow: auto;
}

.subscription-slip-viewer-feedback {
  min-height: 22px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.subscription-slip-viewer-feedback.is-loading {
  color: var(--accent);
}

.subscription-slip-viewer-feedback.is-error {
  color: #b42318;
}

.subscription-slip-viewer-frame {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg3);
}

.subscription-slip-viewer-frame.is-loading {
  min-height: 260px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--bg3)), var(--bg3));
}

.subscription-slip-viewer-frame.is-error {
  min-height: 220px;
  border-color: color-mix(in srgb, #b42318 26%, var(--border));
  background: color-mix(in srgb, #fff1f0 58%, var(--bg3));
}

.subscription-slip-viewer-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 280px;
  padding: 24px 18px;
  color: var(--muted);
  text-align: center;
}

.subscription-slip-viewer-state[hidden] {
  display: none;
}

.subscription-slip-viewer-state-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  color: var(--accent);
  font-size: 25px;
}

.subscription-slip-viewer-frame.is-loading .subscription-slip-viewer-state-icon {
  animation: subscription-slip-viewer-spin 1.1s linear infinite;
}

.subscription-slip-viewer-frame.is-error .subscription-slip-viewer-state-icon {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b42318;
}

.subscription-slip-viewer-state strong {
  color: var(--text);
  font-size: 14px;
}

.subscription-slip-viewer-state small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

@keyframes subscription-slip-viewer-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-slip-viewer-frame.is-loading .subscription-slip-viewer-state-icon {
    animation: none;
  }
}

.subscription-slip-viewer-frame img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(68dvh, 680px);
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}

@media (max-width: 720px) {
  #settings-panel-account .subscription-expiry-actions {
    grid-column: 2;
  }

  .subscription-history-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }

  .subscription-history-card-side {
    grid-template-columns: auto auto;
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  .subscription-history-card-side .subscription-history-amount {
    grid-column: 1;
  }

  .subscription-history-card-side .subscription-history-status {
    grid-column: 2;
    justify-self: end;
  }

  .subscription-history-card-side .subscription-history-evidence-btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .subscription-slip-viewer-body {
    padding: 16px;
  }
}

/* Account-owned subscription history: one compact entry point, with a
   readable modal on desktop and a full-width sheet on small screens. */
#settings-panel-account .subscription-expiry-card {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px 16px;
  min-height: 0;
  padding: 14px 16px !important;
}

#settings-panel-account .subscription-expiry-head {
  grid-column: 1;
  grid-row: 1;
}

#settings-panel-account .subscription-expiry-grid {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}

#settings-panel-account .subscription-expiry-actions {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

#settings-panel-account .subscription-expiry-actions .btn {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
  padding: 9px 13px;
  border-radius: 11px;
  font-size: 12px;
  box-shadow: none;
}

#settings-panel-account .subscription-history-open-btn {
  color: var(--text);
  background: var(--card);
  border-color: var(--border);
}

#settings-panel-account .subscription-history-open-btn:hover,
#settings-panel-account .subscription-history-open-btn:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

#settings-panel-account .subscription-history-open-btn .material-symbols-outlined,
#settings-panel-account #subscription-renew-btn .material-symbols-outlined {
  font-size: 17px;
}

#subscription-payment-history-modal.modal-backdrop {
  z-index: 10140 !important;
  align-items: center;
  padding: 16px;
  pointer-events: auto;
}

#subscription-payment-history-modal .subscription-payment-history-modal-sheet {
  position: relative;
  z-index: 10141;
  pointer-events: auto;
}

#subscription-slip-viewer-modal.modal-backdrop {
  z-index: 10160 !important;
  pointer-events: auto;
}

#subscription-slip-viewer-modal .subscription-slip-viewer-sheet {
  position: relative;
  z-index: 10161;
  pointer-events: auto;
}

#subscription-verification-alert-modal.modal-backdrop {
  z-index: 10180 !important;
  pointer-events: auto;
}

#subscription-verification-alert-modal .subscription-verification-alert-sheet {
  position: relative;
  z-index: 10181;
  width: min(100%, 440px) !important;
  max-width: 440px !important;
  pointer-events: auto;
}

.subscription-verification-alert-body {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 24px !important;
  text-align: center;
}

.subscription-verification-alert-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(239, 68, 68, .28);
  border-radius: 16px;
  color: #b42318;
  background: rgba(239, 68, 68, .10);
}

.subscription-verification-alert-icon .material-symbols-outlined {
  font-size: 28px;
}

.subscription-verification-alert-body p {
  max-width: 34rem;
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

.subscription-verification-alert-body .btn {
  width: min(100%, 220px);
  min-height: 44px;
}

#subscription-payment-history-modal .subscription-payment-history-modal-sheet {
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: 760px !important;
  max-height: min(780px, calc(100dvh - 32px)) !important;
  border-radius: 24px !important;
  background: var(--card, #ffffff);
  border: 1px solid var(--border);
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#subscription-payment-history-modal .subscription-payment-history-modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: linear-gradient(180deg, var(--bg2, #ffffff) 0%, color-mix(in srgb, var(--bg, #f7f9fc) 50%, var(--bg2, #ffffff)) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.subscription-payment-history-modal-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.subscription-payment-history-modal-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(0, 168, 132, 0.10);
  border: 1px solid rgba(0, 168, 132, 0.22);
  color: var(--accent, #00a884);
  flex-shrink: 0;
}

.subscription-payment-history-modal-icon .material-symbols-outlined {
  font-size: 24px;
}

#subscription-payment-history-modal .modal-title {
  font-size: 18px;
  font-weight: 850;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.3;
}

#subscription-payment-history-modal .modal-subtitle {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.4;
}

#subscription-payment-history-modal .subscription-payment-history-modal-body {
  min-height: 0;
  max-height: none;
  padding: 20px 24px 24px !important;
  overflow: auto;
  scrollbar-gutter: stable;
}

#subscription-payment-history-modal #subscription-payment-history {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

#subscription-payment-history-modal .subscription-history-card {
  min-height: 82px;
}

#subscription-payment-history-modal .subscription-history-evidence-btn {
  min-height: 44px;
}

.subscription-history-loading,
.subscription-history-empty,
.subscription-history-error {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 180px;
  align-content: center;
  padding: 36px 20px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
  background: var(--card, #ffffff);
}

.subscription-history-state-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--bg3, #eef4ff);
  margin-bottom: 6px;
}

.subscription-history-loading .subscription-history-state-icon .material-symbols-outlined {
  color: var(--accent);
  font-size: 26px;
  animation: subscription-history-spin 1.1s linear infinite;
}

.subscription-history-empty .subscription-history-state-icon {
  background: rgba(0, 168, 132, 0.09);
  color: var(--accent);
}

.subscription-history-empty .subscription-history-state-icon .material-symbols-outlined {
  font-size: 26px;
  color: var(--accent);
}

.subscription-history-error {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.04);
}

.subscription-history-error .subscription-history-state-icon {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

.subscription-history-error .subscription-history-state-icon .material-symbols-outlined {
  font-size: 26px;
  color: #b45309;
}

.subscription-history-loading strong,
.subscription-history-empty strong,
.subscription-history-error strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.subscription-history-loading small,
.subscription-history-empty small,
.subscription-history-error small {
  font-size: 12px;
  color: var(--muted);
}

@keyframes subscription-history-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-history-loading .subscription-history-state-icon .material-symbols-outlined,
  .subscription-history-loading .material-symbols-outlined {
    animation: none;
  }
}

@media (max-width: 720px) {
  #subscription-payment-history-modal.modal-backdrop {
    padding: 12px;
  }

  #subscription-payment-history-modal .subscription-payment-history-modal-sheet {
    width: min(100%, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 20px !important;
  }

  #subscription-payment-history-modal .subscription-payment-history-modal-header {
    padding: 16px 18px 14px;
  }

  #subscription-payment-history-modal .subscription-payment-history-modal-body {
    padding: 14px 14px 20px !important;
  }
}

@media (max-width: 560px) {
  #settings-panel-account .subscription-expiry-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
  }

  #settings-panel-account .subscription-expiry-head,
  #settings-panel-account .subscription-expiry-grid,
  #settings-panel-account .subscription-expiry-actions {
    grid-column: 1;
  }

  #settings-panel-account .subscription-expiry-grid {
    grid-row: 2;
    justify-self: start;
    padding-left: 42px;
  }

  #settings-panel-account .subscription-expiry-actions {
    grid-row: 3;
    justify-content: stretch;
  }

  #settings-panel-account .subscription-expiry-actions .btn {
    flex: 1 1 160px;
  }
}

/* Subscription card action alignment: stable hierarchy with compact visual weight. */
.subscription-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 18px;
  background: var(--card, #ffffff);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.subscription-history-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.subscription-history-card[data-status="paid"],
.subscription-history-card[data-status="manual_accepted"] {
  border-left-color: var(--ready, #00a884);
}

.subscription-history-card[data-status="awaiting_evidence"],
.subscription-history-card[data-status="pending_verification"],
.subscription-history-card[data-status="uploaded"],
.subscription-history-card[data-status="retrying"] {
  border-left-color: #f59e0b;
}

.subscription-history-card[data-status="invalid"],
.subscription-history-card[data-status="amount_mismatch"],
.subscription-history-card[data-status="receiver_mismatch"],
.subscription-history-card[data-status="duplicate"],
.subscription-history-card[data-status="failed"],
.subscription-history-card[data-status="expired"],
.subscription-history-card[data-status="cancelled"],
.subscription-history-card[data-status="rejected"],
.subscription-history-card[data-status="provider_configuration_error"] {
  border-left-color: #f43f5e;
}

.subscription-history-card-header,
.subscription-history-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.subscription-history-card-header {
  justify-content: space-between;
}

.subscription-history-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.subscription-history-card-heading strong {
  color: var(--text);
  font-size: 15.5px;
  font-weight: 850;
  letter-spacing: -0.2px;
}

.subscription-history-duration {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 750;
  background: var(--bg3, #eef4ff);
  color: var(--accent, #00a884);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  letter-spacing: -0.1px;
}

.subscription-history-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--muted) 24%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  line-height: 1;
  flex: 0 0 auto;
  margin-left: auto;
  transition: all 0.2s ease;
}

.subscription-history-status-icon {
  font-size: 15px;
}

.subscription-history-status[data-tone="success"] {
  color: #0f766e;
  border-color: rgba(20, 184, 166, 0.32);
  background: rgba(20, 184, 166, 0.12);
}

.subscription-history-status[data-tone="danger"] {
  color: #e11d48;
  border-color: rgba(244, 63, 94, 0.28);
  background: rgba(244, 63, 94, 0.09);
}

.subscription-history-status[data-tone="pending"] {
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.11);
}

.subscription-history-status[data-live="true"] {
  position: relative;
}

.subscription-history-status[data-live="true"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 2px;
  animation: subscription-status-pulse 1.6s ease-in-out infinite;
}

@keyframes subscription-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.subscription-history-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 6px;
  margin: 2px 0;
  min-width: 0;
  width: 100%;
}

.subscription-history-meta-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 550;
  line-height: 1.4;
  width: fit-content;
}

.subscription-history-meta-item .material-symbols-outlined {
  font-size: 16px;
  color: color-mix(in srgb, var(--muted) 75%, var(--accent));
  flex-shrink: 0;
}

.subscription-history-meta-period {
  color: color-mix(in srgb, var(--text) 85%, var(--muted));
  font-weight: 600;
}

.subscription-history-meta-period .material-symbols-outlined {
  color: var(--ready, #00a884);
}

.subscription-history-deadline {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 650;
  background: rgba(245, 158, 11, 0.09);
  color: #b45309 !important;
  border: 1px solid rgba(245, 158, 11, 0.28);
  width: fit-content;
  margin-top: 3px;
}

.subscription-history-deadline .material-symbols-outlined {
  font-size: 16px;
  color: #d97706;
  flex-shrink: 0;
}

.subscription-history-deadline strong {
  font-weight: 850;
  color: #92400e;
}

.subscription-history-state-detail {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 6px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg3) 82%, var(--card));
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.subscription-history-state-detail small {
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
  font-size: 10.5px;
}

.subscription-history-state-detail .subscription-history-progress {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.subscription-history-state-detail[data-state="manual_review"] {
  color: #92400e;
  background: rgba(245, 158, 11, 0.09);
}

.subscription-history-state-detail[data-state="invalid"],
.subscription-history-state-detail[data-state="failed"],
.subscription-history-state-detail[data-state="provider_configuration_error"] {
  color: #9f1239;
  background: rgba(244, 63, 94, 0.07);
}

.subscription-history-card-footer {
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  gap: 12px;
}

.subscription-history-amount-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.subscription-history-amount-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}

.subscription-history-amount {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1.2;
  white-space: nowrap;
}

.subscription-history-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
  touch-action: manipulation;
}

.subscription-history-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 800;
  background: linear-gradient(135deg, #00a884 0%, #008f70 100%);
  color: #ffffff;
  border: 1px solid rgba(0, 168, 132, 0.3);
  box-shadow: 0 2px 8px rgba(0, 168, 132, 0.28);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.subscription-history-upload-btn:hover,
.subscription-history-upload-btn:focus-visible {
  background: linear-gradient(135deg, #02b790 0%, #009d7b 100%);
  box-shadow: 0 4px 14px rgba(0, 168, 132, 0.38);
  transform: translateY(-1px);
}

.subscription-history-upload-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 168, 132, 0.2);
}

.subscription-history-evidence-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 15px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 750;
  background: var(--bg3, #eef4ff);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.subscription-history-evidence-btn:hover,
.subscription-history-evidence-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg3));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.subscription-history-evidence-btn .material-symbols-outlined,
.subscription-history-upload-btn .material-symbols-outlined {
  font-size: 17px;
}

.subscription-history-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.subscription-history-cancel-btn > span:last-child {
  text-decoration: none;
}

.subscription-history-cancel-btn:hover,
.subscription-history-cancel-btn:focus-visible {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.08);
}

.subscription-history-cancel-btn .material-symbols-outlined {
  font-size: 16px;
  text-decoration: none;
}

#settings-panel-account .subscription-expiry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

#settings-panel-account .subscription-expiry-actions .subscription-history-action,
#settings-panel-account .subscription-expiry-actions .subscription-renew-action {
  flex: 0 0 auto;
}

#settings-panel-account .subscription-history-action {
  color: var(--text);
  background: var(--card);
  border-color: var(--border);
}

#settings-panel-account .subscription-history-action:hover,
#settings-panel-account .subscription-history-action:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}

#settings-panel-account .subscription-history-action .material-symbols-outlined,
#settings-panel-account .subscription-renew-action .material-symbols-outlined {
  font-size: 17px;
}

@media (max-width: 720px) {
  .subscription-history-card {
    gap: 11px;
    padding: 14px 16px;
  }

  .subscription-history-card-header {
    align-items: flex-start;
    gap: 10px;
  }

  .subscription-history-card-meta {
    gap: 7px;
  }

  .subscription-history-card-footer {
    flex-wrap: wrap;
  }

  #settings-panel-account .subscription-expiry-actions {
    justify-content: flex-start;
  }

  #settings-panel-account .subscription-expiry-actions .subscription-history-action,
  #settings-panel-account .subscription-expiry-actions .subscription-renew-action {
    flex: 0 0 auto;
  }
}

/* Account subscription actions: keep the two primary entry points in one
   compact row at every supported phone width. Grid prevents long Thai labels
   from forcing flex-wrap into a tall, scroll-heavy card. */
#settings-panel-account .subscription-expiry-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
  justify-content: initial;
  width: 100%;
  gap: 8px;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

#settings-panel-account .subscription-expiry-actions .subscription-history-action,
#settings-panel-account .subscription-expiry-actions .subscription-renew-action {
  width: 100% !important;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: none;
}

#settings-panel-account .subscription-expiry-actions .subscription-history-action:only-child,
#settings-panel-account .subscription-expiry-actions .subscription-renew-action:only-child {
  grid-column: 1 / -1;
}

#settings-panel-account .subscription-expiry-actions .material-symbols-outlined {
  font-size: 16px;
  vertical-align: -3px;
}

@media (max-width: 420px) {
  #settings-panel-account .subscription-expiry-card {
    gap: 8px;
    padding: 12px !important;
  }

  #settings-panel-account .subscription-expiry-actions {
    gap: 6px;
    padding-top: 8px;
  }

  #settings-panel-account .subscription-expiry-actions .subscription-history-action,
  #settings-panel-account .subscription-expiry-actions .subscription-renew-action {
    padding-inline: 6px;
    font-size: 11px;
  }
}

/* QBAD Pro CI — Passkey card only. Keep the rest of the application cascade unchanged. */
#settings-panel-account .passkey-card {
  --passkey-mint: #10bda5;
  --passkey-cyan: #59d7f1;
  --passkey-ink: #102533;
  border-color: rgba(16, 189, 165, .24);
  background: linear-gradient(135deg, rgba(16, 189, 165, .06), rgba(89, 215, 241, .05) 58%, #fff);
}

#settings-panel-account .passkey-card-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 16px;
}

#settings-panel-account .passkey-card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(16, 189, 165, .18);
  border-radius: 10px;
  color: var(--passkey-mint);
  background: linear-gradient(135deg, rgba(16, 189, 165, .13), rgba(89, 215, 241, .11));
}

#settings-panel-account .passkey-card-icon .material-symbols-outlined {
  font-size: 20px;
}

#settings-panel-account .passkey-card-copy strong {
  color: var(--passkey-ink);
  font-size: 13.5px;
  font-weight: 800;
}

#settings-panel-account .passkey-card-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
}

#settings-panel-account .passkey-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

#settings-panel-account #register-own-passkey-btn {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(16, 189, 165, .12);
  color: #fff;
  background: var(--passkey-mint);
  box-shadow: 0 5px 14px rgba(16, 189, 165, .18);
}

#settings-panel-account #register-own-passkey-btn:hover:not(:disabled) {
  border-color: rgba(16, 189, 165, .24);
  background: #0ea58f;
  box-shadow: 0 7px 18px rgba(16, 189, 165, .24);
}

#settings-panel-account #register-own-passkey-btn .material-symbols-outlined {
  font-size: 17px;
}

#settings-panel-account .passkey-added-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(16, 189, 165, .24);
  border-radius: 999px;
  color: #087f6d;
  background: rgba(16, 189, 165, .1);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

#settings-panel-account .passkey-added-chip .material-symbols-outlined {
  font-size: 16px;
}

#settings-panel-account .passkey-add-more-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(16, 189, 165, .22);
  border-radius: 12px;
  color: #087f6d;
  background: rgba(16, 189, 165, .04);
}

#settings-panel-account .passkey-add-more-btn:hover:not(:disabled) {
  border-color: rgba(16, 189, 165, .38);
  background: rgba(16, 189, 165, .1);
}

#settings-panel-account .passkey-add-more-btn .material-symbols-outlined {
  font-size: 19px;
}

#settings-panel-account .passkey-status {
  margin: 0;
  padding: 0 16px 8px;
}

#settings-panel-account .passkey-credentials {
  display: grid;
  gap: 0;
  padding: 0;
  border-top: 1px solid rgba(16, 189, 165, .14);
}

#settings-panel-account .passkey-credentials-toggle {
  min-height: 44px;
  padding: 9px 16px !important;
  color: var(--passkey-ink);
}

#settings-panel-account .passkey-credentials-toggle:hover,
#settings-panel-account .passkey-credentials-toggle.open {
  background: rgba(16, 189, 165, .055);
}

#settings-panel-account .passkey-credentials-toggle strong {
  font-size: 12.5px;
}

#settings-panel-account .passkey-credentials-toggle strong .material-symbols-outlined {
  color: var(--passkey-mint);
  font-size: 17px;
}

#settings-panel-account .passkey-credentials-toggle small {
  font-size: 10.5px;
}

#settings-panel-account .passkey-credentials-content {
  border-top: 0 !important;
  padding: 0 16px 12px !important;
}

#settings-panel-account .passkey-credentials-content.open {
  display: block !important;
}

#settings-panel-account .passkey-credential-list {
  gap: 6px;
}

#settings-panel-account .passkey-credential-row {
  min-height: 52px;
  padding: 6px 8px;
  border-radius: 10px;
  gap: 8px;
}

html[data-theme="dark"] #settings-panel-account .passkey-card {
  border-color: rgba(114, 239, 210, .24);
  background: linear-gradient(135deg, rgba(16, 189, 165, .1), rgba(89, 215, 241, .08) 58%, rgba(7, 29, 43, .96));
}

html[data-theme="dark"] #settings-panel-account .passkey-card-copy strong {
  color: #f4f9f8;
}

html[data-theme="dark"] #settings-panel-account #register-own-passkey-btn {
  border-color: rgba(114, 239, 210, .34);
  color: #06251f;
  background: #72efd2;
  box-shadow: 0 5px 14px rgba(114, 239, 210, .16);
}

html[data-theme="dark"] #settings-panel-account #register-own-passkey-btn:hover:not(:disabled) {
  border-color: rgba(159, 242, 225, .56);
  background: #8af3dc;
}

html[data-theme="dark"] #settings-panel-account .passkey-added-chip {
  border-color: rgba(114, 239, 210, .32);
  color: #9ef2e1;
  background: rgba(114, 239, 210, .12);
}

html[data-theme="dark"] #settings-panel-account .passkey-add-more-btn {
  border-color: rgba(114, 239, 210, .28);
  color: #9ef2e1;
  background: rgba(114, 239, 210, .08);
}

html[data-theme="dark"] #settings-panel-account .passkey-add-more-btn:hover:not(:disabled) {
  border-color: rgba(114, 239, 210, .44);
  background: rgba(114, 239, 210, .14);
}

html[data-theme="dark"] #settings-panel-account .passkey-credentials {
  border-top-color: rgba(114, 239, 210, .2);
}

html[data-theme="dark"] #settings-panel-account .passkey-credentials-toggle {
  color: #f4f9f8;
}

html[data-theme="dark"] #settings-panel-account .passkey-credentials-toggle:hover,
html[data-theme="dark"] #settings-panel-account .passkey-credentials-toggle.open {
  background: rgba(114, 239, 210, .08);
}

@media (max-width: 540px) {
  #settings-panel-account .passkey-card-head {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 10px 12px;
  }

  #settings-panel-account .passkey-card-action {
    grid-column: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}