:root {
  --bg: #f4f4f4;
  --ink: #050505;
  --panel: #ffffff;
  --muted: #d9d9d9;
  --line: #d7d7d7;
  --dark: #202020;
  --green: #07851d;
  --red: #c9162f;
  --submit-action: #0f6f32;
  --danger-action: #8f1524;
  --danger-action-border: #a51d2e;
  --blue: #1768f5;
  --soft-blue: #eef7ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

html {
  overflow-x: hidden;
}

body.night-mode {
  --bg: #071426;
  --ink: #f5f8ff;
  --panel: #10233b;
  --muted: #20395b;
  --line: #2d4566;
  --dark: #07101f;
  --soft-blue: #122b48;
  --green: #2ee66f;
  --red: #ff637a;
  --submit-action: #0f6f32;
  --danger-action: #8f1524;
  --danger-action-border: #ba2638;
}

body[data-page="owner"] {
  background: var(--bg);
}

.owner-app {
  max-width: 980px;
}

.owner-header {
  align-items: center;
  min-height: 72px;
}

.owner-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.owner-title h1 {
  margin: 0;
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1;
}

.owner-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 54px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
}

.owner-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.owner-metric {
  min-height: 120px;
  text-align: left;
  cursor: pointer;
}

.owner-metric span {
  font-size: 20px;
  font-weight: 700;
}

.owner-metric strong {
  display: block;
  margin-top: 10px;
  font-size: 42px;
}

.owner-detail {
  margin: 12px 0;
}

.owner-card {
  display: grid;
  gap: 14px;
}

.owner-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.owner-card h3 {
  margin: 0 0 8px;
  font-size: 30px;
}

.owner-card p {
  margin: 4px 0;
  color: var(--ink);
  font-size: 18px;
}

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

.owner-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}

.owner-tab {
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-blue);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.owner-tab.active {
  background: #1f6feb;
  border-color: #1f6feb;
  color: #fff;
}

.owner-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-blue);
  font-size: 20px;
}

.owner-player-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-blue);
}

.owner-player-row strong {
  display: block;
  font-size: 22px;
}

.owner-player-row small {
  display: block;
  color: #aebbd0;
  font-size: 15px;
}

.owner-row-date {
  color: #cbd7ea;
  font-size: 16px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.owner-click-row {
  width: 100%;
  min-height: 0;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.owner-subscription-card {
  display: grid;
  gap: 8px;
}

.owner-subscription-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  gap: 8px;
}

.owner-subscription-controls input,
.owner-subscription-controls button {
  min-height: 52px;
  font-size: 18px;
}

.owner-subscription-controls button.success {
  background: var(--submit-action);
  color: #fff;
  border-color: var(--submit-action);
}

.owner-member-row small {
  display: block;
  color: #aebbd0;
  font-size: 15px;
}

.owner-note {
  margin: 10px 0 0;
  color: #aebbd0;
  font-size: 16px;
}

.app {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 10px;
}

.app-header {
  display: flex;
  position: relative;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  min-height: 58px;
  margin: 3px 0 4px;
}

.brand-switch {
  display: grid;
  flex: 1 1 auto;
  grid-template-areas:
    "main"
    "banker-group"
    "label";
  align-content: start;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}

.brand-main {
  grid-area: main;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  font-size: clamp(23px, 5.5vw, 28px);
  line-height: 1.1;
  white-space: nowrap;
}

#switch-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-label {
  grid-area: label;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-left: 0;
  font-size: 15px;
  font-weight: 400;
}

.banker-group-label {
  grid-area: banker-group;
  display: none;
  min-width: 0;
  overflow: hidden;
  padding-left: 43px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  opacity: .9;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-switch .mini-label::after {
  content: "\203A";
  display: inline-block;
  font-size: 1.45em;
  font-weight: 700;
  line-height: .78;
  transform: rotate(90deg);
  transform-origin: center;
}

h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.small-link {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

.header-actions {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) 58px;
  align-items: center;
  align-content: start;
  gap: 6px;
  justify-content: flex-end;
  width: min(250px, 45vw);
}

.app > .app-header .mini-label {
  display: none;
}

.app > .app-header .brand-switch {
  grid-template-areas:
    "main"
    "banker-group";
}

.theme-toggle,
.app-view-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 56px;
  padding: 5px 16px 9px 8px;
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.1;
}

.app-view-toggle {
  min-height: 56px;
  font-size: 17px;
  font-weight: 400;
}

.theme-toggle::after,
.app-view-toggle::after,
.group-toggle:not(.is-readonly)::after {
  content: "\203A";
  position: absolute;
  right: 8px;
  bottom: 7px;
  display: inline-block;
  font-size: 1.35em;
  font-weight: 700;
  line-height: .78;
  transform: rotate(90deg);
  transform-origin: center;
}

.group-toggle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 6px;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 7px 12px;
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  font-size: 14px;
  line-height: 1.1;
}

