/* ПУБ — mobile-first styles, light/dark via CSS custom properties */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --text: #1c2330;
  --text-muted: #67707f;
  --border: #d9dde3;
  --accent: #2f6fed;
  --accent-text: #ffffff;
  --pos: #1d8a4e;
  --neg: #c93a3a;
  --paid-bg: #d9f2e3;   --paid-text: #14683a;
  --unpaid-bg: #fadcdc; --unpaid-text: #9c2626;
  --debt-bg: #fdeecb;   --debt-text: #8a5b06;
  --waiting-bg: #e4e7ec; --waiting-text: #565f6e;
  --volleyball-bg: #ffedd5; --volleyball-text: #9a3412;
  --constancy-bg: #ede9fe; --constancy-text: #6d28d9;
  --status-injured-dot: #d69a00;
  --shadow: 0 1px 3px rgba(20, 27, 40, .1);
  --shadow-overlay: 0 14px 38px rgba(10, 18, 30, .24);
  --control-font-size: .875rem;
  --control-height: 42px;
  --control-height-compact: 42px;
  --control-padding-inline: .85rem;
  --control-gap: .42rem;
}
:root[data-theme="dark"] {
  --bg: #14181f;
  --surface: #1d232d;
  --surface-2: #262d39;
  --text: #e7eaf0;
  --text-muted: #99a1af;
  --border: #333c4a;
  --accent: #5b8cff;
  --accent-text: #0e1420;
  --pos: #4ecb84;
  --neg: #ff7a7a;
  --paid-bg: #17402b;   --paid-text: #7fe0a9;
  --unpaid-bg: #4a1f1f; --unpaid-text: #ff9d9d;
  --debt-bg: #453714;   --debt-text: #f4c464;
  --waiting-bg: #2c3340; --waiting-text: #aab2c0;
  --volleyball-bg: #431407; --volleyball-text: #fdba74;
  --constancy-bg: #35255f; --constancy-text: #c4b5fd;
  --status-injured-dot: #f4c464;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-overlay: 0 16px 42px rgba(0, 0, 0, .58);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 1.35rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
h3 { margin: 0 0 .5rem; font-size: 1rem; }

/* ---------- header ---------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.environment-banner {
  background: #fef3c7;
  border-bottom: 1px solid #f59e0b;
  color: #78350f;
}
.environment-banner-inner {
  display: flex;
  justify-content: center;
  gap: .55rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: .42rem .9rem;
  font-size: .82rem;
  text-align: center;
}
:root[data-theme="dark"] .environment-banner {
  background: #451a03;
  border-bottom-color: #d97706;
  color: #fef3c7;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem; gap: .5rem; max-width: 1100px; margin: 0 auto;
}
.brand {
  display: inline-flex; align-items: center; min-width: 0; gap: .65rem; color: var(--text);
}
.brand-mark {
  display: block; flex: 0 0 auto; width: 46px; height: 46px; object-fit: contain;
}
.brand-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.08; }
.brand-title { font-size: 1.25rem; font-weight: 850; letter-spacing: .055em; }
.brand-sub {
  margin-top: .24rem; color: var(--text-muted); font-size: .69rem; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap;
}
@media (max-width: 359px) {
  .brand-sub { display: none; }
}
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 999px; padding: .35rem .6rem; cursor: pointer; font-size: 1rem;
}
.theme-toggle > span { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
:root:not([data-theme="dark"]) .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: none; }
.topbar-actions { display: flex; align-items: center; flex: 0 0 auto; gap: .5rem; }
.logout-form { margin: 0; }
.logout-form--mobile { display: none; }
.mainnav-identity { display: none; }

/* hamburger button (mobile only) */
.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 38px; padding: 0 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px;
}
.nav-toggle span {
  display: block; flex: 0 0 auto; width: 22px; height: 2px;
  border-radius: 2px; background: var(--text);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile: nav is a collapsible dropdown */
.mainnav {
  display: none; flex-direction: column; gap: .15rem;
  padding: .3rem .6rem .6rem; max-width: 1100px; margin: 0 auto;
}
.mainnav.open { display: flex; }
.mainnav a {
  white-space: nowrap; padding: .55rem .65rem; border-radius: 8px;
  color: var(--text-muted); font-size: .95rem;
}
.mainnav a:hover { background: var(--surface-2); color: var(--text); }
.mainnav a.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}

@media (max-width: 719px) {
  .topbar-actions .user-identity,
  .logout-form--desktop { display: none; }
  .theme-toggle,
  .nav-toggle {
    display: flex; align-items: center; justify-content: center; flex: 0 0 42px;
    width: 42px; height: 42px; padding: 0; border-radius: 8px;
  }
  .nav-toggle { flex-direction: column; }
  .mainnav-identity {
    display: block; margin-top: .25rem; padding: .7rem .65rem .35rem;
    border-top: 1px solid var(--border); color: var(--text-muted); font-size: .8rem;
  }
  .logout-form--mobile { display: block; }
  .mainnav-logout {
    display: block; width: 100%; padding: .55rem .65rem; border: 0;
    border-radius: 8px; background: transparent; color: var(--text-muted);
    font: inherit; font-size: .95rem; text-align: left; cursor: pointer;
  }
  .mainnav-logout:hover,
  .mainnav-logout:focus-visible { background: var(--surface-2); color: var(--text); }
}

@media (min-width: 720px) {
  .brand-mark { width: 50px; height: 50px; }
  .brand-title { font-size: 1.35rem; }
  .brand-sub { font-size: .72rem; }
  .nav-toggle { display: none; }
  .mainnav {
    display: flex; flex-direction: row; gap: .25rem;
    overflow-x: auto; padding: 0 .6rem .5rem;
  }
  .mainnav a { padding: .3rem .65rem; border-radius: 999px; font-size: .85rem; }
}

/* ---------- layout ---------- */
.page { max-width: 1100px; margin: 0 auto; padding: 1rem .9rem 3rem; }
.footer { text-align: center; color: var(--text-muted); font-size: .75rem; padding: 1rem; }
.muted { color: var(--text-muted); }
.small { font-size: .8rem; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.grow { flex: 1 1 12rem; }

/* ---------- cards ---------- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; margin: 1rem 0; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: .9rem 1rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .15rem;
}
.empty-state--centered {
  min-height: 15rem;
  padding: 2rem;
  display: grid;
  grid-template-rows: repeat(3, auto);
  align-content: center;
  justify-items: center;
  gap: 1.35rem;
  text-align: center;
}
.empty-state--centered h2 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.empty-state--centered p { max-width: 58ch; margin: 0; }
.empty-state--centered .empty-state-action {
  min-width: 13rem;
  min-height: var(--control-height);
  padding: .48rem var(--control-padding-inline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--control-font-size);
  line-height: 1.15;
}
.event-state--compact {
  min-height: 10rem;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title action" "meta action";
  gap: .6rem 1.25rem;
  align-items: center;
  background: var(--surface-2);
}
.event-state--compact h2 {
  grid-area: title;
  align-self: end;
  margin: 0;
  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.event-state--compact .event-state-meta {
  grid-area: meta;
  align-self: start;
  margin: 0;
  color: var(--text-muted);
}
.event-state--compact .event-state-action {
  grid-area: action;
  min-width: 11rem;
  min-height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.event-state--nearest-header {
  grid-template-areas: "header header" "title action" "meta action";
  gap: .55rem 1.25rem;
}
.event-state--nearest-header .event-state-nearest {
  grid-area: header;
  margin: -.25rem 0 .1rem;
  padding-bottom: .55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .82rem;
}
.event-state--nearest-header .event-state-nearest strong { color: var(--pos); }
@media (max-width: 640px) {
  .event-state--compact {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "meta" "action";
  }
  .event-state--nearest-header {
    grid-template-areas: "header" "title" "meta" "action";
  }
  .event-state--compact .event-state-action { width: 100%; }
}
.card-grid--statement .dashboard-nav-card { gap: .7rem; }
.card-grid--statement .dashboard-card-head {
  padding-bottom: .7rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  border-bottom: 1px solid var(--border);
}
.card-grid--statement .card-icon {
  flex: 0 0 auto;
  line-height: 1;
}
.card-grid--statement .card-icon .icon {
  width: 2.7rem;
  height: 2.7rem;
}
.card-grid--statement .card-title {
  font-size: 1.305rem;
  line-height: 1.05;
  text-wrap: balance;
}
.card-grid--statement .card-sub { font-size: .86rem; }
.card-link { color: var(--text); transition: transform .08s ease, border-color .08s ease; }
.card-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.card-icon { color: var(--accent); }
.icon {
  width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -.22em;
  fill: currentColor; stroke: none;
}
.card-icon .icon { width: 1.65rem; height: 1.65rem; }
.icon-inline { width: 1em; height: 1em; }
.heading-with-icon { display: flex; align-items: center; gap: .45rem; }
.heading-with-icon > .icon { color: var(--accent); flex: 0 0 auto; }
.theme-toggle .icon { display: block; width: 1.15rem; height: 1.15rem; vertical-align: 0; }
.card-title { font-weight: 700; }
.card-sub { color: var(--text-muted); font-size: .82rem; }
.card-info { font-size: .85rem; color: var(--accent); font-weight: 600; }
.org-card { border-left: 4px solid var(--accent); }
.org-active { border-color: var(--pos); }
.organizers--priority { gap: .63rem; }
.organizers--priority .org-card {
  min-height: 6.975rem;
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.organizers--priority .card-title {
  font-size: 1.12rem;
  line-height: 1.15;
}
.organizers--priority .org-duty-status {
  align-self: flex-start;
  margin-bottom: auto;
}
.organizers--priority .org-duty-current { order: -2; }
.organizers--priority .org-duty-next {
  order: -1;
  border-color: var(--waiting-text);
}

/* ---------- stats ---------- */
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .8rem 0; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: .7rem .85rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .15rem;
}
.stat-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.3rem; font-weight: 800; }
.stat-rent { grid-column: 1 / -1; }