.group-toggle.group-hidden {
  visibility: hidden;
  pointer-events: none;
}

.group-toggle span {
  grid-column: 1;
  font-weight: 400;
  opacity: .78;
}

.group-toggle b {
  grid-column: 1;
  display: block;
  max-width: 240px;
  overflow: hidden;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-toggle.is-readonly {
  cursor: default;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-align: right;
}

.group-toggle.is-readonly span {
  font-size: 13px;
}

.group-toggle.is-readonly b {
  margin-left: auto;
  font-size: 16px;
}

.app-header.banker-header-mode .header-actions {
  grid-template-columns: minmax(92px, 1fr) 58px;
  align-content: start;
  justify-items: stretch;
  flex: 0 0 min(250px, 45vw);
  width: min(250px, 45vw);
}

.app-header.banker-header-mode .header-actions::before {
  content: none;
}

.app-header.banker-header-mode .theme-toggle {
  align-self: start;
  justify-self: end;
  width: 100%;
}

.app-header.banker-header-mode .banker-group-label {
  display: block;
}

.app-header.banker-header-mode .group-toggle {
  position: absolute;
  right: 0;
  bottom: 8px;
  grid-area: group;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  width: auto;
  max-width: min(260px, 52vw);
  min-height: 0;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  text-align: right;
}

.app-header.banker-header-mode .group-toggle span {
  margin-right: 4px;
  font-size: 15px;
  opacity: 1;
}

.app-header.banker-header-mode .group-toggle span::after {
  content: ":";
}

.app-header.banker-header-mode .group-toggle b {
  max-width: 190px;
  margin-left: 0;
  font-size: 15px;
  font-weight: 700;
}

.group-picker {
  display: grid;
  gap: 12px;
}

.group-current-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  text-align: center;
}

.group-current-card b {
  font-size: 24px;
}

.group-current-card span {
  font-size: 16px;
}

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

.group-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
}

.group-choice.is-current {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.group-choice b,
.group-choice span {
  display: block;
}

.group-choice > b {
  font-size: 24px;
  font-weight: 700;
}

.group-choice span {
  font-size: 15px;
  font-weight: 400;
  opacity: .8;
}

.debt-privacy-choices {
  display: grid;
  gap: 10px;
}

.debt-privacy-choice {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 0;
  padding: 14px;
  text-align: left;
}

.debt-privacy-choice.is-current {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.debt-privacy-choice b,
.debt-privacy-choice span {
  display: block;
}

.debt-privacy-choice b {
  font-size: 21px;
}

.debt-privacy-choice span {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}

.group-create-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.group-field-label {
  margin-bottom: -6px;
  font-weight: 700;
}

.group-create-row button {
  width: 100%;
  white-space: nowrap;
}

.ui-icon {
  display: inline-flex;
  width: 1.35em;
  min-width: 1.35em;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

.ui-icon-img {
  display: block;
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
}

.power-icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: currentColor;
  vertical-align: -5px;
}

.power-icon::before {
  content: "";
  position: absolute;
  inset: 5px 3px 2px;
  border: 5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}

.power-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 15px;
  border-radius: 8px;
  background: currentColor;
  transform: translateX(-50%);
}

.poker-chip-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  min-width: 1.05em;
  border: .14em solid #39d87a;
  border-radius: 50%;
  background:
    radial-gradient(circle, #39d87a 0 22%, #071426 23% 36%, transparent 37%),
    conic-gradient(#071426 0 12%, #39d87a 12% 18%, #071426 18% 37%, #39d87a 37% 43%, #071426 43% 62%, #39d87a 62% 68%, #071426 68% 87%, #39d87a 87% 93%, #071426 93% 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

.brand-switch .poker-chip-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
}

.player-chip {
  border-color: #1479a7;
  background:
    radial-gradient(circle, #1479a7 0 22%, #071426 23% 36%, transparent 37%),
    conic-gradient(#071426 0 12%, #1479a7 12% 18%, #071426 18% 37%, #1479a7 37% 43%, #071426 43% 62%, #1479a7 62% 68%, #071426 68% 87%, #1479a7 87% 93%, #071426 93% 100%);
}

body[data-page="banker"] .small-link,
body[data-page="app"] .small-link,
body[data-page="banker"] .banker-shortcuts a.tile,
.reset-link {
  display: none !important;
}

body[data-page="player"] #player-app > .app-header,
body[data-page="app"] #player-app > .app-header {
  display: none;
}

.reset-link {
  min-height: 42px;
  margin-top: 10px;
  padding: 8px 12px;
  border-color: #b9b9b9;
  background: #fff;
  color: var(--red);
  font-size: 16px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.metric,
.card,
.tile,
.guest-total {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .08);
}

.metric {
  min-height: 96px;
  padding: 12px;
}

.metric-compact {
  min-height: 72px;
}

.metric-action {
  text-align: left;
}

.metric span {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 15px;
}

.metric b {
  display: block;
  margin-top: 14px;
  font-size: 32px;
  font-weight: 700;
}

.metric-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.positive { color: var(--green); }
.negative { color: var(--red); }

button,
input,
select,
textarea {
  width: 100%;
  min-height: 58px;
  padding: 14px;
  border: 1px solid #aaa;
  border-radius: 8px;
  font: inherit;
  font-size: 22px;
}

.button-link {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border: 1px solid #aaa;
  border-radius: 8px;
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
}

button {
  cursor: pointer;
  border-color: #000;
  background: #000;
  color: #fff;
  font-weight: 700;
}

button.metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

button.metric.dashboard-action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  text-align: left;
}

.dashboard-action-card .dashboard-card-title {
  grid-column: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.dashboard-action-card .metric-count {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin-left: 0;
  font-size: 40px;
}

.dashboard-action-card .metric-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.cash-bank-card .metric-count {
  font-size: 32px;
  white-space: nowrap;
}

.cash-bank-card .metric-note {
  grid-column: 1;
  margin-top: 3px;
}

.cash-bank-card .metric-arrow {
  grid-row: 1 / span 3;
}

.metric-count {
  margin-left: auto;
  font-size: 34px;
  line-height: 1;
}

.metric-arrow {
  margin: 0;
  color: var(--ink);
  font-size: 44px;
  line-height: 1;
}

input,
select,
textarea {
  background: var(--panel);
  color: var(--ink);
  text-align: center;
}

.secondary {
  background: var(--panel);
  color: var(--ink);
  border-color: #999;
}

.cancel-action,
.modal-actions .secondary,
#cancel-guest-buyin {
  background: var(--panel);
  color: var(--ink);
  border-color: #999;
}

.submit-action,
.modal-actions button:not(.secondary):not(.danger-text),
#submit-guest {
  background: var(--submit-action);
  color: #fff;
  border-color: var(--submit-action);
}

.danger-text,
[data-deactivate],
#confirm-reset,
#confirm-deactivate-player,
#confirm-reset-group,
.reject {
  background: var(--danger-action);
  color: #fff;
  border-color: var(--danger-action-border);
}

.muted {
  background: var(--muted);
  color: var(--ink);
  border-color: #bbb;
}

.danger { background: var(--blue); }

.play.is-playing {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.play.is-pending {
  background: #e7b600;
  color: #111;
  border-color: #c99c00;
}

.banker-shortcuts,
.player-actions,
.guest-top,
.guest-bottom,
.guest-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.player-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
}

.player-status-stack {
  display: contents;
}

body[data-page="banker"] .banker-shortcuts,
body[data-page="app"] .banker-shortcuts {
  display: none;
}

.tile {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  padding: 8px;
}

button.tile { border-color: var(--line); }
.tile.danger, button.tile.danger { color: #fff; }
.player-name {
  order: 3;
  min-height: 86px;
  background: #fff;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  padding: 10px;
  font-size: 22px;
}
body.night-mode .player-name { background: var(--panel); }

.player-group-tile {
  order: 1;
  grid-column: 1 / -1;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--panel);
  text-align: center;
  white-space: nowrap;
}

.player-group-tile.needs-group {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.player-group-tile span {
  font-size: 23px;
  opacity: 1;
}

.player-group-tile b {
  display: inline;
  max-width: min(190px, 42vw);
  overflow: hidden;
  font-size: 23px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-group-notice {
  order: 2;
  grid-column: 1 / -1;
}

.player-group-notice .group-setup-card {
  width: 100%;
}

.player-status-stack .play {
  order: 4;
  min-height: 86px;
  justify-content: flex-start;
  gap: 6px;
  font-size: 19px;
}

.player-status-stack .play .status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.player-status-stack .play .status-icon-play .ui-icon-img {
  width: 4.8em;
  height: 4.8em;
  transform: translateY(4px);
}

.player-status-stack .play .status-icon-pending .ui-icon-img {
  width: 2.4em;
  height: 2.4em;
}

.subhead {
  margin: 16px 0 8px;
  font-size: 20px;
}

.pending-head {
  color: var(--ink);
  font-weight: 400;
}

.pending-head.has-pending {
  color: #ff9f1c;
  font-weight: 400;
}

.pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mini-refresh {
  width: auto;
  min-height: 38px;
  padding: 6px 14px;
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
  font-size: 15px;
}

.small-note {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.section-title {
  margin: 12px 0 8px;
  min-height: 74px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 7px;
  background: var(--dark);
  color: #fff;
  font-size: 24px;
  text-align: left;
  font-weight: 700;
}

.section-title.static {
  width: 100%;
  background: var(--dark);
  color: #fff;
  margin: 0 0 12px;
  justify-content: flex-start;
}

.section-title b { font-size: 34px; }

.title-two-line {
  display: grid;
  gap: 2px;
  line-height: 1.08;
}

.title-two-line > span:first-child {
  display: flex;
  align-items: center;
}

.panel-content { display: none; }
.panel-content.is-open {
  display: grid;
  gap: 12px;
}

.panel-content > .card {
  display: grid;
  gap: 12px;
}

body.night-mode .player-lower,
body.night-mode .banker-lower {
  background: var(--panel);
  margin: 12px -10px -10px;
  padding: 12px 10px 18px;
}

.card {
  padding: 18px;
  margin-bottom: 12px;
  font-size: 22px;
}

.auth-card {
  margin-top: 12px;
}

#saved-title {
  display: grid;
  gap: 4px;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  text-align: center;
}

#saved-title b {
  color: #fff;
  font-size: 1.15em;
}

#saved-login-btn {
  background: var(--submit-action);
  color: #fff;
  border-color: var(--submit-action);
}

#login-btn {
  background: var(--submit-action);
  color: #fff;
  border-color: var(--submit-action);
}