/* Dashboard metric board: one surface, four aligned values. */
.metric-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.metric-board .stat {
  min-width: 0;
  min-height: 8.25rem;
  padding: 1rem .75rem .85rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  display: grid;
  grid-template-rows: minmax(2.75rem, auto) 1fr minmax(1.25rem, auto);
  justify-items: center;
  align-items: start;
  gap: .35rem;
  text-align: center;
}
.metric-board .stat-label {
  align-self: start;
  max-width: 18rem;
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.metric-board .stat-value {
  align-self: center;
  max-width: 100%;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .16em;
  font-size: clamp(2.1rem, 8.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metric-board .stat-unit {
  color: var(--text-muted);
  font-size: .5em;
  font-weight: 700;
  letter-spacing: 0;
}
.metric-board .stat > .small {
  align-self: end;
  max-width: 100%;
  line-height: 1.2;
  text-align: center;
}
.metric-board .stat:nth-child(odd) { border-right: 1px solid var(--border); }
.metric-board .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
@media (min-width: 640px) {
  .metric-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric-board .stat {
    min-height: 8.75rem;
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }
  .metric-board .stat:last-child { border-right: 0; }
}

/* Semantic markers: values scan by meaning, not just by position. */
.metric-board--dashboard .stat:nth-child(-n + 2),
.metric-board--finance .stat:nth-child(-n + 2) {
  background: var(--surface-2);
}
.metric-board--markers .stat-label {
  justify-self: start;
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  text-align: left;
}
.metric-board--markers .stat-label::before {
  content: "";
  flex: 0 0 auto;
  width: .48rem;
  height: .48rem;
  margin-top: .28rem;
  border-radius: 2px;
  background: var(--accent);
}
.metric-board--markers .stat-value { color: var(--accent); }
.metric-board--dashboard .stat:nth-child(3) .stat-label::before,
.metric-board--dashboard .stat:nth-child(3) .stat-value,
.metric-board .stat--players .stat-label::before,
.metric-board .stat--players .stat-value,
.metric-board .stat--current .stat-label::before,
.metric-board .stat--current .stat-value,
.metric-board .stat--advance .stat-label::before,
.metric-board .stat--advance .stat-value { color: var(--pos); background-color: transparent; }
.metric-board--dashboard .stat:nth-child(3) .stat-label::before,
.metric-board .stat--players .stat-label::before,
.metric-board .stat--current .stat-label::before,
.metric-board .stat--advance .stat-label::before { background: var(--pos); }
.metric-board--dashboard .stat:nth-child(4) .stat-label::before,
.metric-board .stat--injured .stat-label::before,
.metric-board .stat--debt .stat-label::before { background: var(--neg); }
.metric-board--dashboard .stat:nth-child(4) .stat-value,
.metric-board .stat--injured .stat-value,
.metric-board .stat--debt .stat-value { color: var(--neg); }

/* Accepted metric style: three equal zones per tile across summary pages. */
.metric-board--signal .metric-tile {
  position: relative;
  min-height: 8.25rem;
  padding: .85rem;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  justify-items: stretch;
  align-items: stretch;
  text-align: center;
  gap: 0;
}
.metric-board--signal .metric-value {
  position: static;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .2rem;
  color: var(--text);
  line-height: 1;
  transform: none;
}
.metric-board--signal .metric-number {
  font-size: 2.95rem;
  line-height: .95;
  letter-spacing: -.04em;
}
.metric-board--signal .metric-unit { font-size: .8rem; color: var(--text-muted); }
.metric-board--signal .metric-label {
  grid-row: 3;
  align-self: end;
  justify-self: start;
  width: calc(100% - 2rem);
  margin: 0;
  text-align: left;
  line-height: 1.2;
}
.metric-board--signal .metric-arrow {
  position: static;
  z-index: 1;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  color: var(--accent);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  padding: .35rem;
  border-radius: 8px;
}
.metric-board--signal .metric-arrow:hover { background: var(--surface-2); }
.metric-board--signal .metric-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.metric-board--players,
.metric-board--duty,
.metric-board--cashier {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.metric-board--signal.metric-board--text .metric-value {
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.metric-board--signal.metric-board--text .metric-number {
  font-size: clamp(1.55rem, 5vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.metric-board--players .stat,
.metric-board--duty .stat,
.metric-board--cashier .stat { border-bottom: 0; }
.metric-board--cashier .stat--cashier-box .stat-label::before { background: var(--pos); }
.metric-board--cashier .stat--cashier-box .stat-value { color: var(--pos); }
.metric-board--text .stat-value {
  max-width: 100%;
  font-size: clamp(1.55rem, 5vw, 2.35rem);
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
}
.progress { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: .35rem; }
.progress-bar { height: 100%; background: var(--pos); border-radius: 999px; transition: width .3s ease; }

/* ---------- tables ---------- */
.lists-pending table.table:not([data-list-default-size="all"]):not([data-list-ready="1"]) tbody > tr:nth-child(n + 11) {
  display: none;
}
.lists-pending .games-grid:not([data-list-default-size="all"]):not([data-list-ready="1"]) > :is(.card, .game-card):nth-child(n + 11) {
  display: none;
}
.list-item-enter {
  animation: list-item-fade 180ms cubic-bezier(.25, 1, .5, 1) both;
  animation-delay: calc(var(--list-enter-index, 0) * 18ms);
}
@keyframes list-item-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .list-item-enter { animation: none; }
}
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
@media (min-width: 720px) {
  .table { min-width: 560px; }
  .cashier-table { min-width: 640px; }
}

/* mobile: tables become stacked cards — no horizontal scrolling */
@media (max-width: 719px) {
  .table thead { display: none; }
  .table, .table tbody { display: block; width: 100%; }
  .table tbody tr {
    display: block; padding: .5rem 0; border-bottom: 1px solid var(--border);
  }
  .table tbody tr:last-child { border-bottom: none; }
  .table tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: .8rem;
    border: none; padding: .22rem .8rem; text-align: right;
  }
  .table tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted); font-size: .74rem; text-transform: uppercase;
    letter-spacing: .04em; flex-shrink: 0;
  }
  .table tbody td:not([data-label]) { justify-content: flex-end; }
  .table tbody td.cell-actions, .table tbody td[data-label="Действия"] {
    flex-wrap: wrap; justify-content: flex-end;
  }
}

/* ---------- badges ---------- */
.badge {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.badge-paid    { background: var(--paid-bg);    color: var(--paid-text); }
.badge-unpaid  { background: var(--unpaid-bg);  color: var(--unpaid-text); }
.badge-debt    { background: var(--debt-bg);    color: var(--debt-text); }
.badge-ready   { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.badge-waiting { background: var(--waiting-bg); color: var(--waiting-text); }
.badge-declined { background: var(--waiting-bg); color: var(--waiting-text); }
.cashier-table .cell-status .badge {
  display: inline-grid; grid-template-columns: 1rem minmax(0, auto);
  align-items: center; justify-items: start; column-gap: .35rem; line-height: 1.15;
}
.cashier-table .cell-status .badge .icon {
  display: block; width: .9rem; height: .9rem; margin: 0; align-self: center; justify-self: center;
}
.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- forms & buttons ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: .8rem 1rem; margin: .8rem 0; box-shadow: var(--shadow);
}
.panel > summary { cursor: pointer; font-weight: 700; }
.form-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-top: .6rem; }
.form-row label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--text-muted); }
.checkline { flex-direction: row !important; align-items: center; gap: .4rem !important; }
input, select {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: .45rem .6rem; font-size: .95rem; max-width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button,
input[type="button"],
input[type="submit"],
input[type="reset"] { font-family: inherit; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--control-gap);
  min-height: var(--control-height); max-width: 100%; padding: .48rem var(--control-padding-inline);
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; font: inherit; font-size: var(--control-font-size); font-weight: 650;
  line-height: 1.2; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer;
}
.btn > .icon { flex: 0 0 auto; width: 1rem; height: 1rem; }
.btn:hover { border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.btn-danger { background: var(--neg); border-color: var(--neg); color: #fff; font-weight: 700; }
.btn-pay { background: var(--pos); border-color: var(--pos); color: #fff; font-weight: 700; }
.btn-small {
  min-height: var(--control-height-compact); padding: .48rem var(--control-padding-inline);
  font-size: var(--control-font-size);
}
.btn-icon {
  flex: 0 0 var(--control-height); width: var(--control-height); min-width: var(--control-height);
  height: var(--control-height); padding: 0; line-height: 1;
}
.btn-small.btn-icon {
  flex-basis: var(--control-height-compact); width: var(--control-height-compact);
  min-width: var(--control-height-compact); height: var(--control-height-compact); padding: 0;
}
.actions-row { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; flex-wrap: wrap; }

/* ---------- players page ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.players-bulk-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .65rem;
  margin: .8rem 0 .45rem; padding: .65rem .75rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.players-bulk-toolbar [data-player-selected-count] { margin-left: auto; }
.players-bulk-toolbar .btn { min-height: 40px; }
.player-add-sports { flex: 1 0 100%; width: 100%; }
.player-sport-choices {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 0 100%; width: 100%; gap: .4rem;
}
.player-sport-choices legend { grid-column: 1 / -1; }
.player-sport-choice {
  min-width: 0; padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; cursor: pointer;
}
.player-sport-choice > span { width: 100%; min-height: 54px; padding: .65rem .8rem; }
.player-sport-choice[aria-checked="true"] > span {
  border-color: var(--accent); background: var(--accent); color: var(--accent-text);
}
.player-sport-choice:focus-visible { outline: none; }
.player-sport-choice:focus-visible > span { outline: 2px solid var(--accent); outline-offset: 2px; }
.player-edit-sports { grid-column: 1 / -1; margin: 0; }
.player-add-ratings {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 0 100%; width: 100%; gap: .65rem;
}
.player-add-ratings[hidden] { display: none; }
.player-add-ratings label {
  display: flex; flex-direction: column; gap: .2rem; color: var(--text-muted); font-size: .8rem;
}
.players-selection-toggle { display: none; }
.player-select-cell { width: 2.8rem; text-align: center !important; }
.player-select-cell input { width: 1.1rem; height: 1.1rem; }
.menu-order-panel { max-width: 34rem; }
.menu-order-list { display: grid; gap: .35rem; padding: 0; margin: 0 0 .75rem; list-style: none; }
.menu-order-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 44px; padding: .35rem .45rem .35rem .7rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}
.menu-order-label { font-weight: 650; }
.menu-order-actions { display: flex; gap: .3rem; }
.menu-order-actions .btn {
  min-width: 40px; min-height: 36px; padding: .25rem;
  font-weight: 800; line-height: 1;
}
.menu-order-actions .btn:disabled { opacity: .28; border-style: dashed; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.skills-cell { max-width: 16rem; }
.player-status-badge {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 1.55rem; padding: .2rem .55rem;
  border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.1; white-space: nowrap;
}
.player-status-dot {
  display: inline-block; width: .62rem; height: .62rem; flex: 0 0 auto; border-radius: 50%;
}
.player-status-active { color: var(--paid-text); background: var(--paid-bg); }
.player-status-active .player-status-dot { background: var(--pos); }
.player-status-injured { color: var(--debt-text); background: var(--debt-bg); }
.player-status-injured .player-status-dot { background: var(--status-injured-dot); }
.player-status-inactive { color: var(--waiting-text); background: var(--waiting-bg); }
.player-status-inactive .player-status-dot { background: var(--waiting-text); }
.player-status-chip {
  display: inline-flex; align-items: center; min-height: 1.55rem; padding: .2rem .55rem;
  border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.1; white-space: nowrap;
}
.player-tennis-chip {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, var(--border));
}
.player-volley-rating-chip {
  color: var(--volleyball-text); background: var(--volleyball-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volleyball-text) 25%, var(--border));
}
.player-constancy-chip {
  color: var(--constancy-text); background: var(--constancy-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--constancy-text) 27%, var(--border));
}
.skill-chip {
  display: inline-block; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: .05rem .35rem; font-size: .72rem; margin: .1rem .15rem .1rem 0;
}
@media (min-width: 720px) {
  .player-volley-none td:nth-child(7) > *,
  .player-volley-none td:nth-child(8) > * { display: none; }
  .player-volley-none td:nth-child(8) { font-size: 0; }
}
@media (max-width: 719px) {
  .players-bulk-toolbar {
    justify-content: flex-end; margin: .65rem 0 .45rem; padding: 0;
    background: transparent; border: 0;
  }
  .players-selection-toggle { display: inline-flex; align-items: center; min-height: 44px; }
  .players-bulk-toolbar > :not(.players-selection-toggle) { display: none; }
  .players-bulk-toolbar.selection-active {
    padding: .55rem .65rem; background: var(--surface); border: 1px solid var(--border);
  }
  .players-bulk-toolbar.selection-active > * { display: flex; }
  .players-bulk-toolbar.selection-active [data-player-selected-count] { display: inline; }

  .players-table tbody tr {
    position: relative; display: grid;
    grid-template-columns: 1.1rem auto auto minmax(0, 1fr);
    grid-template-areas: "status name name name" ". availability availability availability" ". rating constancy tennis";
    align-items: center; justify-content: start; gap: .32rem .4rem;
    padding: .5rem 2.75rem .5rem .75rem;
  }
  .players-table tbody td { display: none; padding: 0; text-align: left; }
  .players-table.table tbody td[data-label]::before { content: none; }
  .players-table tbody td:nth-child(2) {
    display: block; grid-area: name; overflow: hidden;
    font-size: .96rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap;
  }
  .players-table tbody td:nth-child(4) {
    display: block; grid-area: availability; justify-self: start; color: var(--text-muted);
    font-size: .76rem; line-height: 1.25; white-space: nowrap;
  }
  .players-table tbody td:nth-child(5) {
    display: block; grid-area: status; align-self: center; justify-self: center; line-height: 1;
  }
  .players-table tbody .player-status-badge { min-height: 0; padding: 0; background: transparent; }
  .players-table tbody .player-status-dot { width: .78rem; height: .78rem; }
  .players-table tbody .player-status-text { display: none; }
  .players-table tbody td:nth-child(6) {
    display: block; grid-area: tennis; align-self: center; justify-self: start;
    line-height: 1; text-align: left;
  }
  .players-table tbody td:nth-child(6):not(.has-tennis) { display: none; }
  .players-table tbody td:nth-child(7) {
    display: block; grid-area: rating; align-self: center; justify-self: start; line-height: 1;
  }
  .players-table tbody td:nth-child(8) {
    display: block; grid-area: constancy; justify-self: start; line-height: 1;
  }
  .players-table tbody tr.player-volley-none {
    grid-template-areas: "status name name name" ". availability availability availability" ". tennis . .";
  }
  .players-table tbody tr.player-volley-none td:nth-child(7),
  .players-table tbody tr.player-volley-none td:nth-child(8) { display: none; }
  .players-table tbody td:nth-child(9) { display: block; position: static; }
  .player-mobile-open {
    display: block; position: absolute; inset: 0; z-index: 1;
    width: 100%; border: 0; background: transparent; color: transparent;
    font-size: 0; cursor: pointer;
  }
  .player-mobile-open::after {
    content: "›"; position: absolute; top: calc(50% - 1px); right: .85rem;
    color: var(--text-muted); font-size: 1.55rem; line-height: 1;
    transform: translateY(-50%);
  }
  .player-mobile-open:hover, .player-mobile-open:active { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
  .player-mobile-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .players-table.selection-active tbody tr {
    grid-template-columns: 34px 1.1rem auto auto minmax(0, 1fr);
    grid-template-areas: "select status name name name" "select . availability availability availability" "select . rating constancy tennis";
    padding-left: .25rem;
  }
  .players-table.selection-active tbody tr.player-volley-none {
    grid-template-areas: "select status name name name" "select . availability availability availability" "select . tennis . .";
  }
  .players-table.selection-active tbody .player-select-cell {
    display: flex; grid-area: select; align-items: center; justify-content: center;
    width: 34px;
  }
  .players-table.selection-active .player-mobile-open { visibility: hidden; }
}
.edit-details { position: relative; }
.edit-details summary { list-style: none; display: inline-flex; }
.edit-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  width: min(32rem, calc(100vw - 3.6rem)); max-width: 100%; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: .7rem; margin-top: .4rem; box-shadow: var(--shadow);
}
.edit-form label { display: flex; flex-direction: column; font-size: .75rem; color: var(--text-muted); gap: .15rem; }
.edit-form button { grid-column: 1 / -1; }
.rating-form, .profile-form, .rename-form, .merge-form, .finance-edit-form form { display: grid; gap: .45rem; min-width: 0; }
.ratings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.player-edit-dialog {
  width: min(42rem, calc(100vw - 1.5rem)); max-height: min(88vh, 52rem);
  padding: 0; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(10, 18, 30, .34); overflow: hidden;
}
.player-edit-dialog::backdrop {
  background: rgba(15, 22, 34, .52);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.player-modal-open > .topbar,
body.player-modal-open > .page,
body.player-modal-open > .footer { filter: blur(6px); }
.player-dialog-shell { max-height: min(88vh, 52rem); overflow-y: auto; }
.player-dialog-header {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem .8rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.player-dialog-header p, .player-dialog-header h2 { margin: 0; }
.player-dialog-header h2 { margin-top: .15rem; font-size: 1.2rem; }
.player-dialog-close {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text);
  font-size: 1.65rem; line-height: 1; cursor: pointer;
}
.player-dialog-close:hover { color: var(--neg); }
.player-dialog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.player-edit-form { display: grid; gap: 1rem; padding: 1rem 1.1rem; }
.player-edit-form label {
  display: flex; flex-direction: column; gap: .2rem; color: var(--text-muted); font-size: .8rem;
}
.player-profile-grid { display: grid; grid-template-columns: 1fr; gap: .65rem; }
.player-ratings-section { display: grid; gap: .65rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.player-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.player-edit-error {
  margin: 0; padding: .65rem .75rem; border: 1px solid var(--neg); border-radius: 8px;
  background: var(--unpaid-bg); color: var(--unpaid-text); font-size: .875rem; line-height: 1.4;
}
.player-edit-error:focus { outline: 2px solid var(--neg); outline-offset: 2px; }
.player-dialog-actions {
  position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: .5rem;
  padding-top: .3rem; background: var(--surface);
}
.player-dialog-actions .btn { min-height: 44px; }
.player-danger-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 1.1rem 1.1rem; padding: .8rem 0 0; border-top: 1px solid var(--border);
}
.player-danger-zone p { margin: .2rem 0 0; max-width: 48ch; }
.player-danger-zone .btn { min-height: 44px; white-space: nowrap; }
.player-delete-confirm-dialog { width: min(30rem, calc(100vw - 1.5rem)); }
.player-delete-confirm-body { padding: 1rem 1.1rem .35rem; }
.player-delete-confirm-body p { margin: 0 0 .65rem; }
.player-delete-confirm-actions { padding: .65rem 1.1rem 1.1rem; }
.player-delete-toast {
  position: fixed; z-index: 500; top: max(1rem, env(safe-area-inset-top)); left: 50%;
  display: flex; align-items: center; gap: .65rem; width: min(42rem, calc(100vw - 1.5rem));
  min-height: 52px; padding: .65rem .7rem .65rem .9rem; transform: translateX(-50%);
  color: var(--paid-text); background: var(--paid-bg); border: 1px solid var(--pos);
  border-radius: 12px; box-shadow: var(--shadow-overlay);
}
.player-delete-toast[hidden] { display: none; }
.player-delete-toast > span { min-width: 0; flex: 1 1 auto; }
.player-delete-toast-undo {
  padding: .35rem .25rem; border: 0; color: inherit; background: transparent;
  font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: .18em; cursor: pointer;
}
.player-delete-toast-close {
  display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px;
  padding: 0; border: 0; border-radius: 8px; color: inherit; background: transparent;
  font-size: 1.45rem; line-height: 1; cursor: pointer;
}
.player-delete-toast :is(button):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.player-row-removing { opacity: 0; transform: translateX(1.5rem); pointer-events: none; }
@media (min-width: 560px) {
  .player-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-profile-grid > label:first-child { grid-column: span 2; }
}
@media (max-width: 559px) {
  .player-add-ratings { grid-template-columns: 1fr; }
  .player-sport-choice > span { min-height: 58px; padding-inline: .45rem; }
  .player-danger-zone { align-items: stretch; flex-direction: column; }
  .player-danger-zone .btn { width: 100%; }
  .player-delete-confirm-actions { align-items: stretch; flex-direction: column-reverse; }
  .player-delete-confirm-actions .btn { width: 100%; }
  .player-delete-toast { align-items: flex-start; flex-wrap: wrap; }
  .player-delete-toast > span { flex-basis: calc(100% - 48px); }
  .player-delete-toast-undo { order: 3; }
}
@media (prefers-reduced-motion: no-preference) {
  .player-edit-dialog[open] { animation: player-dialog-in 220ms cubic-bezier(.16, 1, .3, 1); }
  .players-table tbody tr { transition: opacity 180ms cubic-bezier(.7, 0, .84, 0), transform 180ms cubic-bezier(.7, 0, .84, 0); }
  .player-delete-toast:not([hidden]) { animation: player-toast-in 220ms cubic-bezier(.16, 1, .3, 1); }
  @keyframes player-dialog-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes player-toast-in {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
}
.player-edit-stack { grid-template-columns: 1fr; }
.player-edit-stack > form + form, .finance-edit-form > form + form { border-top: 1px solid var(--border); padding-top: .6rem; }
.section-counter { font-size: .75rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.db-table-nav { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0; }
.db-warning { border-color: var(--debt-text); }
.db-cell-value { display: block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- duty ---------- */
.duty-register-section { margin-top: 1.35rem; }
.duty-register-section > h2 { margin-bottom: .2rem; }
.duty-register-section > p { margin: 0 0 .65rem; }
.duty-note-marker {
  display: inline-block; margin-left: .35rem; color: var(--text-muted);
  font-size: .75rem; font-weight: 650; white-space: nowrap;
}
.duty-edit-dialog .player-edit-form { padding-bottom: .4rem; }

@media (max-width: 719px) {
  .duty-register-table tbody tr {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date date" "name name" "role source";
    align-items: center; gap: .22rem .65rem;
    min-height: 82px; padding: .55rem 2.7rem .55rem .8rem;
  }
  .duty-register-table.table tbody td {
    display: block; min-width: 0; padding: 0; border: 0; text-align: left;
  }
  .duty-register-table.table tbody td[data-label]::before { content: none; }
  .duty-register-table .duty-row-date {
    grid-area: date; color: var(--text-muted); font-size: .75rem;
    font-variant-numeric: tabular-nums;
  }
  .duty-register-table .duty-row-name {
    grid-area: name; overflow: hidden; font-size: .96rem;
    line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
  }
  .duty-register-table .duty-row-role {
    grid-area: role; overflow: hidden; font-size: .78rem;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .duty-register-table .duty-row-source {
    grid-area: source; justify-self: end; display: flex; align-items: center;
    gap: .4rem; white-space: nowrap;
  }
  .duty-register-table .duty-source-rotation { display: none; }
  .duty-register-table .duty-note-marker { margin-left: 0; }
  .duty-register-table .duty-row-comment { display: none; }
  .duty-register-table .duty-row-action { position: static; }
  .duty-row-open {
    position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0;
    border: 0; background: transparent; color: transparent; font-size: 0;
  }
  .duty-row-open::after {
    content: "›"; position: absolute; right: .9rem; top: calc(50% - 1px);
    color: var(--text-muted); font-size: 1.55rem; line-height: 1;
    transform: translateY(-50%);
  }
  .duty-row-open:hover, .duty-row-open:active {
    background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  }
  .duty-row-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}

/* ---------- teams ---------- */
.teams-tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem;
  width: min(30rem, 100%); margin: .55rem 0 .8rem; padding: .25rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.teams-tab {
  min-height: 42px; padding: .48rem .8rem; border: 0; border-radius: 9px;
  color: var(--text-muted); background: transparent; font: inherit;
  font-size: var(--control-font-size); font-weight: 700; line-height: 1.2; cursor: pointer;
}
.teams-tab.is-active { color: var(--accent-text); background: var(--accent); box-shadow: var(--shadow); }
.teams-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.teams-no-event {
  display: grid;
  grid-template-columns: .65rem minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  min-height: 15rem;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.teams-no-event-marker {
  width: .65rem;
  min-height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.teams-no-event-copy { align-self: center; max-width: 42rem; }
.teams-no-event-kicker {
  margin: 0 0 .35rem;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.teams-no-event h2 { margin-bottom: .55rem; font-size: clamp(1.35rem, 4vw, 1.9rem); }
.teams-no-event-copy > p:not(.teams-no-event-kicker) {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}
.teams-no-event-actions { margin-top: 1.1rem; }
.teams-no-event-actions .btn { min-height: 44px; }
.teams-workbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .55rem;
  margin-bottom: .65rem; padding: .55rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface);
}
.teams-workbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.teams-workbar-actions form { margin: 0; }
.team-results-heading {
  display: flex; align-items: end; justify-content: space-between; gap: .75rem; margin: .75rem 0 .55rem;
}
.team-results-heading h2, .team-results-heading p { margin: 0; }
.core-status-summary {
  margin: .45rem 0 .65rem; padding: .5rem .65rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface);
}
.core-status-summary > summary { color: var(--text-muted); font-size: .82rem; font-weight: 750; cursor: pointer; }
.team-mode-panel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  margin: .65rem 0 .8rem; padding: .75rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface);
}
.team-mode-panel p { margin: .2rem 0 0; }
.team-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.team-mode-switch .btn { min-width: 7.4rem; text-align: center; }
.team-mix-notice { display: grid; gap: .2rem; }
.mix-variant-tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem;
  margin: .75rem 0;
}
.mix-variant-tab {
  display: grid; gap: .18rem; min-width: 0; padding: .58rem .45rem;
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; text-align: center; text-decoration: none;
}
.mix-variant-tab span { color: var(--text-muted); font-size: .72rem; white-space: nowrap; }
.mix-variant-tab:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.mix-variant-tab.is-active {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.mix-variant-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem;
  margin: .7rem 0 1rem;
}
.mix-variant-metrics > div {
  display: grid; gap: .15rem; min-width: 0; padding: .55rem .62rem;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2);
}
.mix-variant-metrics span { color: var(--text-muted); font-size: .7rem; line-height: 1.2; }
.mix-variant-metrics strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.team-plan-actions { align-items: center; }
.team-continue-action { min-width: min(15rem, 100%); margin-left: auto; }
.team-actions-dialog { width: min(30rem, calc(100vw - 1.5rem)); }
.team-actions-sheet { display: grid; max-height: min(88vh, 42rem); overflow-y: auto; }
.team-actions-list { display: grid; gap: .55rem; padding: 1rem 1.1rem .75rem; }
.team-actions-list form { margin: 0; }
.team-action-option {
  display: grid; justify-content: stretch; justify-items: start; align-content: center; gap: .16rem;
  width: 100%; min-height: 62px; padding: .7rem .8rem; text-align: left; white-space: normal;
}
.team-action-option strong { font-size: .9rem; line-height: 1.25; }
.team-action-option span { color: var(--text-muted); font-size: .75rem; font-weight: 500; line-height: 1.35; }
.team-action-option.btn-primary span { color: color-mix(in srgb, var(--accent-text) 78%, transparent); }
.team-actions-dismiss { min-height: 44px; margin: 0 1.1rem 1rem; }
.team-reserve-notice { display: grid; gap: .2rem; margin-top: .75rem; }
.team-reserve-card { margin-top: .55rem; border-style: dashed; }
.team-choice-reserve { min-width: 2rem; }
.mix-history-empty strong { font-size: .86rem; }
.team-card-heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.team-total-chip, .team-rating-chip {
  display: inline-flex; align-items: baseline; gap: .18rem; width: max-content;
  color: var(--volleyball-text); background: var(--volleyball-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volleyball-text) 25%, var(--border));
  border-radius: 999px; white-space: nowrap;
}
.team-total-chip { padding: .25rem .55rem; font-size: .76rem; }
.team-rating-chip { padding: .16rem .45rem; font-size: .72rem; }
.team-total-chip strong, .team-rating-chip strong { font-size: 1.08em; }
.team-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.team-list .team-section-label {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: .65rem 0 .18rem; padding: .34rem .5rem; border-radius: 7px;
  color: var(--text-muted); background: var(--surface-2);
  font-size: .72rem; font-weight: 750; line-height: 1.2; letter-spacing: .015em;
}
.team-list .team-section-label:first-child { margin-top: .2rem; }
.team-list .team-section-core {
  color: var(--paid-text); border-left: 3px solid var(--pos);
  background: color-mix(in srgb, var(--pos) 8%, var(--surface));
}
.team-section-count { font-variant-numeric: tabular-nums; }
.team-list .team-member-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: .65rem; min-height: 58px; padding: .48rem .2rem;
  border-bottom: 1px solid var(--border);
}
.team-list .team-member-row[data-section-key^="core-"] {
  padding-left: .55rem; border-left: 2px solid color-mix(in srgb, var(--pos) 45%, var(--border));
}
.team-list .team-member-row:last-child { border-bottom: 0; }
.team-member-identity { display: grid; gap: .28rem; min-width: 0; }
.team-member-identity > strong { line-height: 1.2; overflow-wrap: anywhere; }
.team-player-status {
  width: fit-content; padding: .18rem .48rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; line-height: 1; text-transform: uppercase;
  letter-spacing: .035em;
}
.team-player-status--injured { color: #991b1b; background: #fee2e2; border: 1px solid #fecaca; }
.team-player-status--inactive { color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); }
[data-theme="dark"] .team-player-status--injured { color: #fecaca; background: #450a0a; border-color: #7f1d1d; }
.team-approval-warning { display: grid; gap: .22rem; margin-top: .9rem; border-color: #ef4444; background: color-mix(in srgb, #ef4444 10%, var(--surface)); }
.team-approval-warning[hidden] { display: none; }
.team-approval-warning strong { color: #b91c1c; }
[data-theme="dark"] .team-approval-warning strong { color: #fca5a5; }
.team-member-details { display: flex; flex-wrap: wrap; align-items: center; gap: .28rem .45rem; }
.team-constancy { color: var(--text-muted); font-size: .72rem; line-height: 1.15; }
.team-choices { display: none; flex-wrap: nowrap; justify-content: flex-end; gap: .22rem; }
.is-manual-editing .team-choices { display: flex; }
.team-choice {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted); background: var(--surface-2); font: inherit; font-size: .78rem;
  font-weight: 750; line-height: 1; cursor: pointer;
}
.team-choice:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.team-choice.is-active { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.team-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.team-member-moved { animation: team-member-highlight .65s ease-out; }
@keyframes team-member-highlight {
  from { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
  to { background: transparent; }
}
.telegram-copy-dialog { width: min(36rem, calc(100vw - 1.5rem)); }
.telegram-copy-body { display: grid; gap: .8rem; min-width: 0; padding: 1rem 1.1rem 1.1rem; }
.telegram-copy-body textarea {
  width: 100%; min-width: 0; max-width: 100%; min-height: min(52vh, 25rem);
  resize: vertical; padding: .75rem; overflow-x: hidden; white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; font: inherit; line-height: 1.45;
}
.telegram-copy-body textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.telegram-copy-actions { align-items: center; min-width: 0; flex-wrap: wrap; }
.telegram-copy-actions #telegram-copy-status { margin-right: auto; }
@media (max-width: 560px) {
  .telegram-copy-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;
  }
  .telegram-copy-actions [id$="telegram-copy-status"] {
    grid-column: 1 / -1; min-width: 0; margin: 0; overflow-wrap: anywhere;
  }
  .telegram-copy-actions [id$="telegram-copy-status"]:empty { display: none; }
  .telegram-copy-actions .btn { width: 100%; min-width: 0; }
  .telegram-copy-actions [id$="telegram-send-button"] { grid-column: 1 / -1; }
}
.core-save-message { border-color: var(--pos); }
.section-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.section-heading-row h2 { margin-bottom: .2rem; }
.team-block-heading { margin: 1rem 0 .55rem; }
.core-status-list { display: grid; gap: .45rem; margin: .7rem 0; }
.core-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.core-status-complete { border-left: 4px solid var(--pos); }
.core-status-partial { border-left: 4px solid var(--warning, #eab308); }
.core-split-proposal { border-color: var(--warning, #eab308); margin-top: .8rem; }
.core-split-proposal h3 { margin-top: 0; }
.notice { margin: .8rem 0; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.notice-warning { border-color: var(--warning, #eab308); }
.core-groups-section { margin-top: 1.6rem; scroll-margin-top: 1rem; }
.core-groups-heading { margin-bottom: .8rem; }
.core-groups-title-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.core-groups-title-row h2 { margin: 0; }
.core-groups-title-row .btn { flex: 0 0 auto; white-space: nowrap; }
.core-groups-heading > p { margin: .3rem 0 0; }
@media (min-width: 720px) {
  .core-groups-heading { max-width: calc((100% - .7rem) / 2); }
}
.core-create-panel { margin-bottom: .8rem; }
.core-group-form { display: grid; gap: .7rem; margin-top: .7rem; }
.core-group-form > label input { width: 100%; }
.core-player-picker { min-width: 0; margin: 0; padding: .65rem; border: 1px solid var(--border); border-radius: 10px; }
.core-player-search { width: 100%; margin: .2rem 0 .55rem; }
.core-player-grid { display: grid; grid-template-columns: 1fr; gap: .25rem; max-height: 18rem; overflow-y: auto; }
.core-player-empty { margin: .5rem 0 0; }
.core-player-grid .checkline { min-height: 40px; padding: .3rem .4rem; border-radius: 7px; }
.core-player-grid .checkline:hover { background: var(--surface-2); }
.core-groups-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.core-group-card { padding: .85rem; }
.core-group-card > summary { display: flex; align-items: center; justify-content: space-between; gap: .7rem; cursor: pointer; list-style: none; }
.core-group-card > summary::-webkit-details-marker { display: none; }
.core-group-card.is-archived { opacity: .72; }
.core-member-names { margin: .6rem 0; color: var(--text-muted); }
.core-group-status-form { margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.team-reserve-heading-actions { display: flex; align-items: center; gap: .45rem; }
.new-team-hint { margin: .2rem 0 .65rem; }
.team-card-size-state { display: block; margin-top: .16rem; color: var(--text-muted); font-size: .68rem; font-weight: 600; }
.team-card-new { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.teams-edit-bar { position: relative; }
.team-roster-list, .new-team-player-list { display: grid; gap: .35rem; max-height: min(55vh, 30rem); overflow-y: auto; }
.team-roster-row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  min-height: 52px; padding: .5rem .6rem; border: 1px solid var(--border);
  border-radius: 9px; background: var(--surface);
}
.team-roster-row > span:first-child { display: grid; gap: .12rem; min-width: 0; }
.team-roster-row small { color: var(--text-muted); }
.team-roster-toggle { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.team-roster-toggle input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.team-roster-actions { flex-wrap: wrap; }
.new-team-player-list .checkline { min-height: 44px; padding: .45rem .55rem; border: 1px solid var(--border); border-radius: 8px; }
.form-error { margin: 0; color: var(--neg); font-size: .82rem; font-weight: 700; }
.form-error[hidden] { display: none; }
.core-create-dialog .core-player-grid { max-height: min(42vh, 20rem); }
@media (max-width: 719px) {
  .page-heading:has(+ .teams-tabs) { margin-bottom: .25rem; }
  .teams-tabs { width: 100%; margin-top: .35rem; }
  .teams-workbar { display: grid; grid-template-columns: 1fr; padding: .45rem; }
  .team-mode-switch, .teams-workbar-actions { width: 100%; }
  .team-mode-switch .btn { min-width: 0; }
  .teams-workbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .teams-workbar-actions .btn { width: 100%; min-height: 42px; }
  .team-results-heading { align-items: center; }
  .team-results-heading .btn { min-height: 42px; padding-inline: .55rem; }
  .teams-grid { grid-template-columns: 1fr; }
  .team-list .team-member-row { min-height: 68px; }
  .is-manual-editing .team-list .team-member-row {
    grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: .45rem;
  }
  .is-manual-editing .team-choices { justify-content: flex-start; }
  .is-manual-editing .team-choice { flex: 1 1 44px; width: auto; min-width: 42px; height: 40px; }
  .teams-edit-bar { position: sticky; bottom: .45rem; z-index: 7; padding: .5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
  .teams-edit-bar .btn { flex: 1 1 auto; min-height: 44px; }
  .teams-edit-bar[data-team-complete-actions] {
    position: static; display: flex; padding: 0; border: 0; background: transparent; box-shadow: none;
  }
  .team-continue-action { width: 100%; min-height: 46px; margin-left: 0; }
  .team-actions-dialog {
    width: min(24rem, calc(100vw - 2rem)); max-height: min(82vh, 42rem);
    margin: auto auto .5rem; border-radius: 14px;
  }
  .team-actions-sheet { max-height: min(82vh, 42rem); }
  .team-actions-list { padding: .85rem; }
  .team-actions-dismiss { width: calc(100% - 1.7rem); margin: 0 .85rem .85rem; }
  [data-team-edit-actions] { display: grid; grid-template-columns: 1fr 1fr; }
  .team-reserve-heading-actions .btn { padding-inline: .5rem; }
  .team-roster-actions { display: grid; grid-template-columns: 1fr; }
  .team-roster-actions .btn { width: 100%; min-height: 44px; }
  .team-roster-row { align-items: flex-start; }
  .core-groups-section .section-heading-row { align-items: center; }
  .core-groups-section .section-heading-row .btn { flex: 0 0 auto; }
}
@media (min-width: 640px) {
  .core-player-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .core-groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mix-variant-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- cashier ---------- */
.cell-actions { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.cashier-search-panel { margin: .8rem 0; }
.cashier-search { width: 100%; min-height: 44px; background: var(--surface); }
.cashier-transfer-panel { margin-top: .75rem; }
.cashier-transfer-form { align-items: end; padding-top: .4rem; }
.cashier-transfer-form select { min-width: min(17rem, 100%); }
.cashier-transfer-form #transfer-amount { width: 7rem; }
.cashier-table .cell-actions .context-wrap { margin-left: auto; }
.answer-row { align-items: center; }
.custom-pay { display: inline-flex; gap: .25rem; }
.amount-input { width: 4.6rem; padding: .3rem .4rem; font-size: .85rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.cashier-sort-row { margin-top: .45rem; }
:is(.filter-btn, .sort-btn).active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.toolbar { position: sticky; top: 0; z-index: 5; }
.cashier-panel-title { margin: 0; font-size: 1rem; }
.cashier-add-summary {
  display: flex; align-items: center; gap: .55rem; min-height: 44px;
  list-style: none; border-radius: 8px; cursor: pointer;
}
.cashier-add-summary::-webkit-details-marker { display: none; }
.cashier-add-summary::after {
  content: "⌄"; margin-left: auto; color: var(--text-muted); font-size: 1.25rem;
  transition: transform 180ms cubic-bezier(.25, 1, .5, 1);
}
.cashier-add-summary:hover .cashier-panel-title { color: var(--accent); }
.cashier-add-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cashier-add-panel[open] .cashier-add-summary { margin-bottom: .35rem; }
.cashier-add-panel[open] .cashier-add-summary::after { transform: rotate(180deg); }
.cashier-add-hint { color: var(--text-muted); font-size: .78rem; font-weight: 500; }
.cashier-toolbar-toggle { display: none; }
.cashier-toolbar-content { display: block; }
.debt-origin-cell { max-width: 14rem; }

/* ---------- searchable long lists ---------- */
[hidden], .table tbody tr[hidden], .games-grid > [hidden] { display: none !important; }
.list-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin: .65rem 0; padding: .55rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
}
.list-search { flex: 1 1 14rem; min-width: 0; }
.list-sort { flex: 1 1 12rem; min-width: 0; }
.list-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.list-custom-size { width: 5.5rem; }
.list-footer { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin: .5rem 0 1rem; }
.list-load-more { margin-left: auto; }
.table-wrap > .list-controls {
  margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
}
.table-wrap > .list-footer {
  margin: 0; padding: 7px 11px; border-top: 1px solid var(--border);
}

/* ---------- desktop ---------- */
@media (min-width: 640px) {
  h1 { font-size: 1.6rem; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(4, 1fr); }
  .stat-rent { grid-column: auto; }
  .stats-row:has(.stat:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .stats-row:has(.stat-rent:nth-child(3):last-child) { grid-template-columns: 1fr 1fr 2fr; }
}
@media (min-width: 960px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .teams-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .organizers { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- games ---------- */
.page-heading, .event-title-row, .game-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.breadcrumbs { margin-bottom: .65rem; font-size: .85rem; }
.games-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.game-card { min-height: 132px; }
.game-current {
  border: 2px solid var(--pos);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 16%, transparent), var(--shadow);
}
.game-date { font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.empty-state {
  padding: 1rem; border: 1px dashed var(--border); border-radius: 12px;
  color: var(--text-muted); background: var(--surface);
}
.manage-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.manage-card { margin: 0; }
.guest-card { border-style: solid; }
.game-view-switch { gap: .45rem; }
.game-view-tab { min-height: 44px; }
.game-view-tab[aria-pressed="false"] { background: var(--surface-2); color: var(--text); }
.game-view-panel[hidden] { display: none; }
.game-panel-summary {
  display: flex; align-items: center; gap: .45rem; min-height: 44px;
  list-style: none; border-radius: 8px; cursor: pointer;
}
.game-panel-summary::-webkit-details-marker { display: none; }
.game-panel-summary::after {
  content: "⌄"; margin-left: auto; color: var(--text-muted); font-size: 1.25rem;
  transition: transform 180ms cubic-bezier(.25, 1, .5, 1);
}
.game-panel-summary:hover { color: var(--accent); }
.game-panel-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.game-manage-details[open] .game-panel-summary { margin-bottom: .35rem; }
.game-manage-details[open] .game-panel-summary::after { transform: rotate(180deg); }
.game-parameters { margin-bottom: .65rem; }
.game-parameters-form {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start; gap: .75rem; margin-top: .7rem;
}
.game-parameters-form > label {
  display: flex; min-width: 0; flex-direction: column; gap: .2rem;
  color: var(--text-muted); font-size: .8rem;
}
.game-parameters-form input:not([type="radio"]) { width: 100%; min-height: 40px; }
.game-parameter-title { grid-column: span 2; }
.game-parameter-rent-mode { grid-column: span 2; margin: 0; }
.game-parameter-rent-target [data-rent-formula] { min-height: 1em; margin-top: .12rem; }
.game-parameters-submit { width: 100%; min-height: 40px; align-self: end; margin-bottom: 1.15rem; }
.game-add-participant .manage-grid { grid-template-columns: minmax(0, 1fr); }
.section-choice-group {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 .65rem; padding: 0; border: 0;
}
.section-choice-group legend { width: 100%; margin-bottom: .05rem; color: var(--text-muted); font-size: .8rem; }
.section-choice { position: relative; display: flex; flex: 0 1 auto; }
.section-choice input { position: absolute; opacity: 0; pointer-events: none; }
.section-choice span {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 42px; padding: .5rem .8rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font-size: var(--control-font-size); font-weight: 650; line-height: 1.2; cursor: pointer;
}
.section-choice input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.section-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.guest-section-choice { flex: 1 0 100%; width: 100%; }
.game-teams-heading { margin-bottom: .8rem; }
.game-teams-heading h2, .game-teams-heading p { margin-bottom: .25rem; }
.inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.game-participants-heading { margin: 1.15rem 0 .75rem; }
.game-participants-heading h2, .game-participants-heading p { margin-bottom: .2rem; }
.game-participant-sections { display: grid; gap: 1rem; }
.game-participant-section-title {
  margin: 0; padding: .55rem .7rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.game-participant-section-title + .table-wrap { border-radius: 0 0 12px 12px; }
.game-participant-section-title .section-counter {
  display: inline-grid; place-items: center; min-width: 1.55rem; min-height: 1.55rem;
  padding: 0 .4rem; margin-left: auto; border-radius: 999px;
  background: var(--surface); color: var(--text-muted); font-size: .75rem;
}
.game-participants-table th:last-child,
.game-participants-table td:last-child { white-space: nowrap; }
.game-participant-name { min-width: 12rem; }
.game-participant-name .badge { margin-left: .3rem; }
.game-placement-status {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 32px;
  padding: .35rem .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; line-height: 1;
  white-space: nowrap;
}
.game-placement-status-icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.game-placement-status--lineup { background: var(--paid-bg); color: var(--paid-text); }
.game-placement-status--reserve { background: var(--debt-bg); color: var(--debt-text); }
.game-participant-dialog .player-edit-form { padding-bottom: .4rem; }
@media (min-width: 720px) {
  .game-participants-table { table-layout: fixed; }
  .game-participant-col-name { width: 38%; }
  .game-participant-col-attendance { width: 24%; }
  .game-participant-col-status { width: 22%; }
  .game-participant-col-action { width: 16%; }
}

/* ---------- cashier controls ---------- */
.cell-actions { position: relative; }
.custom-pay { align-items: center; }
.manual-actions { display: inline-flex; gap: .25rem; }
.manual-actions[hidden], .context-menu[hidden] { display: none; }
.manual-accept { background: var(--pos); border-color: var(--pos); color: #fff; font-weight: 800; }
.manual-cancel { font-size: 1.1rem; }
.context-wrap { position: relative; display: inline-flex; }
.context-menu {
  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 30;
  min-width: 142px; padding: .3rem; display: flex; flex-direction: column; gap: .2rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.context-action {
  border: 0; border-radius: 7px; background: transparent; color: var(--text);
  min-height: var(--control-height); padding: .55rem .65rem;
  font-size: var(--control-font-size); line-height: 1.2; text-align: left; white-space: nowrap; cursor: pointer;
}
.context-action:hover { background: var(--surface-2); }
.context-danger { color: #fff; background: var(--neg); font-weight: 700; }
.context-danger:hover { filter: brightness(.93); background: var(--neg); }
.context-menu-btn { min-width: 38px; font-size: 1.15rem; font-weight: 800; }
.amount-input {
  width: 6.8rem; background: var(--surface); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text-muted) 65%, var(--border));
}
.amount-input::placeholder { color: var(--text-muted); opacity: 1; }
.amount-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }

.player-picker { margin-top: .55rem; }
.player-picker-toolbar { display: flex; align-items: center; gap: .5rem; }
.player-picker-search-label { flex: 1 1 15rem; }
.player-picker-search-label input { width: 100%; min-height: 44px; }
.player-picker-sorts { display: flex; gap: .35rem; }
.player-picker-sorts .btn { min-height: 40px; white-space: nowrap; }
.player-picker-sorts .active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.player-picker-caption { margin: .45rem 0 .3rem; }
.player-picker-native { display: none; }
.player-picker-list { max-height: 23rem; overflow-y: auto; border-block: 1px solid var(--border); }
.player-picker-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center;
  gap: .55rem; min-height: 52px; padding: .28rem .15rem .28rem .55rem;
  border-bottom: 1px solid var(--border);
}
.player-picker-option:last-child { border-bottom: 0; }
.player-picker-option[hidden] { display: none; }
.player-picker-name { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.player-picker-activity { color: var(--text-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.player-picker-add { width: 44px; min-height: 44px; padding: 0; font-size: 1.25rem; color: var(--accent); }
.player-picker-add:hover, .player-picker-add:focus-visible { background: var(--accent); color: var(--accent-text); }
.player-picker-empty { margin: .45rem 0 0; padding: .65rem; }
.player-picker-sport-row { margin-bottom: .35rem; }
.participation-choice {
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem;
  margin: .45rem 0 .7rem; padding: 0; border: 0;
}
.participation-choice[hidden] { display: none; }
.participation-choice legend { grid-column: 1 / -1; margin-bottom: .15rem; font-weight: 650; }
.participation-choice label { position: relative; display: flex; min-height: 44px; }
.participation-choice input { position: absolute; opacity: 0; pointer-events: none; }
.participation-choice span {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: .55rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-weight: 650; cursor: pointer;
}
.participation-choice input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.participation-choice input:disabled + span { opacity: .45; cursor: not-allowed; }
.guest-participation-choice { flex: 1 0 100%; width: 100%; margin-bottom: 0; }
.guest-volleyball-rating {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  flex: 1 0 100%; width: 100%; gap: .65rem;
}
.guest-volleyball-rating[hidden] { display: none; }
.participant-status-quick-form { display: inline-flex; }
.participant-status-quick-form .btn { min-height: 40px; }
.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;
}

@media (max-width: 719px) {
  .cashier-add-hint { display: none; }
  .player-picker-toolbar { align-items: stretch; flex-direction: column; }
  .player-picker-search-label { flex-basis: auto; width: 100%; }
  .player-picker-sorts { display: grid; grid-template-columns: 1fr 1fr; }
  .player-picker-sorts .btn { width: 100%; min-height: 44px; }
  .player-picker-list { max-height: 26rem; }
  .player-picker-option { padding-left: .35rem; }


  .cashier-toolbar { padding: .25rem .55rem; }
  .cashier-transfer-form { align-items: stretch; flex-direction: column; }
  .cashier-transfer-form label,
  .cashier-transfer-form select,
  .cashier-transfer-form input,
  .cashier-transfer-form .btn { width: 100%; min-width: 0; max-width: 100%; }
  .cashier-toolbar-toggle {
    width: 100%; min-height: 44px; padding: .35rem .15rem; display: flex;
    align-items: center; justify-content: space-between; gap: .6rem;
    border: 0; background: transparent; color: var(--text); font: inherit;
    text-align: left; cursor: pointer;
  }
  .cashier-toolbar-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .cashier-toolbar-chevron { font-size: 1.25rem; transition: transform 180ms cubic-bezier(.25, 1, .5, 1); }
  .cashier-toolbar:not(.is-expanded) .cashier-toolbar-content { display: none; }
  .cashier-toolbar.is-expanded .cashier-toolbar-content { display: block; padding: .15rem 0 .45rem; }
  .cashier-toolbar.is-expanded .cashier-toolbar-chevron { transform: rotate(180deg); }

  .cashier-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name status"
      "before current"
      "paid paid"
      "actions actions";
    align-items: center; gap: .35rem .8rem;
    padding: .7rem .8rem;
  }
  .cashier-table.table tbody td {
    display: flex; min-width: 0; padding: 0; border: 0;
    justify-content: flex-start; gap: .35rem; text-align: left;
  }
  .cashier-table.table tbody td[data-label]::before {
    content: none; text-transform: none; letter-spacing: normal;
  }
  .cashier-table .cell-name {
    grid-area: name; overflow: hidden; font-size: 1.05rem; font-weight: 750;
    line-height: 1.25; text-overflow: ellipsis; white-space: nowrap;
  }
  .cashier-table.table tbody .cell-status {
    grid-area: status; justify-self: end; text-align: right;
  }
  .cashier-table .cell-balance-before { grid-area: before; }
  .cashier-table .cell-balance { grid-area: current; justify-self: end; }
  .cashier-table .cell-balance-before,
  .cashier-table .cell-balance {
    align-items: baseline; font-variant-numeric: tabular-nums; font-weight: 700;
  }
  .cashier-table .cell-balance-before::before,
  .cashier-table .cell-balance::before,
  .cashier-table .cell-paid::before {
    color: var(--text-muted); font-size: .78rem; font-weight: 500;
  }
  .cashier-table.table tbody td.cell-balance-before[data-label]::before { content: "Было"; }
  .cashier-table.table tbody td.cell-balance[data-label]::before { content: "→ Сейчас"; }
  .cashier-table.table tbody tr[data-cashier-changed="false"] .cell-balance-before { display: none; }
  .cashier-table.table tbody tr[data-cashier-changed="false"] .cell-balance {
    grid-column: 1 / -1; justify-self: start;
  }
  .cashier-table.table tbody tr[data-cashier-changed="false"] td.cell-balance[data-label]::before { content: "Баланс"; }
  .cashier-table.table tbody tr:is([data-status="waiting"], [data-status="reserve"]) .cell-balance-before { display: none; }
  .cashier-table.table tbody tr:is([data-status="waiting"], [data-status="reserve"]) .cell-balance {
    grid-column: 1 / -1; justify-self: start;
  }
  .cashier-table.table tbody tr:is([data-status="waiting"], [data-status="reserve"]) td.cell-balance[data-label]::before { content: "Баланс"; }
  .cashier-table .cell-paid {
    grid-area: paid; align-items: baseline; color: var(--pos); font-weight: 700;
  }
  .cashier-table.table tbody td.cell-paid[data-label]::before { content: "Внесено сегодня"; }
  .cashier-table .cell-paid.is-zero { display: none; }
  .cashier-table.table tbody .cell-actions {
    grid-area: actions; justify-content: flex-start; padding-top: .15rem;
  }
  .form-row > label { width: 100%; min-width: 0; max-width: 100%; flex: 1 0 100%; }
  .form-row input, .form-row select { width: 100%; min-width: 0; }
  .form-row > .btn { width: 100%; }
  .table tbody td.skills-cell { flex-wrap: wrap; justify-content: flex-end; }
  .table tbody td.skills-cell::before { flex: 1 0 100%; text-align: left; }
  .edit-details { width: 100%; max-width: 100%; }
  .edit-details > summary { margin-left: auto; }
  .edit-form { grid-template-columns: 1fr; width: 100%; max-width: 100%; }
  .edit-form input, .edit-form select { width: 100%; min-width: 0; }
  .ratings-grid { grid-template-columns: 1fr; }
  .table tbody td[data-label="Правка"], .table tbody td[data-label="Действия"] { align-items: stretch; flex-wrap: wrap; }
  .table tbody td[data-label="Правка"]::before, .table tbody td[data-label="Действия"]::before { flex: 1 0 100%; text-align: left; }
  .cell-actions .btn, .cell-actions .amount-input, .context-action { min-height: 42px; }
  .cell-actions { gap: .4rem; }
  .context-menu { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; top: auto; }

  .game-participant-sections { gap: 1.15rem; }
  .game-participant-section-title { padding: .65rem .75rem; }
  .game-participants-table tbody tr {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name name" "status balance";
    align-items: center; gap: .35rem .75rem;
    min-height: 68px; padding: .6rem 2.75rem .6rem .8rem;
  }
  .game-participants-table.table tbody td {
    display: block; padding: 0; border: 0; text-align: left;
  }
  .game-participants-table.table tbody td[data-label]::before { content: none; }
  .game-participants-table .game-participant-name {
    grid-area: name; min-width: 0; overflow: hidden; line-height: 1.2;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .game-participants-table .game-participant-status { grid-area: status; justify-self: start; }
  .game-participants-table .game-participant-balance {
    grid-area: balance; justify-self: end; font-size: .82rem; font-variant-numeric: tabular-nums;
  }
  .game-participants-table .game-participant-balance.is-zero { display: none; }
  .game-participants-table .game-participant-action { position: static; }
  .game-participants-table .participant-status-quick-form { position: relative; z-index: 2; }
  .game-participant-open {
    position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0;
    border: 0; background: transparent; color: transparent; font-size: 0;
  }
  .game-participant-open::after {
    content: "›"; position: absolute; right: .9rem; top: calc(50% - 1px);
    color: var(--text-muted); font-size: 1.55rem; line-height: 1;
    transform: translateY(-50%);
  }
  .game-participant-open:hover, .game-participant-open:active {
    background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  }
  .game-participant-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}
@media (min-width: 720px) {
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- monthly games calendar ---------- */
.calendar-panel { margin: 1rem 0 1.4rem; }
.calendar-heading {
  display: grid; grid-template-columns: auto 1fr auto; gap: .75rem;
  align-items: center; margin-bottom: .65rem; text-align: center;
}
.calendar-heading h2 { margin: 0; }
.calendar-heading p { margin: .15rem 0 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays {
  color: var(--text-muted); font-size: .72rem; font-weight: 800;
  text-align: center; text-transform: uppercase; letter-spacing: .04em;
}
.calendar-weekdays span { padding: .35rem .1rem; }
.calendar-day {
  min-height: 78px; padding: .28rem; background: var(--surface);
  border: solid var(--border); border-width: 1px 0 0 1px;
}
.calendar-day:nth-child(7n) { border-right-width: 1px; }
.calendar-day:nth-last-child(-n + 7) { border-bottom-width: 1px; }
.calendar-outside { background: var(--surface-2); opacity: .48; }
.calendar-sunday { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.calendar-today { box-shadow: inset 0 0 0 2px var(--accent); }
.calendar-day-head { display: flex; justify-content: space-between; align-items: center; }
.calendar-number { font-size: .78rem; font-weight: 800; }
.calendar-add {
  position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; color: var(--accent); font-weight: 900; font-size: 1rem;
}
.calendar-add::before { content: ""; position: absolute; inset: -7px; }
.calendar-add:hover, .calendar-add:focus-visible { background: var(--accent); color: var(--accent-text); }
.calendar-event {
  display: block; margin-top: .22rem; padding: .2rem .28rem; border-radius: 5px;
  background: var(--surface-2); color: var(--text); font-size: .68rem;
  font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
}
.calendar-event-current { background: var(--paid-bg); color: var(--paid-text); }
.calendar-event-week {
  animation: current-game-pulse 1.7s cubic-bezier(.65, 0, .35, 1) infinite;
  box-shadow: 0 0 0 2px var(--accent);
}
@keyframes current-game-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.97); opacity: .62; }
}

/* ---------- annual rent plan ---------- */
.rent-strip { margin: .85rem 0; }
.rent-strip-heading { display: flex; justify-content: space-between; gap: .6rem; margin-bottom: .35rem; font-size: .82rem; }
.rent-strip-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .28rem; }
.rent-strip-item {
  min-height: 48px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .05rem; padding: .25rem .1rem; border: 1px solid;
  border-radius: 7px; text-align: center; font-size: .68rem;
}
.rent-strip-item.is-complete { background: var(--paid-bg); color: var(--paid-text); border-color: var(--pos); }
.rent-strip-item.is-open { background: var(--unpaid-bg); color: var(--unpaid-text); border-color: var(--neg); }
.rent-strip-item strong { font-size: 1rem; }
.rent-strip-item small { font-size: .58rem; font-weight: 800; }
.rent-strip--segmented {
  margin: .85rem 0;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.rent-strip--segmented .rent-strip-heading {
  margin: 0 0 .65rem;
  align-items: center;
  font-size: .85rem;
}
.rent-strip--segmented .rent-strip-months {
  grid-template-columns: repeat(12, minmax(4.5rem, 1fr));
  gap: 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.rent-strip--segmented .rent-strip-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 3.5rem;
  padding: .45rem .2rem;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
}
.rent-strip--segmented .rent-strip-item::before,
.rent-strip--segmented .rent-strip-item::after {
  content: "";
  position: absolute;
  left: 0;
  width: var(--rent-progress, 0%);
  pointer-events: none;
}
.rent-strip--segmented .rent-strip-item::before {
  inset-block: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--pos) 18%, transparent);
}
.rent-strip--segmented .rent-strip-item::after {
  bottom: 0;
  height: 3px;
  z-index: 1;
  background: var(--pos);
}
.rent-strip--segmented .rent-strip-item > * { position: relative; z-index: 2; }
.rent-strip--segmented .rent-strip-item:last-child { border-right: 0; }
.rent-strip--segmented .rent-strip-item strong { color: var(--pos); }
.rent-strip--segmented .rent-strip-item small { color: var(--neg); opacity: 1; }
.rent-strip-scroll-hint { display: none; }
.rent-strip--segmented .rent-strip-months:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Keep the breakpoint in sync with static/rent-strip.js. */
@media (max-width: 719px) {
  .rent-strip--segmented .rent-strip-months {
    scrollbar-width: none;
  }
  .rent-strip--segmented .rent-strip-months::-webkit-scrollbar {
    display: none;
  }
  .rent-strip-scroll-hint {
    display: block;
    margin: .35rem 0 0;
    color: var(--text-muted);
    font-size: .66rem;
    text-align: center;
  }
}
.rent-plan-section { margin: 1.4rem 0; }
.rent-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.rent-month {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--surface);
}
.rent-month > summary {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem;
  padding: .65rem; cursor: pointer; list-style: none;
}
.rent-month > summary::-webkit-details-marker { display: none; }
.rent-month-complete { border-color: var(--pos); background: var(--paid-bg); }
.rent-month-open { border-color: var(--neg); background: var(--unpaid-bg); }
.rent-month-name { font-weight: 800; }
.rent-status { text-align: right; }
.rent-month-complete .rent-status { color: var(--paid-text); }
.rent-month-open .rent-status { color: var(--unpaid-text); }
.rent-month-meta { grid-column: 1 / -1; font-size: .72rem; color: var(--text-muted); }
.rent-details { padding: 0 .65rem .65rem; background: var(--surface); border-top: 1px solid var(--border); }
.rent-plan-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.rent-plan-form label { display: flex; flex-direction: column; gap: .18rem; font-size: .72rem; color: var(--text-muted); }
.rent-plan-form button { grid-column: 1 / -1; }

@media (max-width: 520px) {
  .calendar-day { min-height: 58px; padding: .18rem; }
  .calendar-event { font-size: 0; min-height: 10px; padding: 0; }
  .calendar-number { font-size: .72rem; }
  .calendar-add { width: 24px; height: 24px; }
}
@media (min-width: 720px) {
  .calendar-day { min-height: 105px; padding: .42rem; }
  .rent-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .rent-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- finance registers ---------- */
.finance-subnav {
  display: flex; align-items: center; gap: .35rem; margin: .85rem 0 1rem;
  padding: .35rem; overflow-x: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
}
.finance-subnav .btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 auto; min-width: 0; text-align: center; line-height: 1.1; white-space: nowrap;
  font-weight: 650;
}
.finance-anchor-section { scroll-margin-top: 4rem; }
.finance-balance-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin: .45rem 0; }
.finance-balance-filters .active {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.finance-correction-details > summary {
  display: flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none;
}
.finance-correction-details > summary::-webkit-details-marker { display: none; }
.finance-correction-details > summary::after {
  content: "›"; color: var(--text-muted); font-size: 1.5rem;
  transform: rotate(90deg); transition: transform .15s ease;
}
.finance-correction-details[open] > summary::after { transform: rotate(-90deg); }
.finance-correction-details > summary h2 { margin-right: auto; }
.finance-correction-panel { margin-top: .45rem; }
.finance-balance-dialog-body { display: grid; gap: 0; }
.finance-dialog-correction-form { border-top: 1px solid var(--border); }
.finance-history-details { display: grid; gap: 0; margin: 0; padding: .25rem 1rem 1rem; }
.finance-history-details > div {
  display: grid; grid-template-columns: minmax(6rem, .45fr) 1fr; gap: .65rem;
  padding: .55rem 0; border-bottom: 1px solid var(--border);
}
.finance-history-details dt { color: var(--text-muted); font-size: .78rem; }
.finance-history-details dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.finance-history-detail-note { grid-template-columns: 1fr !important; }
.finance-history-detail-note dd { text-align: left; }
.finance-history-dialog-actions { padding: 0 1rem 1rem; }
.finance-note-marker { display: none; }
.finance-event-collected-label { display: none; }

@media (max-width: 719px) {
  .finance-subnav {
    position: sticky; top: 0; z-index: 8; margin-inline: -.25rem;
    gap: .25rem; padding: .35rem; border-radius: 9px; box-shadow: var(--shadow);
  }
  .finance-subnav .btn { min-height: 40px; padding: .4rem .25rem; }
  .finance-anchor-section { scroll-margin-top: 3.65rem; }
  .finance-list-wrap > .list-controls {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem;
  }
  .finance-list-wrap > .list-controls .list-search { grid-column: 1 / -1; width: 100%; }
  .finance-list-wrap > .list-controls .list-sort { min-width: 0; width: 100%; }
  .finance-list-wrap > .list-controls .list-sizes { display: none; }

  .finance-events-table tbody tr {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name collected" "date collected";
    align-items: center; gap: .1rem .75rem; min-height: 66px;
    padding: .55rem 2.6rem .55rem .8rem;
  }
  .finance-events-table.table tbody td {
    display: block; min-width: 0; padding: 0; border: 0; text-align: left;
  }
  .finance-events-table.table tbody td[data-label]::before { content: none; }
  .finance-events-table .finance-event-name {
    grid-area: name; overflow: hidden; font-weight: 700;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .finance-events-table .finance-event-date { grid-area: date; color: var(--text-muted); font-size: .76rem; }
  .finance-events-table.table .finance-event-date-redundant { display: none; }
  .finance-events-table .finance-event-collected {
    grid-area: collected; display: flex; flex-direction: column; align-items: flex-end;
    justify-self: end; font-weight: 750; white-space: nowrap;
  }
  .finance-events-table .finance-event-collected-label {
    display: block; color: var(--text-muted); font-size: .68rem; font-weight: 500;
  }
  .finance-events-table .finance-event-action { position: static; }
  .finance-event-open, .finance-balance-open, .finance-history-open {
    position: absolute; inset: 0; z-index: 1; display: block; width: 100%;
    padding: 0; border: 0; background: transparent; color: transparent; font-size: 0;
  }
  .finance-event-open::after, .finance-balance-open::after, .finance-history-open::after {
    content: "›"; position: absolute; right: .85rem; top: calc(50% - 1px);
    color: var(--text-muted); font-size: 1.55rem; line-height: 1;
    transform: translateY(-50%);
  }
  .finance-event-open:focus-visible, .finance-balance-open:focus-visible,
  .finance-history-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  .finance-balances-table tbody tr {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name amount" "origin status";
    align-items: center; gap: .2rem .65rem; min-height: 72px;
    padding: .6rem 2.6rem .6rem .8rem;
  }
  .finance-balances-table.table tbody td {
    display: block; min-width: 0; padding: 0; border: 0; text-align: left;
  }
  .finance-balances-table.table tbody td[data-label]::before { content: none; }
  .finance-balances-table .finance-balance-name {
    grid-area: name; overflow: hidden; font-weight: 700;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .finance-balances-table .finance-balance-amount {
    grid-area: amount; justify-self: end; font-weight: 750; white-space: nowrap;
  }
  .finance-balances-table .finance-balance-status { grid-area: status; justify-self: end; }
  .finance-balances-table .finance-balance-origin {
    grid-area: origin; overflow: hidden; color: var(--text-muted); font-size: .75rem;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .finance-balances-table tr:not([data-balance-status="debt"]) .finance-balance-origin { display: none; }
  .finance-balances-table .finance-balance-action { position: static; }
  .finance-balances-table .debt-origin-link { position: relative; z-index: 2; }

  .finance-history-table tbody tr {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date amount" "player player" "kind note";
    align-items: center; gap: .16rem .7rem; min-height: 82px;
    padding: .55rem 2.6rem .55rem .8rem;
  }
  .finance-history-table.table tbody td {
    display: block; min-width: 0; padding: 0; border: 0; text-align: left;
  }
  .finance-history-table.table tbody td[data-label]::before { content: none; }
  .finance-history-table .finance-history-date { grid-area: date; font-size: .72rem; }
  .finance-history-table .finance-history-player {
    grid-area: player; overflow: hidden; font-weight: 700;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .finance-history-table .finance-history-kind { grid-area: kind; color: var(--text-muted); font-size: .76rem; }
  .finance-history-table .finance-history-amount {
    grid-area: amount; justify-self: end; font-weight: 750; white-space: nowrap;
  }
  .finance-history-table .finance-history-note { grid-area: note; justify-self: end; font-size: 0; }
  .finance-history-table .finance-note-marker { display: inline; font-size: .72rem; }
  .finance-history-table .finance-history-action { position: static; }
}

/* ---------- trauma register ---------- */
.trauma-edit-form textarea {
  width: 100%; min-height: 6rem; resize: vertical; padding: .55rem .65rem;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; font: inherit; line-height: 1.4;
}
.trauma-edit-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.trauma-recover-form {
  display: flex; justify-content: flex-end; padding: 1rem 1.1rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 719px) {
  .traumas-register-table tbody tr {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "player status" "date status" "description description";
    align-items: start; gap: .12rem .65rem; min-height: 82px;
    padding: .6rem 2.6rem .6rem .8rem;
  }
  .traumas-register-table.table tbody td {
    display: block; min-width: 0; padding: 0; border: 0; text-align: left;
  }
  .traumas-register-table.table tbody td[data-label]::before { content: none; }
  .traumas-register-table .trauma-player {
    grid-area: player; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .traumas-register-table .trauma-date {
    grid-area: date; color: var(--text-muted); font-size: .75rem;
  }
  .traumas-register-table.table tbody .trauma-description {
    grid-area: description; display: -webkit-box; overflow: hidden;
    margin-top: .25rem; color: var(--text-muted); font-size: .78rem;
    line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
  .traumas-register-table .trauma-status { grid-area: status; justify-self: end; }
  .traumas-register-table .trauma-action { position: static; }
  .trauma-row-open {
    position: absolute; inset: 0; z-index: 1; display: block; width: 100%;
    padding: 0; border: 0; background: transparent; color: transparent; font-size: 0;
  }
  .trauma-row-open::after {
    content: "›"; position: absolute; right: .85rem; top: 50%;
    color: var(--text-muted); font-size: 1.55rem; line-height: 1;
    transform: translateY(-50%);
  }
  .trauma-row-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .trauma-recover-form .btn { width: 100%; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-event-week { animation: none; }
}

/* ---------- games workflow refresh ---------- */
.games-page-heading { align-items: flex-start; }
.games-nearest { margin-bottom: 1rem; }
.games-nearest-card.games-grid { grid-template-columns: 1fr; }
.games-nearest-card .game-card { width: 100%; min-height: 0; }
.games-view-switch {
  display: inline-flex; gap: 0; padding: .25rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.games-view-switch .btn { min-height: 38px; border: 0; box-shadow: none; }
.games-view-panel[hidden] { display: none; }
.games-past { margin-top: 1.2rem; }
.games-past > summary { cursor: pointer; list-style: none; }
.games-past > summary::-webkit-details-marker { display: none; }
.games-past > summary h2 { display: inline-block; margin-bottom: .65rem; }
.rent-mode-choice {
  display: block; min-width: 0; margin: 0; padding: 0; border: 0;
}
.rent-mode-choice legend { margin-bottom: .25rem; color: var(--text-muted); font-size: .8rem; }
.rent-mode-segments {
  display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 22rem); padding: .2rem;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
}
.rent-mode-segments .rent-mode-option {
  position: relative; display: block; min-width: 0; cursor: pointer;
}
.rent-mode-choice input[type="radio"] {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.rent-mode-segment {
  display: flex; align-items: center; justify-content: center; height: 100%;
  min-height: 44px; padding: .45rem .7rem; border-radius: 8px;
  color: var(--text); font-size: var(--control-font-size); font-weight: 700;
  line-height: 1.15; text-align: center; white-space: normal;
  transition: color 120ms cubic-bezier(.25, 1, .5, 1),
              background 120ms cubic-bezier(.25, 1, .5, 1),
              box-shadow 120ms cubic-bezier(.25, 1, .5, 1);
}
.rent-mode-option:hover .rent-mode-segment { color: var(--text); }
.rent-mode-choice input[type="radio"]:checked + .rent-mode-segment {
  color: var(--accent-text); background: var(--accent); box-shadow: var(--shadow);
}
.rent-mode-choice input[type="radio"]:focus-visible + .rent-mode-segment {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.rent-mode-manual [data-rent-calculation-input] { display: none; }
input[data-rent-target][readonly] {
  font-weight: 750; background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); cursor: default;
}
.participant-add-feedback { min-height: 1.2em; margin: .25rem 0 .55rem; color: var(--pos); }
.guest-add-details {
  margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--border);
}
.guest-add-details > summary {
  display: flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: 0 .15rem; font-weight: 700; list-style: none; cursor: pointer;
}
.guest-add-details > summary::-webkit-details-marker { display: none; }
.guest-add-details > summary::after {
  content: "⌄"; margin-left: auto; color: var(--text-muted); font-size: 1.15rem;
  transition: transform 180ms cubic-bezier(.25, 1, .5, 1);
}
.guest-add-details[open] > summary::after { transform: rotate(180deg); }
.guest-add-details[open] > summary { margin-bottom: .65rem; }
.game-view-switch { position: sticky; top: 0; z-index: 7; padding: .35rem; background: var(--bg); }
.game-view-switch .game-view-tab { flex: 1 1 0; justify-content: center; }
.game-participant-filters {
  display: flex; gap: .35rem; margin: 0 0 .8rem; padding-bottom: .15rem; overflow-x: auto;
}
.game-participant-filters .btn { min-height: 38px; white-space: nowrap; }
.game-participant-filters .is-active { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.game-participant-attendance, .game-participant-placement { white-space: nowrap; }
.game-telegram-text-action { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.game-telegram-text-action .btn { min-height: 44px; }
.game-poll-layout { display: grid; gap: .8rem; }
.game-poll-card, .game-poll-history { margin: 0; }
.game-poll-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.game-poll-heading h2, .game-poll-heading p { margin-top: 0; }
.game-poll-heading .btn { flex: 0 0 auto; min-height: 44px; }
.game-poll-form { display: grid; gap: .75rem; margin-top: 1rem; }
.game-poll-form > label { display: grid; gap: .25rem; }
.poll-mode-choice { display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
.poll-mode-choice legend { margin-bottom: .25rem; color: var(--text-muted); font-size: .8rem; }
.poll-mode-options {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 30rem); padding: .2rem;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
}
.poll-mode-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.poll-mode-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.poll-mode-segment {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  height: 100%; padding: .45rem .7rem; border-radius: 8px;
  color: var(--text); font-size: var(--control-font-size); font-weight: 700; line-height: 1.15; text-align: center;
}
.poll-mode-option input:checked + .poll-mode-segment {
  color: var(--accent-text); background: var(--accent); box-shadow: var(--shadow);
}
.poll-mode-option input:focus-visible + .poll-mode-segment { outline: 2px solid var(--accent); outline-offset: 2px; }
.game-poll-answers { display: grid; gap: .55rem; }
.game-poll-answer { align-items: end; margin: 0; }
.game-poll-answer .btn { min-height: 42px; }
.game-poll-actions { justify-content: flex-end; margin: 0; }
.game-poll-list { display: grid; gap: .55rem; }
.game-poll-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem;
  padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.game-poll-item p { margin: .2rem 0 0; }
.game-poll-item-actions { display: flex; align-items: flex-end; flex-direction: column; gap: .55rem; }
.game-poll-meta { display: flex; align-items: flex-end; flex-direction: column; gap: .35rem; color: var(--text-muted); font-size: .82rem; }
.game-poll-delete { margin: 0; }
.game-poll-delete .btn { min-height: 44px; }
.games-create-action {
  min-height: var(--control-height); padding: .48rem var(--control-padding-inline);
}
.games-create-action .icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.telegram-copy-actions #game-telegram-copy-status { margin-right: auto; }
.game-team-actions { display: flex; justify-content: flex-end; margin-top: .8rem; }
.game-team-edit-action { width: 100%; min-height: 46px; text-align: center; }
.game-money-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.game-money-summary > div:not(.game-money-progress) { display: flex; flex-direction: column; gap: .15rem; }
.game-money-summary strong { font-size: 1.15rem; }
.game-money-search-panel { margin: .8rem 0 .55rem; }
.game-money-search-panel input { width: 100%; min-height: 44px; }
.game-money-table th:last-child { width: 18rem; }
.game-payment-status { max-width: 100%; white-space: normal; }
.game-money-actions { display: flex; justify-content: flex-end; margin-top: .8rem; }
.game-money-cashier-action { min-height: 46px; text-align: center; }
.game-money-progress {
  grid-column: 1 / -1; height: 10px; overflow: hidden; background: var(--surface-2); border-radius: 999px;
}
.game-money-progress span { display: block; height: 100%; background: var(--pos); border-radius: inherit; }

@media (max-width: 719px) {
  .game-parameters-form { grid-template-columns: 1fr; }
  .game-parameter-title, .game-parameter-rent-mode { grid-column: auto; }
  .game-parameters-submit { margin-bottom: 0; }
  .section-choice { flex: 1 1 9rem; }
  .section-choice span { width: 100%; }
  .games-page-heading { display: grid; grid-template-columns: 1fr; }
  .games-page-heading .btn { width: 100%; min-height: 46px; text-align: center; }
  .games-view-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .games-view-switch .btn { width: 100%; }
  .create-game-panel .form-row { align-items: stretch; }
  .rent-mode-choice { width: 100%; min-width: 0; }
  .rent-mode-segments { width: 100%; }
  .game-view-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: -.5rem; }
  .game-view-switch .game-view-tab { min-width: 0; padding-inline: 0; }
  .game-view-switch .icon { display: none; }
  .event-title-row { align-items: flex-start; flex-direction: column; }
  .game-add-participant .manage-grid { grid-template-columns: 1fr; }
  .game-participant-filters { margin-inline: -.15rem; }
  .game-participants-table tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name attendance" "placement placement";
    min-height: 72px; padding: .65rem 2.75rem .65rem .8rem;
  }
  .game-participants-table .game-participant-name { grid-area: name; }
  .game-participants-table .game-participant-attendance { grid-area: attendance; justify-self: end; }
  .game-participants-table .game-participant-placement { grid-area: placement; justify-self: start; font-size: .82rem; }
  .game-participants-table .game-participant-action { position: static; }
  .game-telegram-text-action { width: 100%; }
  .game-telegram-text-action .btn { width: 100%; justify-content: center; }
  .game-poll-heading { flex-direction: column; }
  .game-poll-heading .btn, .game-poll-actions .btn { width: 100%; justify-content: center; }
  .game-poll-answer { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .game-poll-item { grid-template-columns: 1fr; }
  .game-poll-item-actions, .game-poll-meta { align-items: stretch; }
  .game-poll-delete, .game-poll-delete .btn { width: 100%; }
  .game-poll-meta { align-items: flex-start; }
  .game-team-actions { width: 100%; }
  .game-team-edit-action { display: flex; align-items: center; justify-content: center; }
  .game-money-summary { grid-template-columns: 1fr; }
  .game-money-progress { grid-column: 1; }
  .game-money-actions, .game-money-cashier-action { width: 100%; }
  .game-money-cashier-action { display: flex; align-items: center; justify-content: center; }
}

@media (min-width: 720px) {
  .game-team-edit-action { width: auto; min-width: 15rem; }
  .game-money-cashier-action { width: auto; min-width: 15rem; }
}

/* ---------- authentication ---------- */
.auth-page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.auth-topbar .topbar-inner { min-height: 4.25rem; }
.auth-main {
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vh, 3.5rem) .9rem;
}
.auth-card {
  width: min(100%, 27rem);
  padding: clamp(1.1rem, 4vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.auth-card-heading { margin-bottom: 1.35rem; }
.auth-card-heading h1 {
  margin-bottom: .45rem;
  font-size: clamp(1.45rem, 4vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.auth-card-heading p { max-width: 34ch; margin: 0; }
.auth-form { display: grid; gap: 1rem; }
.auth-field { display: grid; gap: .35rem; }
.auth-field > label {
  color: var(--text);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
}
.auth-field input {
  width: 100%;
  min-height: 46px;
  padding: .65rem .75rem;
  font-size: 1rem;
}
.auth-field input:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.auth-password-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.auth-password-control input {
  min-width: 0;
  border-radius: 8px 0 0 8px;
}
.auth-password-toggle {
  min-height: 46px;
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--surface-2);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--control-font-size);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.auth-password-toggle:hover { color: var(--text); }
.auth-password-toggle:focus-visible {
  position: relative;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.auth-submit {
  width: 100%;
  min-height: 46px;
  margin-top: .2rem;
}
.auth-submit:disabled { opacity: .68; cursor: wait; }
.auth-alert {
  margin: 0 0 1rem;
  padding: .7rem .8rem;
  border: 1px solid color-mix(in srgb, var(--unpaid-text) 32%, var(--border));
  border-radius: 10px;
  background: var(--unpaid-bg);
  color: var(--unpaid-text);
  font-size: .88rem;
  font-weight: 600;
}
.auth-alert.auth-notice {
  border-color: color-mix(in srgb, var(--paid-text) 32%, var(--border));
  background: var(--paid-bg);
  color: var(--paid-text);
}
.auth-footer { align-self: end; }

@media (max-width: 479px) {
  .auth-topbar .topbar-inner { min-height: 3.8rem; }
  .auth-main { place-items: start center; padding-top: 1.25rem; }
  .auth-card { padding: 1rem; }
  .auth-card-heading { margin-bottom: 1.15rem; }
  .auth-password-toggle { padding-inline: .65rem; }
}

/* ---------- notifications and staging variant lab ---------- */
.notification-lab-heading { max-width: 68ch; margin-bottom: 1rem; }
.notification-lab-heading h1 { margin-bottom: .45rem; }
.notification-lab-heading p:last-child { margin: 0; }
.notification-lab-kicker {
  display: inline-flex; margin: 0 0 .55rem; padding: .25rem .5rem;
  border-radius: 999px; background: var(--waiting-bg); color: var(--waiting-text);
  font-size: .8rem; font-weight: 700;
}
.notification-variant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.notification-variant-card {
  position: relative; display: flex; min-width: 0; flex-direction: column; gap: .85rem;
  padding: 1rem; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow);
}
.notification-variant-number {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent); font-weight: 700;
}
.notification-variant-copy { flex: 1 1 auto; }
.notification-variant-copy h2 { margin: 0 0 .4rem; }
.notification-variant-copy p { margin: 0 0 .55rem; color: var(--text-muted); }
.notification-variant-copy ul { margin: 0; padding-left: 1.2rem; color: var(--text-muted); font-size: .8rem; }
.notification-variant-actions { display: grid; gap: .45rem; }
.notification-variant-actions .btn { min-height: 44px; }
.notification-error-preview-button {
  border-color: color-mix(in srgb, var(--neg) 42%, var(--border));
  background: var(--unpaid-bg); color: var(--unpaid-text);
}
.notification-error-preview-button:hover { border-color: var(--neg); }
.notification-lab-hint {
  max-width: 68ch; margin: 1rem 0 0; padding: .75rem .85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.notification-preview-root { position: fixed; z-index: 1000; inset: 0; pointer-events: none; }
.notification-popup {
  position: fixed; left: 50%; display: flex; align-items: center; gap: .7rem;
  width: min(34rem, calc(100vw - 2rem)); min-height: 58px; padding: .7rem .65rem .7rem .8rem;
  transform: translateX(-50%); border: 1px solid; border-radius: 12px;
  box-shadow: var(--shadow-overlay); pointer-events: auto;
}
.notification-popup--top { top: max(.75rem, env(safe-area-inset-top)); }
.notification-popup--bottom { bottom: max(.75rem, env(safe-area-inset-bottom)); }
.notification-popup--success { border-color: var(--pos); background: var(--paid-bg); color: var(--paid-text); }
.notification-popup--error { border-color: var(--neg); background: var(--unpaid-bg); color: var(--unpaid-text); }
.notification-popup-icon,
.notification-preview-dialog-icon {
  display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem;
  border: 2px solid currentColor; border-radius: 999px; font-size: 1rem; font-weight: 700;
}
.notification-popup-copy { display: grid; min-width: 0; flex: 1 1 auto; gap: .08rem; }
.notification-popup-copy strong { font-size: 1rem; }
.notification-popup-copy span { font-size: 1rem; line-height: 1.35; }
.notification-popup-close {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit;
  font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.notification-popup-close:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.notification-popup-close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.notification-preview-dialog {
  width: min(27rem, calc(100vw - 1.5rem)); padding: 1.15rem;
  border: 1px solid var(--border); border-radius: 12px; color: var(--text);
  background: var(--surface); box-shadow: var(--shadow-overlay); text-align: center;
}
.notification-preview-dialog::backdrop { background: rgba(15, 22, 34, .62); }
.notification-preview-dialog[open] { display: grid; justify-items: center; gap: .65rem; }
.notification-preview-dialog h2,
.notification-preview-dialog p { margin: 0; }
.notification-preview-dialog p { color: var(--text-muted); }
.notification-preview-dialog .btn { min-width: 9rem; min-height: 44px; margin-top: .35rem; }
.notification-preview-dialog--success .notification-preview-dialog-icon { color: var(--pos); }
.notification-preview-dialog--error .notification-preview-dialog-icon { color: var(--neg); }
@media (max-width: 799px) {
  .notification-variant-grid { grid-template-columns: 1fr; }
  .notification-variant-card { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .notification-variant-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .notification-variant-actions { grid-template-columns: 1fr; }
  .notification-popup { align-items: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
  .notification-popup { animation: notification-popup-in 200ms cubic-bezier(.16, 1, .3, 1); }
  .notification-popup.is-closing { animation: notification-popup-out 180ms ease-in both; pointer-events: none; }
  .notification-preview-dialog[open] { animation: notification-dialog-in 180ms cubic-bezier(.16, 1, .3, 1); }
  @keyframes notification-popup-in {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
  @keyframes notification-popup-out {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, 8px); }
  }
  @keyframes notification-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .notification-popup.is-closing { animation: none; }
}

/* ---------- shared control contract ---------- */
/* Page layouts may change width, but not button typography, height or alignment. */
.btn.btn {
  min-height: var(--control-height);
  font-size: var(--control-font-size);
  line-height: 1.2;
}
.btn.btn-small {
  min-height: var(--control-height-compact);
  font-size: var(--control-font-size);
}
.btn.btn-icon {
  width: var(--control-height); min-width: var(--control-height); height: var(--control-height);
  padding: 0; flex-basis: var(--control-height); white-space: nowrap;
}
.btn.btn-small.btn-icon {
  width: var(--control-height-compact); min-width: var(--control-height-compact);
  height: var(--control-height-compact); flex-basis: var(--control-height-compact); padding: 0;
}
:is(.teams-tab, .context-action, .cashier-toolbar-toggle, .auth-password-toggle, .player-delete-toast-undo) {
  font-size: var(--control-font-size); line-height: 1.2;
}
:is(.theme-toggle, .nav-toggle, .player-dialog-close, .notification-popup-close, .player-delete-toast-close) {
  flex: 0 0 var(--control-height); width: var(--control-height); min-width: var(--control-height);
  height: var(--control-height); min-height: var(--control-height); padding: 0; border-radius: 8px;
}