.auth-card input,
.auth-card select,
.auth-card button {
  margin: 8px 0;
}

.auth-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.auth-action-row button {
  margin: 8px 0 0;
}

.auth-action-row .secondary {
  background: var(--panel);
  color: var(--ink);
  border-color: #999;
}

.auth-action-row button:not(.secondary) {
  background: var(--submit-action);
  color: #fff;
  border-color: var(--submit-action);
}

.hidden { display: none !important; }

.chip-page {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.chip-table,
.dealer-table {
  display: grid;
  gap: 10px;
}

.chip-config-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4px 12px;
  padding: 12px;
  background: #2f7d23;
  color: #fff;
  border: 1px solid #1d5d15;
  border-radius: 8px;
  text-align: center;
}

.chip-config-card b {
  grid-column: 1 / -1;
  font-size: 18px;
}

.chip-config-card span {
  font-size: 16px;
  font-weight: 700;
}

.dealer-lock-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 18px;
}

.dealer-unlock-button {
  width: 100%;
  min-height: 56px;
}

.chip-table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.chip-pot-map {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px;
  background: #176b3a;
  border: 2px solid #111;
  border-radius: 8px;
}

.chip-pot-map-card {
  width: min(100%, 360px);
  min-height: 86px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: #23834a;
  color: #fff;
  border: 2px solid #111;
  border-radius: 8px;
  text-align: center;
}

.chip-pot-map-card.is-main {
  min-height: 104px;
  background: #126033;
}

.chip-pot-map-card span { font-size: 16px; font-weight: 800; }
.chip-pot-map-card b { font-size: 28px; }
.chip-pot-map-card small { font-size: 12px; font-weight: 700; }
.chip-pot-map-card:not(:disabled) { cursor: pointer; }

.chip-pot-map-card:not(:disabled):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.chip-side-pot-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.chip-side-pot-grid .chip-pot-map-card { width: 100%; }

.chip-ledger-warning {
  padding: 10px 12px;
  background: rgba(255, 43, 43, .16);
  border: 1px solid rgba(255, 43, 43, .65);
  border-radius: 8px;
  color: #ffd8d8;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.chip-seat {
  position: relative;
  min-height: 120px;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: 10px;
  padding: 10px 12px;
  background: #0b80cf;
  color: #fff;
  border: 2px solid #111;
  border-radius: 20px;
  text-align: left;
  overflow: hidden;
}

.chip-seat-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.chip-seat-top span {
  font-size: 15px;
  white-space: nowrap;
}

.chip-seat-top b {
  font-size: 17px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-seat-pot {
  display: grid;
  place-items: center;
  min-height: 54px;
  width: 100%;
  border: 2px solid rgba(0, 0, 0, .72);
  border-radius: 999px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.chip-seat-bottom {
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.chip-seat.is-empty {
  background: #176d87;
}

.chip-seat.is-dealer {
  border-color: #8a650f;
  box-shadow: inset 0 0 0 3px #8a650f;
}

.chip-dealer-label {
  position: absolute;
  right: 7px;
  top: 50%;
  z-index: 4;
  color: #ffd45a;
  font-size: clamp(9px, 2.5vw, 14px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .38);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateY(-50%);
  transform-origin: center;
  pointer-events: none;
}

.chip-seat.is-dealer.is-nit-player {
  border-color: #ffd45a;
  box-shadow:
    inset 0 0 0 4px #ffd45a,
    0 0 0 2px rgba(255, 212, 90, .7),
    0 0 16px rgba(255, 212, 90, .65);
}

.chip-seat.is-nit-player {
  background: #a11222;
  border-color: #e24a4a;
}

.chip-seat.is-nit-player .chip-seat-pot {
  border-color: rgba(0, 0, 0, .72);
}

.chip-nit-badge {
  position: absolute;
  left: 2px;
  top: 28%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #d40000;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  border: 2px solid rgba(255, 255, 255, .86);
  z-index: 2;
}

.chip-fold-count-badge {
  position: absolute;
  left: 2px;
  top: 64%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #d40000;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  border: 2px solid rgba(255, 255, 255, .86);
  z-index: 2;
}

.chip-most-fold-adjust-badge {
  position: absolute;
  left: 2px;
  top: 64%;
  transform: translateY(-50%);
  min-width: 34px;
  height: 28px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  border: 2px solid rgba(255, 255, 255, .86);
  z-index: 3;
}

.chip-most-fold-adjust-badge.is-plus {
  background: #16a34a;
}

.chip-most-fold-adjust-badge.is-minus {
  background: #d40000;
}

.chip-seat.is-folded {
  background: rgba(23, 109, 135, .28);
  color: #c0c0c0;
  border-color: rgba(192, 192, 192, .5);
}

.chip-seat.is-out {
  background: rgba(23, 109, 135, .38);
  color: #c0c0c0;
  border-color: rgba(192, 192, 192, .58);
}

.chip-seat.is-out .chip-seat-pot {
  color: #c0c0c0;
  border-color: rgba(192, 192, 192, .72);
}

.chip-seat.is-folded .chip-seat-pot {
  color: #c0c0c0;
  border-color: rgba(192, 192, 192, .65);
}

.chip-seat.is-nit-player,
.chip-seat.is-nit-player.is-folded,
.chip-seat.is-nit-player.is-out {
  background: #a11222;
  border-color: #e24a4a;
  color: #fff;
}

.chip-seat.is-nit-player.is-dealer,
.chip-seat.is-nit-player.is-folded.is-dealer,
.chip-seat.is-nit-player.is-out.is-dealer {
  border-color: #ffd45a;
}

.chip-seat-pot.is-dealer-oval {
  background: #b9820e;
  border-color: #ffd45a;
  color: #fff;
}

.chip-seat.is-checked .chip-seat-pot {
  background: #05ad55;
  border-color: #048b45;
}

.chip-seat.is-called .chip-seat-pot {
  background: #0b6f38;
  border-color: #064f28;
  color: #fff;
}

.chip-seat.is-raised .chip-seat-pot {
  background: #7e1f78;
  border-color: #63175e;
}

.chip-seat.is-clickable {
  cursor: pointer;
}

.chip-seat.is-clickable:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.chip-seat.is-empty .chip-seat-top,
.chip-seat.is-empty .chip-seat-pot,
.chip-seat.is-empty .chip-seat-bottom {
  opacity: .45;
}

.chip-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.chip-info-card {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  background: #3b3b3b;
  color: #fff;
  border: 1px solid #222;
  border-radius: 8px;
}

.chip-info-card span {
  font-size: 16px;
  font-weight: 700;
}

.chip-info-card b {
  font-size: 18px;
}

.chip-info-card.is-clickable {
  cursor: pointer;
}

.chip-info-card.is-clickable:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.chip-pot-breakdown {
  display: grid;
  gap: 2px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

.chip-pot-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.chip-pot-breakdown span,
.chip-pot-breakdown b {
  font-size: inherit;
  font-weight: 400;
}

.chip-action-log {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
}

.chip-action-log-list {
  display: grid;
  gap: 8px;
  font-size: 18px;
  font-weight: 400;
}

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

.chip-action,
.dealer-action-row button {
  min-height: 58px;
  padding: 8px;
  color: #fff;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
}

.chip-action.check { background: #05ad55; border-color: #048b45; }
.chip-action.call { background: #f2b800; border-color: #d99d00; color: #fff; }
.chip-action.fold { background: #ef0404; border-color: #c80000; }
.chip-action.raise { background: #7e1f78; border-color: #63175e; }
.chip-action.tip { background: #0d5670; border-color: #073343; }
.chip-action.muted { background: #3b3b3b; border-color: #555; }

.chip-action:disabled {
  background: #3b3b3b;
  border-color: #555;
  color: rgba(255, 255, 255, 0.55);
  cursor: not-allowed;
  opacity: 0.75;
}

.dealer-action-row button:disabled {
  background: #3b3b3b;
  border-color: #555;
  color: rgba(255, 255, 255, 0.55);
  cursor: not-allowed;
  opacity: 0.75;
}

.chip-tip-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.chip-choice-grid {
  display: grid;
  gap: 10px;
}

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

.chip-choice {
  display: grid;
  gap: 8px;
  align-items: center;
  min-height: 68px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

.chip-choice.is-selected {
  background: var(--submit-action);
  border-color: var(--submit-action);
  color: #fff;
}

.chip-choice input[type="number"],
.chip-choice input[type="text"] {
  width: 100%;
  margin: 0;
  text-align: center;
}

.number-stepper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.number-stepper input[type="number"] {
  min-width: 0;
}

.number-step-buttons {
  display: grid;
  gap: 4px;
}

.number-step-buttons button {
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
}

input[data-amount-card-input]::-webkit-outer-spin-button,
input[data-amount-card-input]::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  opacity: 0;
}

[data-amount-card-input] {
  appearance: textfield;
  -moz-appearance: textfield;
  cursor: pointer;
}

.number-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.number-keypad button {
  min-height: 52px;
  font-size: 22px;
}

.chip-total-action {
  display: grid;
  align-content: center;
  gap: 2px;
}

.chip-total-action b {
  font-size: 19px;
}

.dealer-player-actions .chip-action {
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1.1;
  text-align: center;
}

.dealer-player-actions .chip-total-action b {
  font-size: 16px;
}

.dealer-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.config-grid,
.view-picker {
  display: grid;
  gap: 10px;
}

.config-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.config-grid label {
  display: grid;
  gap: 5px;
  font-weight: 700;
}

.config-grid .config-check {
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.config-list {
  display: grid;
  gap: 12px;
}

.config-list label,
.config-row-button {
  display: grid;
  grid-template-columns: 1fr minmax(116px, auto);
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
  text-align: left;
}

.config-row-button b {
  text-align: right;
}

.config-list .is-hidden-config {
  display: none;
}

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

.view-picker {
  grid-template-columns: 1fr;
}

.view-picker button {
  width: 100%;
  min-height: 58px;
}

.two-col,
.inline-form,
.cashout-row,
.guest-row {
  display: grid;
  gap: 8px;
}

.two-col,
.cashout-row,
.guest-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inline-form {
  grid-template-columns: 1fr 110px 130px;
  margin-bottom: 10px;
}

.request-card,
.payment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding: 16px;
  border: 1px solid #b8d8ff;
  border-radius: 8px;
  background: var(--soft-blue);
  font-size: 19px;
}

.request-card h3,
.payment-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
}

.stack { display: grid; gap: 8px; }
.accept { background: var(--green); border-color: var(--green); }
.reject {
  background: var(--danger-action);
  color: #fff;
  border-color: var(--danger-action-border);
}

.row-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.subscription-status {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  color: var(--green);
}

.player-list-name {
  display: grid;
  gap: 8px;
  align-items: center;
}

.player-list-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.group-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: min(560px, 100%);
  margin: 0 auto 12px;
}

.group-info-box {
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

.settings-actions {
  display: grid;
  gap: 14px;
}

.page-availability-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
}

.page-availability-setting > span:first-child {
  display: grid;
  gap: 4px;
}

.page-availability-setting b {
  font-size: 20px;
}

.page-availability-setting small {
  color: var(--muted);
  font-size: 16px;
}

.page-availability-setting input {
  position: absolute;
  opacity: 0;
}

.settings-switch {
  position: relative;
  width: 54px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--muted);
  transition: background 0.15s ease;
}

.settings-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.page-availability-setting input:checked + .settings-switch {
  background: var(--green);
  border-color: var(--green);
}

.page-availability-setting input:checked + .settings-switch::after {
  transform: translateX(24px);
}

.page-availability-setting input:focus-visible + .settings-switch {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

#settings-section .settings-actions {
  margin-bottom: 12px;
}

.group-settings-card {
  display: grid;
  gap: 18px;
  margin-bottom: 12px;
}

.group-settings-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.group-settings-head > div {
  display: grid;
  gap: 6px;
}

.group-settings-head b {
  font-size: 24px;
}

.group-members {
  display: grid;
  gap: 10px;
}

.group-members > b {
  font-size: 24px;
}

.group-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.group-member-row span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.subscribed-button {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.role-on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.role-label {
  width: fit-content;
  margin-left: 42px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
}

.locked-card p {
  margin: 10px 0 0;
  font-size: 18px;
}

.pro-lock-message {
  color: var(--ink);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
}

.group-setup-card {
  grid-column: 1 / -1;
}

.balance-person {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
}

.balance-person-icon {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}

.balance-person b,
.balance-person span:not(.balance-person-icon) {
  display: block;
  font-weight: 700;
}

.balance-person b {
  font-size: 26px;
  margin-bottom: 18px;
}

.balance-person span:not(.balance-person-icon) {
  font-size: 27px;
  line-height: 1.15;
}

.balance-row-card {
  display: grid;
  gap: 14px;
}

.balance-row-card .balance-person {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  column-gap: 12px;
}

.balance-row-card .balance-person-icon {
  grid-row: auto;
}

.balance-row-card .balance-person b {
  margin-bottom: 0;
}

.balance-row-card .balance-person span:not(.balance-person-icon) {
  text-align: right;
  white-space: nowrap;
}

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

.bank-balance-card {
  display: grid;
  gap: 14px;
}

.bank-balance-card > b {
  font-size: 26px;
}

.bank-balance-lines {
  display: grid;
  gap: 10px;
  font-size: 22px;
}

.bank-balance-lines div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, auto);
  gap: 18px;
  align-items: baseline;
}

.bank-balance-lines b {
  text-align: right;
  white-space: nowrap;
}

.chip-payout-lines {
  display: grid;
  gap: 10px;
}

.chip-payout-lines div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .75fr);
  gap: 10px;
}

.chip-payout-lines input {
  min-height: 54px;
  font-size: 22px;
}

.cashout-card-grid {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(260px, 1.15fr);
  grid-template-areas:
    "name stats"
    "controls stats";
  gap: 22px;
  align-items: start;
}

.cashout-controls {
  grid-area: controls;
  display: grid;
  gap: 10px;
  justify-items: start;
}

.cashout-name {
  grid-area: name;
  display: block;
  font-size: 24px;
  font-weight: 700;
}

.final-chip-field {
  display: grid;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
}

.final-chip-label {
  font-size: 24px;
}

.cashout-card input[type="number"] {
  font-size: 24px;
  font-weight: 700;
  max-width: 210px;
}

.cashout-stats {
  grid-area: stats;
  display: grid;
  gap: 12px;
  font-size: 23px;
}

.cashout-stats div,
.cashout-modal-lines div,
.cashout-suggestion div,
.detail-lines div {
  display: grid;
  grid-template-columns: 175px minmax(92px, auto);
  gap: 16px;
  align-items: baseline;
}

.cashout-stats span,
.cashout-modal-lines span,
.cashout-suggestion span,
.detail-lines span {
  white-space: nowrap;
}

.cashout-stats b,
.cashout-modal-lines b,
.cashout-suggestion b,
.detail-lines b {
  font-weight: 700;
  white-space: nowrap;
  text-align: left;
}

.history-card {
  display: grid;
  grid-template-columns: minmax(130px, .75fr) minmax(260px, 1.25fr);
  gap: 22px;
  align-items: start;
}

.history-name {
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
}

.history-heading {
  display: grid;
  gap: 8px;
  align-content: start;
}

.history-heading span {
  font-size: 15px;
  color: var(--ink);
}

.detail-lines {
  display: grid;
  gap: 10px;
  font-size: 22px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  width: min(210px, 100%);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.check-row input {
  width: 26px;
  min-height: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
}

.batch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .6fr);
  gap: 12px;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
}

.batch-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.batch-row b {
  font-size: 32px;
  text-align: right;
  white-space: nowrap;
}

.batch-row button {
  background: var(--submit-action);
  border-color: var(--submit-action);
  color: #fff;
}

.large-note {
  margin-bottom: 12px;
  font-size: 23px;
  font-weight: 700;
}

.payment-note,
.payment-empty {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}

.payment-empty {
  margin-bottom: 12px;
}

.guest-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: auto;
  background: var(--bg);
  padding: 10px 10px 20px;
}

.guest-screen.is-open { display: block; }

.guest-header,
.guest-screen .guest-controls,
.guest-screen #guest-list,
.guest-submit-row {
  width: min(740px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.guest-header .theme-toggle {
  grid-column: 2;
  width: 76px;
}

.guest-screen .guest-controls {
  grid-template-columns: 1fr;
  margin-bottom: 12px;
}

.guest-screen .guest-controls.hidden {
  display: none;
}

.guest-total {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: 8px;
  font-weight: 700;
  text-align: center;
}

.guest-total b {
  display: block;
  margin-top: 6px;
  font-size: 28px;
}

.guest-total.active-total {
  display: none;
}

.guest-screen.is-active-buyin .guest-total:not(.active-total) {
  display: none;
}

.guest-screen.is-active-buyin .guest-total.active-total {
  display: grid;
}

.guest-row {
  align-items: center;
  margin: 10px 0;
  padding: 8px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.guest-row b {
  font-size: 18px;
  padding-left: 4px;
}

.guest-row input {
  font-size: 20px;
  font-weight: 700;
}

.guest-row input::placeholder {
  font-size: 18px;
}

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

.guest-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.guest-action-row button {
  min-height: 58px;
}

.active-buyin-form {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.active-buyin-form h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 24px;
}

.guest-entry-modal {
  display: grid;
  gap: 18px;
}

.guest-entry-modal section {
  display: grid;
  gap: 10px;
}

.guest-entry-actions {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 10px;
}

.guest-entry-modal h4 {
  margin: 0;
  font-size: 19px;
}

dialog {
  width: min(560px, calc(100% - 28px));
  border: 0;
  border-radius: 10px;
  padding: 18px;
  font-size: 20px;
  background: var(--panel);
  color: var(--ink);
}

dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h3 { margin: 0 0 12px; font-size: 25px; }
.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.modal-actions:empty { display: none; }
.modal-actions button {
  width: 100%;
  min-width: 0;
  min-height: 58px;
}

.modal-actions button:only-child {
  grid-column: 2;
}

.breakdown-message {
  display: grid;
  gap: 14px;
  max-width: 360px;
}

.breakdown-message div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
  gap: 22px;
  align-items: baseline;
}

.breakdown-message span {
  font-size: 18px;
  line-height: 1.2;
}

.breakdown-message b {
  font-size: 18px;
  text-align: right;
  white-space: nowrap;
}

.breakdown-total {
  margin-top: 2px;
  font-weight: 700;
}

.breakdown-total span,
.breakdown-total b {
  font-size: 20px;
}

.cashout-modal-name,
.cashout-modal-final {
  color: var(--blue);
  font-size: 28px;
  font-weight: 700;
}

.cashout-modal-final {
  margin-bottom: 10px;
}

.cashout-modal-lines,
.cashout-suggestion {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  font-size: 22px;
}

.cashout-suggestion {
  margin-top: 32px;
}

.cashout-modal-lines div {
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
}

.cashout-modal-lines span {
  min-width: 0;
  white-space: normal;
}

.cashout-modal-lines b {
  text-align: right;
}

.modal-input-label {
  display: block;
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 22px;
}

@media (max-width: 520px) {
  .owner-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-card-head {
    grid-template-columns: 1fr;
  }

  .owner-member-row {
    font-size: 17px;
  }

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

  .owner-row-date {
    text-align: left;
  }

  .owner-subscription-controls {
    grid-template-columns: 1fr;
  }

  .app { padding: 9px; }
  h1 { font-size: 28px; }
  .tile { min-height: 72px; font-size: 21px; }
  .metric { min-height: 96px; padding: 11px; }
  .metric b {
    margin-top: 12px;
    font-size: 31px;
  }
  .metric span { font-size: 14px; }
  .section-title { min-height: 78px; font-size: 24px; }
  .card { font-size: 22px; }
  button, input, select, textarea { font-size: 24px; }
  .request-card, .payment-card { grid-template-columns: minmax(0, 1fr) 108px; font-size: 18px; }
  .inline-form,
  .guest-top,
  .guest-bottom,
  .guest-controls { grid-template-columns: 1fr; }
  .cashout-card-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "stats"
      "controls";
    gap: 14px;
  }
  .cashout-controls {
    grid-template-columns: minmax(0, 1fr) minmax(112px, .78fr);
    align-items: end;
    gap: 12px;
  }
  .final-chip-field {
    width: 100%;
  }
  .cashout-card input[type="number"] {
    font-size: 20px;
    max-width: none;
  }
  .check-row {
    width: 100%;
    min-height: 58px;
    align-content: center;
    margin-top: 0;
    font-size: 13px;
    gap: 7px;
    white-space: normal;
  }
  .check-row input {
    width: 20px;
    min-height: 20px;
    height: 20px;
  }
  .batch-row { grid-template-columns: 1fr; }
  .cashout-stats { font-size: 20px; }
  .cashout-stats div,
  .cashout-modal-lines div,
  .cashout-suggestion div,
  .detail-lines div {
    grid-template-columns: minmax(112px, 1fr) minmax(70px, auto);
    gap: 10px;
  }
  .cashout-card input[type="number"] {
    max-width: none;
    font-size: 17px;
  }
  .cashout-card input[type="number"]::placeholder {
    font-size: 17px;
  }
  .final-chip-label,
  .cashout-name { font-size: 19px; }
  .final-chip-label { font-size: 20px; }
  .history-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .detail-lines { font-size: 19px; }
  .history-name {
    font-size: 21px;
    white-space: normal;
  }
  .header-actions {
    grid-template-columns: minmax(90px, 1fr) 56px;
    justify-content: flex-end;
    width: min(220px, 43vw);
  }
  .app-header.banker-header-mode .header-actions {
    grid-template-columns: minmax(90px, 1fr) 56px;
    flex-basis: min(220px, 43vw);
    width: min(220px, 43vw);
  }
  .theme-toggle,
  .app-view-toggle,
  .group-toggle {
    min-height: 40px;
    padding: 5px 16px 9px 8px;
  }
  .app-view-toggle {
    min-height: 56px;
    font-size: 15px;
  }
  .theme-toggle {
    min-height: 56px;
    font-size: 13px;
  }
  .group-toggle b { font-size: 17px; }
  .app-header {
    min-height: 52px;
    gap: 5px;
    margin: 2px 0 3px;
  }
  .brand-main {
    font-size: clamp(22px, 5.7vw, 27px);
  }
  .brand-switch .poker-chip-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }
  .app-header.banker-header-mode .group-toggle {
    min-height: 0;
    padding: 0;
    max-width: min(240px, 56vw);
  }
  .app-header.banker-header-mode .group-toggle span,
  .app-header.banker-header-mode .group-toggle b {
    font-size: 13px;
  }
  .app-header.banker-header-mode .group-toggle b {
    max-width: 142px;
  }
  .player-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .player-name {
    min-height: 82px;
    font-size: 20px;
  }
  .player-group-tile {
    min-height: 60px;
  }
  .player-group-tile span {
    font-size: 21px;
  }
  .player-group-tile b {
    max-width: min(440px, 70vw);
    font-size: 21px;
  }
  .player-status-stack .play {
    min-height: 82px;
    font-size: 18px;
  }
}