:root {
  color-scheme: dark;
  --bg: #101919;
  --host-bg: var(--tg-theme-bg-color, #0a0e17);
  --surface: #182322;
  --surface-raised: #202f2c;
  --text: #eff6f2;
  --hint: #a4b9b1;
  --accent: #8ad5be;
  --accent-hover: #afe5d2;
  --accent-text: #101919;
  --danger: #ffb5aa;
  --success: #8ad5be;
  --warning: #e6c489;
  --line: #465b54;
  --local: var(--warning);
  --l7-color: #80b5df;
  --l8-color: #a78bfa;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, .08);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, .24);
  --field-bg: #111c1a;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-control: 10px;
  --radius-panel: 18px;
  --motion-fast: 120ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ui-safe-top: max(env(safe-area-inset-top), var(--tg-safe-area-inset-top, 0px));
  --ui-safe-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  --ui-safe-left: env(safe-area-inset-left);
  --ui-safe-right: env(safe-area-inset-right);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f6f3; --surface: #ffffff; --surface-raised: #eaf0eb;
    --text: #142825; --hint: #50635b; --accent: #17674f; --accent-hover: #10543e;
    --accent-text: #ffffff; --danger: #a82c38; --success: #17674f; --warning: #795519;
    --line: #83978c; --field-bg: #f8faf7; --l7-color: #275f91; --l8-color: #7043a2;
    --shadow-md: 0 16px 40px rgba(20, 40, 37, .12);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f3; --surface: #ffffff; --surface-raised: #eaf0eb;
  --text: #142825; --hint: #50635b; --accent: #17674f; --accent-hover: #10543e;
  --accent-text: #ffffff; --danger: #a82c38; --success: #17674f; --warning: #795519;
  --line: #83978c; --field-bg: #f8faf7; --l7-color: #275f91; --l8-color: #7043a2;
}

:root[data-theme-profile="mineral"][data-theme="dark"] {
  --bg: #101919; --surface: #182322; --surface-raised: #202f2c; --field-bg: #111c1a;
  --text: #eff6f2; --hint: #a4b9b1; --accent: #8ad5be; --accent-hover: #afe5d2;
  --accent-text: #101919; --danger: #ffb5aa; --success: #8ad5be; --warning: #e6c489; --line: #465b54;
}
:root[data-theme-profile="mineral"][data-theme="light"] {
  --bg: #f4f6f3; --surface: #ffffff; --surface-raised: #eaf0eb; --field-bg: #f8faf7;
  --text: #142825; --hint: #50635b; --accent: #17674f; --accent-hover: #10543e;
  --accent-text: #ffffff; --danger: #a82c38; --success: #17674f; --warning: #795519; --line: #83978c;
}

:root[data-theme-profile="journal"][data-theme="dark"] {
  --bg: #1c1815; --surface: #27221e; --surface-raised: #342d28; --field-bg: #151210;
  --text: #f5efe6; --hint: #b5a596; --accent: #e09f3e; --accent-hover: #f3b55a;
  --accent-text: #1c1815; --danger: #f87171; --success: #4ade80; --warning: #fbbf24; --line: #54473f;
}
:root[data-theme-profile="journal"][data-theme="light"] {
  --bg: #fbf8f3; --surface: #ffffff; --surface-raised: #f2ebd9; --field-bg: #fbf9f5;
  --text: #2a2118; --hint: #5c4d3c; --accent: #85440c; --accent-hover: #6b3305;
  --accent-text: #ffffff; --danger: #991b1b; --success: #14532d; --warning: #854d0e; --line: #d4c5b3;
}

:root[data-theme-profile="desk"][data-theme="dark"] {
  --bg: #0b1120; --surface: #131d31; --surface-raised: #1c2a45; --field-bg: #0d1527;
  --text: #f0f6fc; --hint: #8ba2c0; --accent: #38bdf8; --accent-hover: #7dd3fc;
  --accent-text: #0b1120; --danger: #f87171; --success: #34d399; --warning: #fbbf24; --line: #2e4164;
}
:root[data-theme-profile="desk"][data-theme="light"] {
  --bg: #f0f4f8; --surface: #ffffff; --surface-raised: #e2e8f0; --field-bg: #f8fafc;
  --text: #0f172a; --hint: #334155; --accent: #0369a1; --accent-hover: #075985;
  --accent-text: #ffffff; --danger: #b91c1c; --success: #065f46; --warning: #92400e; --line: #94a3b8;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
#app {
  min-height: 100vh;
  padding: calc(14px + var(--tg-safe-area-inset-top, 0px)) 14px calc(96px + var(--tg-safe-area-inset-bottom, 0px));
}
.screen { max-width: 760px; min-width: 0; margin: 0 auto; }
.wide-screen { max-width: 1180px; }
/* One read-only phase projection, driven by the existing management ticker.
 * Keep it outside Participants/R4 and below the mobile inspector's z-index. */
.management-phase-strip {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.management-phase-facts { display: grid; gap: 3px; min-width: 0; font-size: 12px; }
.management-phase-facts strong { font-size: 15px; }
.management-phase-strip .timer { flex: 0 0 auto; margin: 0; font-size: 26px; letter-spacing: .02em; }
.tournament-finish-slot:empty { display: none; }
.tournament-finish-confirm { margin-top: 14px; }
.tournament-finish-confirm .readiness-copy { white-space: pre-line; }
@media (min-width: 861px) {
  .management-phase-strip { width: calc((100% - 12px) * 1.45 / 2.2); box-sizing: border-box; }
  .management-phase-strip-local { top: max(56px, env(safe-area-inset-top)); }
}
.screen-header { margin: 0 0 16px; font-size: clamp(22px, 3vw, 28px); line-height: 1.16; letter-spacing: -.02em; overflow-wrap: anywhere; }
.status-message, .empty-state, .error-state { margin: 32px 0; color: var(--hint); text-align: center; white-space: pre-line; }
.error-state { color: var(--danger); }
.event-list, .facts { display: grid; gap: 12px; }
.event-card, .panel, .fact { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px; box-shadow: var(--shadow-sm); }
.event-card { width: 100%; border: 1px solid var(--line); color: inherit; text-align: left; cursor: pointer; min-height: 82px; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.event-card:hover { border-color: var(--line); background: var(--surface-raised); transform: translateY(-1px); }
.participants-entry { width: 100%; margin-top: 12px; }
.participant-list { margin: 8px 0 0; padding-left: 20px; }
.event-card:focus-visible, .retry:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.event-card-title, .panel-title { display: block; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.event-card-meta, .muted { display: block; margin-top: 4px; color: var(--hint); font-size: 14px; }
.panel { margin-top: 12px; }
.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.fact-label { display: block; color: var(--hint); font-size: 13px; }
.fact-value { display: block; margin-top: 3px; font-weight: 600; overflow-wrap: anywhere; }
.timer { font-variant-numeric: tabular-nums; font-size: clamp(38px, 12vw, 58px); font-weight: 800; line-height: 1; letter-spacing: .04em; margin: 13px 0; text-shadow: none; }
.table-summary { font-size: 22px; font-weight: 700; margin: 4px 0; }
.retry { border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-text); padding: 11px 16px; cursor: pointer; font-weight: 700; }
.controls-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.control-btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-text);
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.control-btn:hover:not(:disabled), .retry:hover:not(:disabled) { background: var(--accent-hover); box-shadow: none; }
.control-btn:active:not(:disabled), .small-btn:active:not(:disabled), .nav-btn:active:not(:disabled) { transform: scale(.98); }
.control-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.control-btn-full { grid-column: 1 / -1; }
.action-feedback { margin: 8px 0 0; color: var(--hint); font-size: 14px; }
.rsvp-current { margin: 8px 0; }
.rsvp-actions, .rsvp-presets, .rsvp-confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.rsvp-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rsvp-btn, .rsvp-preset-btn, .rsvp-bot-fallback { border: 1px solid var(--accent); border-radius: 10px; background: var(--accent); color: var(--accent-text); padding: 10px 8px; cursor: pointer; min-height: 44px; }
.rsvp-btn:disabled, .rsvp-preset-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rsvp-btn-current { box-shadow: inset 0 0 0 2px var(--surface); }
.rsvp-btn-secondary, .rsvp-bot-fallback { background: transparent; color: var(--accent); }
.rsvp-feedback { margin: 10px 0 0; color: var(--hint); font-size: 14px; }
.rsvp-confirmation { margin-top: 12px; border-left: 3px solid var(--accent); padding: 10px 12px; background: var(--surface); border-radius: 8px; }
.rsvp-consequence-list { margin: 8px 0; padding-left: 20px; }
.rsvp-bot-fallback { width: 100%; margin-top: 12px; }
.local-banner { position: sticky; top: 6px; z-index: 5; display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 8px 11px; border-radius: 10px; background: rgba(120, 83, 12, .35); color: var(--warning); border: 1px solid rgba(251, 191, 36, .38); box-shadow: var(--shadow-sm);  font-size: 12px; }
.local-banner .muted { color: var(--warning); margin: 0; }
.local-banner[hidden] { display: none; }
.home-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-link { min-width: 0; min-height: 48px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--text); text-align: left; font-weight: 650; cursor: pointer; overflow-wrap: anywhere; }
.home-link:hover { border-color: var(--accent); }
.inline-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.inline-filters .small-btn { min-height: 36px; padding: 6px 10px; }
.inline-filters [aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.history-list { display: grid; gap: 6px; margin-top: 10px; }
.history-row { display: block; width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); color: var(--text); text-align: left; cursor: pointer; line-height: 1.4; overflow-wrap: anywhere; }
.history-row:hover { border-color: var(--accent); }
.result-scroll { overflow-x: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; }
.result-table { width: 100%; border-collapse: collapse; min-width: 620px; font-variant-numeric: tabular-nums; }
.result-table th, .result-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.result-table th { font-size: 12px; color: var(--hint); white-space: nowrap; }
.result-table td:first-child, .result-table td:nth-child(n+3):nth-child(-n+6) { white-space: nowrap; }
.result-table details { max-width: 230px; }
.local-kicker { margin: 18px 0 5px; color: var(--local); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.main-nav-surface { margin: 0 0 16px; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  margin: 0;
  padding: 6px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.main-nav::-webkit-scrollbar { display: none; }
.nav-btn {
  flex-shrink: 0;
  min-width: 0;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--hint);
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 650;
  transition: background .15s ease, color .15s ease;
}
.nav-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
.nav-btn-active { background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-sm); }
.contextual-return-row { display: flex; margin-top: 8px; }
.contextual-return-action {
  max-width: 100%; min-height: 36px; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text); padding: 7px 12px; cursor: pointer; white-space: nowrap;
  font-size: 13px; font-weight: 650;
}
.contextual-return-action:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); }

.identity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 24px; }
.identity-card { display: grid; gap: 4px; min-height: 92px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.identity-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; }
.form-field { display: grid; gap: 5px; min-width: 0; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--field-bg); color: inherit; padding: 10px; min-height: 42px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 17%, transparent); }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: 12px; }
.data-list { display: grid; gap: 6px; margin-top: 12px; }
.data-row { padding: 11px 2px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.person-picker { display: grid; gap: 10px; margin: 12px 0 18px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field-bg); }
.picker-results { display: grid; grid-auto-rows: max-content; align-content: start; gap: 6px; max-height: 280px; overflow-y: auto; }
.person-choice { width: 100%; justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }
.person-choice[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.inline-error { color: var(--danger); margin: 8px 0; font-size: 14px; }
.readiness-copy { white-space: pre-line; line-height: 1.55; }
.wallet-movement { display: grid; gap: 3px; }
.row-actions > .form-field { min-width: 130px; flex: 1 1 150px; }
.warning-row { color: var(--local); }
.json-view { max-height: 260px; margin: 10px 0 0; overflow: auto; white-space: pre-wrap; font-size: 12px; }
.structure-editor { min-height: 220px; margin-top: 12px; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }
.person-card { display: grid; gap: 9px; margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field-bg); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.row-actions > * { min-width: 0; max-width: 100%; }
.small-btn {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 650;
  overflow-wrap: anywhere;
  white-space: normal;
}
.small-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: var(--accent); }
.small-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.danger-btn { background: var(--danger); border-color: var(--danger); color: white; }

/* Responsive 2-column organizer workspace */
.management-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}
.management-grid > * { min-width: 0; }
.notice-category { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; margin-top: 12px; }
.notice-category > strong, .notice-category > p, .notice-category > .form-field { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .management-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }
}

/* Structure Editor UI */
.structure-summary-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 10px;
  align-items: center;
}
.structure-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: var(--field-bg);
  border: 1px solid var(--line);
}
.l7-badge {
  background: color-mix(in srgb, var(--l7-color) 12%, var(--surface));
  border-color: var(--l7-color);
  color: var(--l7-color);
}
.l8-badge {
  background: color-mix(in srgb, var(--l8-color) 12%, var(--surface));
  border-color: var(--l8-color);
  color: var(--l8-color);
}
.structure-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 8px;
}
.structure-tab-btn {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--field-bg);
  color: inherit;
  font-size: 13px;
  cursor: pointer;
}
.structure-tab-active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.structure-table-wrap {
  margin-top: 12px;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.structure-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}
.structure-table th {
  position: sticky;
  top: 0;
  background: var(--surface);
  padding: 8px 10px;
  border-bottom: 2px solid var(--line);
  font-weight: 700;
  z-index: 1;
}
.structure-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.break-row {
  background: color-mix(in srgb, var(--local) 10%, var(--surface));
  color: var(--local);
  font-weight: 600;
}
.l7-row {
  box-shadow: inset 3px 0 0 var(--l7-color);
}
.l8-row {
  box-shadow: inset 3px 0 0 var(--l8-color);
}
.row-edit-form {
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  margin: 6px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  align-items: end;
}

.draft-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--warning) 20%, transparent);
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
}

.saved-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}

.current-level-row {
  background: color-mix(in srgb, var(--accent) 22%, transparent) !important;
  box-shadow: inset 4px 0 0 var(--accent);
  font-weight: 600;
}

.past-level-row {
  opacity: 0.55;
  background: var(--field-bg);
}

.live-timer-panel {
  display: grid;
  gap: 8px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.live-timer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* In-DOM inline drawers for participant actions */
.inline-action-drawer {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  display: grid;
  gap: 8px;
}
.inline-action-drawer .controls-grid {
  margin-top: 4px;
}

/* UX01: search remains in the normal operational roster; the inspector is contextual.
 * On narrow Telegram viewports it is a fixed sheet, rather than a below-list target. */
.roster-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.roster-list-panel { margin-top: 0; }
.roster-search { width: 100%; min-width: 0; min-height: 44px; margin: 10px 0 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--text); }
.roster-search:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.roster-search-status { min-height: 1.4em; margin: 4px 0 8px; color: var(--hint); font-size: 13px; }
.roster-inspector { min-width: 0; margin-top: 0; align-self: start; border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
.roster-unknown-state { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warning) 65%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--warning) 12%, transparent); }
.roster-unknown-state > p { margin: 0; }
.roster-unknown-summary { display: grid; gap: 6px; margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--warning); border-radius: 8px; background: color-mix(in srgb, var(--warning) 10%, transparent); }
.roster-unknown-summary > p { margin: 0; }
.roster-inspector-entry { margin-top: 2px; }
.roster-participant-selected { border-color: color-mix(in srgb, var(--accent) 64%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); }

@media (max-width: 860px) {
  .roster-inspector-empty { display: none; }
  .roster-inspector {
    position: fixed;
    z-index: 30;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    max-height: min(72dvh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, .45);
  }
}

@media (min-width: 861px) {
  .roster-participants-section { min-width: 0; }
  /* The inspector is a sibling of the overflow-clipped accordion.  Sticky is consequently
   * bounded by this Participants section, never the document viewport. */
  .roster-participants-section-selected {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
    gap: 12px;
    align-items: start;
  }
  .roster-participants-section-selected > .roster-inspector {
    position: sticky;
    top: max(16px, env(safe-area-inset-top));
    max-height: calc(100dvh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-md);
  }
}

/* Event badges */
.event-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.tournament-badge { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.cash-badge { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }

/* Reusable Collapsible Sections (Accordions) */
.ux-accordion {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .15s ease;
}
.ux-accordion:hover {
  border-color: var(--line);
}
.ux-accordion[open],
.ux-accordion.open {
  border-color: var(--line);
}
.ux-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  text-align: left;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  min-height: 44px;
}
.ux-accordion-summary::-webkit-details-marker {
  display: none;
}
.ux-accordion-title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.ux-accordion-title {
  font-size: 15px;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.ux-accordion-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--line);
  color: var(--hint);
  border: 1px solid var(--line);
}
.ux-accordion-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--hint);
  transition: transform .2s ease;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.ux-accordion[open] > .ux-accordion-summary .ux-accordion-chevron,
.ux-accordion.open > .ux-accordion-summary .ux-accordion-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
.ux-accordion-body {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: var(--field-bg);
}
.ux-accordion-body.hidden {
  display: none !important;
}

/* Live Management Hero Card */
.live-hero-card {
  margin-top: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  display: grid;
  gap: 8px;
}
.live-hero-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.live-hero-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.01em;
}
.phase-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.phase-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
}
.phase-pill-open {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  color: var(--success);
}
.phase-pill-closed {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
}
.actions-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.control-btn-secondary {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--text);
}
.control-btn-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
  color: var(--accent-text);
  box-shadow: none;
}
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .controls-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
  .inline-form { grid-template-columns: 1fr; }
  .home-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .local-banner { position: static; display: grid; }
  .row-actions .small-btn { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  #app { padding-left: 10px; padding-right: 10px; }
  .structure-table { font-size: 12px; }
  .structure-table th, .structure-table td { padding: 6px 6px; }
}

@media (min-width: 861px) {
  #app { padding-top: 24px; }
  .wide-screen .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wide-screen > .panel { margin-top: 16px; }
  .management-grid { gap: 20px; }
}

@media (min-width: 700px) and (max-height: 500px) {
  #app { padding: 8px 14px 30px; }
  .screen { max-width: 1180px; }
  .main-nav { margin-bottom: 10px; }
  .screen-header { font-size: 22px; margin-bottom: 10px; }
  .wide-screen .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .management-grid { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); }
}

@media (max-width: 360px) {
  .home-entries { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  #app { padding-left: 8px; padding-right: 8px; }
  .event-card, .panel, .fact { padding: 12px; }
  .nav-btn { padding: 6px 10px; font-size: 12.5px; }
  .local-banner { font-size: 11px; }
  .rsvp-presets { grid-template-columns: 1fr; }
}

.small-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  border-color: var(--accent);
  font-weight: 600;
}

.elim-batch-summary {
  margin: 10px 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}

.elim-batch-list {
  margin: 6px 0 0 18px;
  padding: 0;
}

/* TB-MINIAPP-BULK-ACTIONS-UI-34: Unified bulk selection workflow */
.bulk-select-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.bulk-select-count {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
}

.bulk-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.bulk-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 800;
  font-size: 13px;
  margin-right: 8px;
  flex-shrink: 0;
}

.bulk-unselected-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  border: 1.5px dashed var(--hint);
  color: var(--hint);
  font-size: 12px;
  margin-right: 8px;
  flex-shrink: 0;
}

.bulk-incompatible-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
  font-size: 12px;
  margin-right: 8px;
  flex-shrink: 0;
}

.bulk-card-selected {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 9%, transparent) !important;
}

.bulk-card-incompatible {
  opacity: 0.45;
  cursor: not-allowed !important;
}

.bulk-incompatible-hint {
  display: block;
  font-size: 11.5px;
  color: var(--danger);
  margin-top: 4px;
}

.bulk-filter-input {
  width: 100%;
  padding: 8px 12px;
  margin: 6px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.bulk-filter-input:focus {
  border-color: var(--accent);
  outline: none;
}

.bulk-ordered-list,
.bulk-preview-steps {
  margin: 10px 0 10px 22px;
  padding: 0;
  line-height: 1.6;
}

.bulk-ordered-list li,
.bulk-preview-steps li {
  margin-bottom: 4px;
}

.bulk-preview-warning {
  margin: 12px 0;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-radius: 10px;
  color: var(--warning);
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-line;
}

.bulk-preview-info {
  margin: 12px 0;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
  color: var(--accent);
  font-size: 13.5px;
  line-height: 1.45;
}

.bulk-actions-grid {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  grid-template-columns: 1fr;
}

.person-finance-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

/* Premium Tournament Control: one presentation system for all existing consumers. */
body { background: var(--bg); font-size: 16px; line-height: 1.5; }
#app {
  min-height: var(--ui-stable-height, 100dvh);
  padding: calc(20px + var(--ui-safe-top)) max(16px, var(--ui-safe-right)) calc(40px + var(--ui-safe-bottom)) max(16px, var(--ui-safe-left));
}
.screen { max-width: 880px; }
.wide-screen { max-width: 1200px; }
.screen-header { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 650; letter-spacing: -.045em; margin: 24px 0 20px; }
h2, h3 { line-height: 1.25; letter-spacing: -.025em; }
p { overflow-wrap: anywhere; }
.eyebrow, .local-kicker, .group-title, .form-steps { color: var(--hint); font-size: .75rem; font-weight: 650; letter-spacing: .08em; }
.local-kicker { margin-top: 24px; }
.local-banner { position: static; background: var(--surface); color: var(--warning); border: 0; border-left: 2px solid var(--warning); border-radius: 4px; padding: 5px 10px; box-shadow: none; font-size: .6875rem; }
.app-brand { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 0 14px; }
.app-brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: 1.125rem; }
.app-brand-name { font-size: 1rem; font-weight: 650; letter-spacing: -.025em; }
.main-nav { border-radius: 12px; padding: 4px; background: var(--surface); border-color: var(--line); }
.nav-btn { min-height: 44px; padding: 9px 14px; font-size: .8125rem; font-weight: 600; gap: 8px; }
.nav-btn-active { background: var(--accent); color: var(--accent-text); box-shadow: none; }
.ui-icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contextual-return-action { min-height: 44px; border-radius: var(--radius-control); }
.home-intro { margin: 0 0 24px; }
.home-intro-copy { font-size: 1.1rem; margin: 6px 0 0; color: var(--hint); max-width: 34em; }
.home-entries { gap: 10px; }
.home-link { min-height: 68px; border-radius: 14px; padding: 16px; font-weight: 600; background: var(--surface); display: flex; align-items: center; text-align: left; transition: border-color var(--motion-fast) var(--ease); }
.home-primary-entry { background: var(--accent); color: var(--accent-text); border-color: var(--accent); grid-column: 1 / -1; min-height: 86px; font-size: 1.2rem; }
.home-primary-entry::after { content: '→'; margin-left: auto; font-size: 1.5rem; }
.event-list { gap: 10px; }
.event-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; min-height: 100px; padding: 20px; border-radius: 16px; background: var(--surface); box-shadow: none; }
.event-card-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.event-card-identity .ui-icon { color: var(--accent); width: 24px; height: 24px; }
.event-card-meta { grid-column: 1 / -1; font-size: .8125rem; margin: 0; padding-left: 36px; }
.event-status-label { align-self: center; border: 1px solid var(--line); color: var(--hint); padding: 3px 8px; border-radius: 6px; font-size: .75rem; font-weight: 600; }
[data-event-status="active"] .event-status-label { color: var(--success); border-color: var(--success); }
[data-event-type="cash"] .event-card-identity .ui-icon { color: var(--warning); }
.panel, .ux-accordion, .person-card { background: var(--surface); border-radius: var(--radius-panel); box-shadow: none; }
.panel { padding: 20px; margin-top: 16px; }
.panel-title { font-size: .9375rem; font-weight: 650; }
.panel > h2.panel-title { margin: 0 0 12px; line-height: 1.35; }
.facts { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.fact { border: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; padding: 14px 16px; }
.fact-label, .muted { font-size: .8125rem; }
.fact-value { font-size: 1.0625rem; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.35; }
.panel > .fact { border: 0; padding: 14px 0; }
.control-btn, .small-btn, .retry, .structure-tab-btn, .rsvp-btn, .rsvp-preset-btn { min-height: 44px; border-radius: var(--radius-control); font-size: .875rem; font-weight: 600; transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); }
.small-btn { background: var(--surface-raised); color: var(--text); border-color: var(--line); }
.small-btn:hover:not(:disabled) { color: var(--text); }
.danger-btn { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.danger-btn:not(.control-btn):not(.small-btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--danger); border-radius: var(--radius-control); font-size: .875rem; font-weight: 600; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.event-workspace-bar { position: sticky; z-index: 10; top: var(--ui-safe-top); padding: 8px; margin: 12px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.event-workspace-context { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workspace-home-action { min-height: 44px; padding: 6px 12px; flex-shrink: 0; }
.event-workspace-context { color: var(--hint); font-size: .8125rem; margin: 0 4px 6px; }
.event-local-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
.event-local-tabs:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3,minmax(0,1fr)); }
.event-local-tab { min-height: 44px; padding: 8px 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font-size: .875rem; font-weight: 600; cursor: pointer; }
.event-local-tab[aria-selected="true"] { background: var(--accent); color: var(--accent-text); }
.event-local-panel { min-width: 0; }
.main-nav-secondary { position: relative; order: 4; }
.main-nav-secondary > summary { list-style: none; min-height: 44px; cursor: pointer; }
.main-nav-secondary > summary::-webkit-details-marker { display: none; }
.main-nav-secondary > summary::after { content: '⌄'; margin-left: 6px; }
.main-nav-secondary-items { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 4px; }
.main-nav-secondary:not([open]) .main-nav-secondary-items { display: none; }
.flow-toolbar { position: sticky; top: var(--ui-safe-top); z-index: 10; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.flow-toolbar > button { flex-shrink: 0; }
.flow-toolbar-context { min-width: 0; color: var(--hint); font-size: .75rem; overflow-wrap: anywhere; }
.flow-toolbar + .screen-header { margin-top: 14px; }
.club-workspace-sections { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; position: sticky; top: calc(57px + var(--ui-safe-top)); z-index: 9; padding: 6px 0; background: var(--bg); }
.club-workspace-sections button { font-size: .75rem; padding: 8px; }
.club-workspace-sections [aria-current='page'] { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
@media (max-width: 860px) {
  .main-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .main-nav-secondary > summary { justify-content: center; }
}
.event-local-panel > [hidden] { display: none !important; }
.event-workspace-bar .management-phase-strip { position: static; margin: 6px 0 0; padding: 6px 4px 0; width: 100%; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
.event-workspace-bar .management-phase-strip:has(.phase-toggle) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; }
.event-workspace-bar .management-phase-strip .phase-toggle { grid-column: 2; grid-row: 1 / 3; min-height: 44px; padding: 8px; font-size: .75rem; }
.event-workspace-bar .management-phase-strip .timer { font-size: .875rem; margin: 0; }
.event-workspace-bar .management-phase-facts { font-size: .75rem; }
.event-workspace-bar .management-phase-facts strong { font-size: .8125rem; }
.event-workspace-bar[data-active-tab="game"] .management-phase-strip { display: none; }
.event-local-panel { min-width: 0; touch-action: pan-y pinch-zoom; overflow-x: clip; }

@keyframes eventPanelSlideOutNext {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-40px); opacity: 0.6; }
}

@keyframes eventPanelSlideInNext {
  from { transform: translateX(40px); opacity: 0.6; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes eventPanelSlideOutPrev {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(40px); opacity: 0.6; }
}

@keyframes eventPanelSlideInPrev {
  from { transform: translateX(-40px); opacity: 0.6; }
  to { transform: translateX(0); opacity: 1; }
}

.event-local-panel.slide-out-next {
  animation: eventPanelSlideOutNext 100ms cubic-bezier(.2, .8, .2, 1) forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

.event-local-panel.slide-in-next {
  animation: eventPanelSlideInNext 100ms cubic-bezier(.2, .8, .2, 1) forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

.event-local-panel.slide-out-prev {
  animation: eventPanelSlideOutPrev 100ms cubic-bezier(.2, .8, .2, 1) forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

.event-local-panel.slide-in-prev {
  animation: eventPanelSlideInPrev 100ms cubic-bezier(.2, .8, .2, 1) forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .event-local-panel.slide-out-next,
  .event-local-panel.slide-in-next,
  .event-local-panel.slide-out-prev,
  .event-local-panel.slide-in-prev {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
.event-local-panel :is(button,input,summary,[data-roster-participant]) { scroll-margin-top: calc(164px + var(--ui-safe-top)); }
.event-local-panel .roster-participants-section-selected > .roster-inspector { top: calc(160px + var(--ui-safe-top)); max-height: calc(100dvh - 180px - var(--ui-safe-top) - var(--ui-safe-bottom)); }
.event-swipe-hint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--hint); opacity: 0.8; margin: 4px 0 8px; user-select: none; pointer-events: none; }
.person-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; width: 100%; }
.person-card-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; flex: 1 1 180px; }
.roster-person-name { font-size: 15px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; line-height: 1.3; }
.roster-person-username { font-size: 13px; color: var(--hint); font-weight: 500; }
.roster-status-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--surface-raised); border: 1px solid var(--line); color: var(--text); white-space: nowrap; }
a.home-link, a.control-btn, a.small-btn { text-decoration: none; }
.home-website-link {
  display: flex;
  width: 100%;
  min-height: 44px;
  margin: 12px 0 16px;
  padding: 10px 16px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.stat-filters-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.stat-dropdown { position: relative; flex: 1 1 140px; min-width: 130px; }
.stat-dropdown-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; }
.stat-dropdown-btn:hover { border-color: var(--accent); }
.stat-dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; z-index: 25; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md); padding: 4px; display: grid; gap: 2px; }
.stat-dropdown-menu[hidden] { display: none; }
.stat-menu-item { display: flex; align-items: center; width: 100%; padding: 8px 10px; text-align: left; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; }
.stat-menu-item:hover { background: var(--surface-raised); }
.stat-menu-item.active { background: var(--surface-raised); color: var(--accent); font-weight: 700; }
.stat-achievements-subsections { display: grid; gap: 14px; margin-top: 10px; }
.stat-section-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 8px 0 4px; }
@media (max-width: 860px) {
  .event-local-panel .roster-inspector { top: auto; max-height: min(72dvh,calc(var(--ui-stable-height,100dvh) - var(--ui-safe-top) - var(--ui-safe-bottom) - 24px)); }
  .person-card[data-roster-participant] { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
  .person-card[data-roster-participant] > .person-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; width: 100%; }
  .person-card[data-roster-participant] > .person-card-header .person-card-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; flex: 1 1 auto; }
  .person-card[data-roster-participant] > .person-card-header .roster-inspector-entry { align-self: flex-start; flex-shrink: 0; margin-left: auto; }
  .person-card[data-roster-participant] > strong { width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .person-card[data-roster-participant] > .muted, .person-card[data-roster-participant] > .row-actions:not(.roster-inspector-entry), .person-card[data-roster-participant] > .inline-action-drawer { width: 100%; }
}
.control-btn-secondary:hover:not(:disabled) { color: var(--text); }
.inline-filters .small-btn { min-height: 44px; }
.row-actions { gap: 8px; }
button, summary { touch-action: manipulation; }
button:disabled { opacity: 1; color: var(--hint); background: var(--surface-raised); border-color: var(--line); cursor: not-allowed; }
input, select, textarea { min-height: 48px; font-size: 1rem; padding: 12px; background: var(--field-bg); border-color: var(--line); border-radius: var(--radius-control); }
input[type="checkbox"], input[type="radio"] { width: 24px; min-height: 24px; height: 24px; accent-color: var(--accent); vertical-align: middle; flex-shrink: 0; }
.form-field { gap: 8px; }
.form-field .fact-label { color: var(--text); font-size: .8125rem; }
.presentation-group { margin: 24px 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.group-title { padding: 0 12px 0 0; text-transform: uppercase; }
.create-event-panel .form-grid { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-steps { padding: 12px 0; color: var(--accent); }
.structure-table th, .result-table th { background: var(--surface-raised); color: var(--text); font-size: .75rem; }
.result-table th, .result-table td { padding: 14px 16px; }
.result-table tbody tr:nth-child(even) { background: var(--surface-raised); }
.result-table td:first-child { font-size: 1.125rem; font-weight: 700; color: var(--accent); }
.result-scroll { border-radius: 14px; scrollbar-width: thin; }
.data-row { padding: 16px 0; }
.wallet-movement { border-left: 2px solid var(--line); padding-left: 14px; margin: 8px 0; }
.wallet-movement strong { font-variant-numeric: tabular-nums; }
.wallet-screen > .fact { border: 1px solid var(--accent); border-radius: 18px; padding: 24px; background: var(--surface-raised); }
.wallet-screen > .fact .fact-value { font-size: 2.75rem; letter-spacing: -.045em; color: var(--accent); }
[data-screen="create-review"] > .actions-row { margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
[data-screen="create-review"] > .actions-row .control-btn-secondary { border: 1px solid var(--line); min-height: 44px; padding: 12px; border-radius: 10px; color: var(--text); }
[data-screen="create-review"] > .actions-row .control-btn-secondary:disabled { opacity: .5; color: var(--hint); cursor: not-allowed; }
.history-row { border-radius: 10px; background: var(--surface); padding: 16px; min-height: 56px; }
.live-hero-card, .live-timer-panel { padding: 24px; background: var(--surface-raised); border-color: var(--accent); }
.live-hero-card > .panel-title { color: var(--hint); font-size: .75rem; font-weight: 600; letter-spacing: .07em; }
.live-timer-row { align-items: center; }
.timer { font-size: clamp(3.75rem, 12vw, 5.5rem); font-weight: 650; letter-spacing: -.06em; text-shadow: none; color: var(--accent); }
.live-hero-card > p.muted:first-of-type { color: var(--text); font-size: 1.125rem; font-weight: 600; margin: 4px 0; }
.live-hero-card > p.muted { margin: 2px 0 12px; }
[data-live-state="paused"], [data-live-state="break"] { border-color: var(--warning); }
[data-live-state="paused"] .timer, [data-live-state="break"] .timer { color: var(--warning); }
.management-phase-strip { background: var(--surface); border-radius: 10px; padding: 10px 14px; top: calc(8px + var(--ui-safe-top)); }
.management-phase-strip .timer { font-size: 1.75rem; }
.ux-accordion-summary { padding: 16px 20px; min-height: 56px; }
.ux-accordion-body { background: var(--surface); padding: 16px 20px 20px; }
.person-card { padding: 16px; }
.roster-participant-selected, .bulk-card-selected { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.roster-inspector { border-color: var(--accent); box-shadow: var(--shadow-md); }
.roster-inspector > .panel-title { font-size: 1.125rem; }
.roster-search { min-height: 48px; background: var(--field-bg); }
.bulk-select-toolbar { background: var(--surface-raised); border-radius: 12px; padding: 14px; }
.bulk-card-incompatible { opacity: 1; }
.event-context-line { color: var(--accent); font-weight: 600; margin: -8px 0 20px; }
.player-live-card { background: var(--surface-raised); border-color: var(--accent); }
.player-live-card .timer { margin: 12px 0; font-size: clamp(3.5rem, 12vw, 5.5rem); }
.player-live-card > .muted { display: block; margin: 6px 0; }
.player-event-details { min-width: 0; }
.participant-group { position: relative; }
.group-count { display: inline-block; color: var(--hint); font-size: .75rem; margin: -4px 0 8px; }
.participant-group .participant-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 24px; }
.participant-group .participant-name { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 1rem; overflow-wrap: anywhere; }
.table-overview-card { border-color: var(--accent); }
.table-overview-card .table-summary { font-size: clamp(1.6rem, 5vw, 2.3rem); letter-spacing: -.035em; }
.settlement-readiness-card { border-left: 3px solid var(--warning); }
[data-screen="person-requests"] > .data-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 18px; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
[data-screen="person-requests"] > .data-row > span { flex: 1 1 220px; overflow-wrap: anywhere; }
[data-screen="standing-v2"] .panel > .fact, [data-screen="standings"] > .fact, [data-screen="standing-external"] > .fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 16px 4px; }
[data-screen="standing-v2"] .panel > .fact .fact-label, [data-screen="standings"] > .fact .fact-label, [data-screen="standing-external"] > .fact .fact-label { color: var(--text); font-size: .9375rem; overflow-wrap: anywhere; }
[data-screen="standing-v2"] .panel > .fact .fact-value, [data-screen="standings"] > .fact .fact-value, [data-screen="standing-external"] > .fact .fact-value { color: var(--accent); text-align: right; }
[data-screen="club-person"] .person-finance-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; padding: 20px; background: var(--surface-raised); border-radius: 12px; font-variant-numeric: tabular-nums; }
[data-screen="communications-publication"] textarea { min-height: 180px; line-height: 1.6; }
.publication-secondary-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.publication-secondary-actions > button { flex: 1 1 220px; }
[data-screen="communications-publication-read"] .status-note, [data-screen="inquiry-detail"] > .status-note { padding: 24px; margin: 20px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.inline-action-drawer, .rsvp-confirmation, .tournament-finish-confirm, .bulk-preview-info { background: var(--surface-raised); }
.warning-row, .inline-error { padding: 10px 12px; border-left: 2px solid currentColor; background: var(--surface-raised); border-radius: 4px; }
.empty-state, .error-state { border: 1px dashed var(--line); border-radius: 14px; padding: 32px 20px; line-height: 1.65; background: var(--surface); }
.loading-skeleton { display: grid; gap: 16px; margin: 40px 0 24px; }
.loading-skeleton > div { height: 72px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.loading-skeleton > div:first-child { width: 55%; height: 28px; }
.status-message { margin: 16px 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
@media (min-width: 861px) {
  #app { padding-top: calc(24px + var(--ui-safe-top)); }
  .main-nav-surface { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 24px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .app-brand { padding: 0; }
  .main-nav { display: flex; justify-content: flex-end; border: 0; background: transparent; }
  .contextual-return-row { grid-column: 1 / -1; }
  .home-entries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-primary-entry { grid-column: 1 / -1; }
  .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-hero-card .timer { font-size: 5.5rem; }
  .roster-participants-section-selected > .roster-inspector { top: calc(16px + var(--ui-safe-top)); }
  /* Preserve reading/tab order: live controls precede the existing Event facts. */
  .management-live-summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .management-live-summary > .live-hero-card { min-width: 0; margin-top: 0; padding: 20px; gap: 6px; }
  .management-live-summary .timer { font-size: 4.5rem; }
  .management-live-summary > .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: stretch; margin-top: 0; }
  .management-live-summary > .facts > .fact { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
  .person-card[data-roster-participant] { padding: 12px; gap: 6px; margin-top: 8px; }
  .person-card[data-roster-participant] > strong { min-width: 0; overflow-wrap: anywhere; }
  /* Native focus/anchor scrolling must clear the persistent phase strip. */
  .management-phase-strip ~ * :is(button, input, summary, [data-roster-participant]) { scroll-margin-top: calc(112px + var(--ui-safe-top)); }
}
@media (min-width: 1200px) {
  .person-card[data-roster-participant] { grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); column-gap: 16px; align-items: center; }
  .person-card[data-roster-participant] > strong, .person-card[data-roster-participant] > .muted { grid-column: 1; }
  .person-card[data-roster-participant] > .row-actions:not(.roster-inspector-entry) { grid-column: 2; grid-row: 1 / 3; }
  .person-card[data-roster-participant] > .roster-inspector-entry { grid-column: 2; grid-row: auto; }
  .person-card[data-roster-participant] > .inline-action-drawer { grid-column: 1 / -1; }
  /* The list becomes narrower beside an inspector: retain stacked, readable rows. */
  .roster-participants-section-selected .person-card[data-roster-participant] { grid-template-columns: minmax(0, 1fr); }
  .roster-participants-section-selected .person-card[data-roster-participant] > .row-actions { grid-column: 1; grid-row: auto; }
}
@media (max-width: 860px) {
  .main-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; white-space: normal; gap: 4px; }
  .nav-btn { justify-content: center; white-space: normal; padding: 8px 6px; font-size: .75rem; overflow-wrap: anywhere; }
  .nav-btn .ui-icon { width: 18px; height: 18px; }
  .roster-inspector { bottom: calc(12px + var(--ui-safe-bottom)); left: max(12px, var(--ui-safe-left)); right: max(12px, var(--ui-safe-right)); max-height: min(72dvh, calc(var(--ui-stable-height, 100dvh) - var(--ui-safe-top) - var(--ui-safe-bottom) - 24px)); border-radius: 22px; }
  .roster-inspector::before { content: ''; display: block; width: 40px; height: 4px; background: var(--line); border-radius: 4px; margin: -6px auto 16px; }
  .result-table { min-width: 0; }
  .result-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .result-table, .result-table tbody, .result-table tr { display: block; width: 100%; }
  .result-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; border-bottom: 1px solid var(--line); gap: 12px; }
  .result-table td { display: block; padding: 0; border: 0; white-space: normal !important; overflow-wrap: anywhere; }
  .result-table td::before { content: attr(data-label); display: block; color: var(--hint); font-size: .6875rem; font-weight: 400; margin-bottom: 4px; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .panel { padding: 18px; }
  .screen-header { font-size: 1.75rem; }
  .event-card { grid-template-columns: 1fr; padding: 18px; }
  .event-status-label { justify-self: start; margin-left: 36px; }
  .event-card-meta { padding-left: 36px; }
  .home-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-link { font-size: .8125rem; padding: 14px; min-height: 68px; }
  .home-primary-entry { font-size: 1.125rem; min-height: 80px; }
  .live-hero-card { padding: 20px; }
  .live-timer-row { flex-wrap: wrap; }
  .ux-accordion-summary { padding: 16px; }
  .ux-accordion-body { padding: 16px; }
  .row-actions .small-btn { flex-basis: auto; }
  .create-event-panel .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .create-event-panel input, .create-event-panel select { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  button:active, .event-card:hover, .identity-card:hover { transform: none !important; }
}
@media (forced-colors: active) {
  button, input, select, textarea, .panel, .ux-accordion { border: 1px solid CanvasText; }
  .ui-icon { stroke: ButtonText; }
}

@media (min-width: 560px) {
  .bulk-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* N32: existing selection/preview surfaces retain their own scroll and controls. */
.paid-entry-quotes {list-style: none; margin-left: 0;}
.paid-entry-quotes li {display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere;}
.paid-entry-intent .actions-row, .bulk-select-pager {flex-wrap: wrap;}
.paid-entry-intent .actions-row button {white-space: normal; min-height: 44px;}
.bulk-select-pager .muted {flex-basis: 100%;}
.bulk-sort {max-width: 100%; margin: 4px 0 10px; padding: 8px;}
.paid-entry-intent {min-width: 0; overflow-wrap: anywhere;}
/* Task summaries keep received facts visible while editors open explicitly. */
.task-disclosure { margin: 12px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.task-disclosure > summary { min-height: 48px; padding: 14px 16px; cursor: pointer; }
.task-disclosure > summary strong { font-size: 15px; }
.task-disclosure > summary .muted { display: block; margin-top: 5px; font-size: 13px; }
.task-disclosure > .panel { margin: 0; border: 0; box-shadow: none; }
.task-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.parameter-overview { display: grid; gap: 8px; }
.parameter-overview > .task-disclosure { margin: 0; }
.club-workspace-sections { flex-wrap: wrap; }

@media (max-width: 860px) {
 .event-local-panel .roster-participants-section-selected > .roster-inspector { top: auto; max-height: min(52dvh, calc(var(--ui-stable-height,100dvh) - 320px - var(--ui-safe-top) - var(--ui-safe-bottom))); }
}

/* Social Statistics: visible navigation, compact collapsed filters. */
.social-metrics, .social-filters { margin: 12px 0 16px; }
.social-control-label { margin: 0 0 8px; font-size: .8125rem; color: var(--hint); }
.social-metric-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.social-metric-btn { flex: 1 1 150px; min-width: 0; }
.social-metric-btn.selected,
.social-dropdown-menu .small-btn.selected:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.social-metric-btn.selected:disabled,
.social-dropdown-menu .small-btn.selected:disabled {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 82%, var(--surface));
  border-color: var(--accent);
  color: var(--accent-text);
}
.social-filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 16px;
}
.social-filter-group {
  position: relative;
  flex: 1 1 180px;
  min-width: 0;
}
.social-filter-disclosure > summary { list-style: none; }
.social-filter-disclosure > summary::-webkit-details-marker { display: none; }
.social-dropdown-trigger {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 0.9rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-btn, 10px);
}
.social-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn, 10px);
}
.social-dropdown-menu[hidden] {
  display: none !important;
}
.social-dropdown-menu .small-btn {
  text-align: left;
  width: 100%;
  padding: 8px 12px;
  font-size: 0.85rem;
  border-radius: 6px;
}
.social-dropdown-menu .small-btn.selected {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.social-minimum-menu { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.social-minimum-input { min-width: 0; min-height: 40px; padding: 8px 10px; }
@media (max-width: 480px) {
  .social-metric-btn { flex-basis: 100%; }
  .social-filter-group { flex-basis: 100%; }
}

/* Roster participant card layout polish */
.roster-person-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  min-width: 0;
  word-break: break-word;
}
.roster-person-username {
  font-size: 0.85rem;
  color: var(--hint);
}
.roster-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--text);
  white-space: nowrap;
}

/* TB-OCT11-LAYOUT-AND-SECTIONS: Event item, actions and collapsible sections */
.event-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.expanded-event-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 2px;
  width: 100%;
}

.expanded-event-controls .small-btn {
  flex: 1 1 140px;
  min-height: 40px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.event-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  margin: 12px 0;
  width: 100%;
}

.event-quick-actions .small-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.finish-blockers-content {
  display: grid;
  gap: 10px;
}

.finish-blockers-content .warning-row {
  margin: 0;
}

.corrections-content {
  display: grid;
  gap: 12px;
}

.corrections-missing-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  display: grid;
  gap: 8px;
}

.subpanel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* W13-P1 Scope A: Roster Status Filters, Seat Badges, Unavailable Reasons */
.roster-status-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}

.roster-filter-pill {
  min-height: 32px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease);
}

.roster-filter-pill:hover:not(:disabled) {
  border-color: var(--accent);
}

.roster-filter-pill-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.roster-seat-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  white-space: nowrap;
}

.roster-unavailable-reason {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
}

/* W13-P1 Scope B: Bulk Floating Sticky Action Bar */
.bulk-floating-bar {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  left: 16px;
  right: 16px;
  max-width: 600px;
  margin: 0 auto;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}

.bulk-floating-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.bulk-floating-count {
  color: var(--accent);
}

.bulk-floating-status {
  color: var(--hint);
  font-weight: 500;
  font-size: 12px;
}

.bulk-floating-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* W13-P1 Scope C: Inspector Header & Prominent Close */
.roster-inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.roster-inspector-title {
  margin: 0 !important;
}

.roster-inspector-close-btn {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* W13-P1 Scope A/D Desktop Density C Polish */
@media (min-width: 861px) {
  .roster-list-panel .person-card {
    padding: 10px 14px;
    gap: 6px;
  }
  .roster-status-filters {
    margin: 6px 0 10px;
  }
  .bulk-floating-bar {
    padding: 8px 16px;
  }
}

/* W13-P2 Financial Workspace & Settlement UI */
.finance-person-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 8px;
}

.finance-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.finance-person-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-person-balance {
  font-size: 13px;
  color: var(--hint);
}

.finance-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wallet-adjust-context {
  background: var(--bg-card, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 12px;
  margin-bottom: 10px;
}

.wallet-adjust-person-club {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

.wallet-adjust-balance-fact {
  font-size: 13px;
  color: var(--hint);
  margin: 0;
}

.event-card-wallet-adjust-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.roster-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.roster-card-header .panel-title {
  margin: 0;
}

.roster-card-sub {
  font-size: 12px;
  color: var(--hint);
  margin: 0;
}

.roster-card-fin-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.settlement-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.settlement-plan-screen,
.settlement-ops-screen {
  padding-bottom: 24px;
}

.settlement-row,
.settlement-transfer-row,
.settlement-op-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 8px;
}

.settlement-transfer-flow {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.settlement-transfer-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.settlement-op-status {
  font-size: 13px;
  color: var(--hint);
}

.gated-action-note {
  background: rgba(234, 179, 8, 0.12);
  border-left: 3px solid #eab308;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  margin-top: 8px;
}

.original-membership-controls {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

/* W13-P2 Desktop Density C and Mobile adaptations */
@media (max-width: 420px) {
  .finance-person-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .finance-row-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (min-width: 861px) {
  .finance-person-row {
    padding: 8px 16px;
  }
  .settlement-transfer-row,
  .settlement-op-row {
    padding: 8px 16px;
  }
  .roster-card-fin-summary {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* W13-P3 Creation, Structure Editor, and League/Season UX */
[hidden], .form-field[hidden] {
  display: none !important;
}

.create-field-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 8px;
}

.wizard-actions-bar, .review-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.structure-paste-hint {
  background: var(--surface-raised, var(--surface));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

.code-example {
  display: block;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  color: var(--accent);
  background: var(--field-bg);
  padding: 6px 8px;
  border-radius: 6px;
  margin-top: 6px;
}

.structure-add-bar {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.review-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.review-section:last-child {
  border-bottom: none;
}

.review-section h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--accent);
}

.unscored-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--hint, #888) 15%, transparent);
  color: var(--hint, #888);
  border: 1px solid var(--line);
}

.template-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
}

/* ==========================================================================
   W13-P4: Mini App Navigation, Settings, Web/Site UX & Responsiveness
   ========================================================================== */

/* Scope C: Flatten nested disclosures to prevent horizontal width squeeze (UX-08, B01) */
.task-disclosure .task-disclosure,
.task-disclosure details,
.parameter-overview .task-disclosure,
.parameter-overview details,
.panel .panel {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  box-sizing: border-box;
}

.task-disclosure .task-disclosure > summary {
  padding-left: 12px;
  padding-right: 12px;
}

.task-disclosure .task-disclosure > .panel {
  padding: 10px 12px;
}

/* Scope B & C: Preview/Confirm/Cancel distinct styling and horizontal flex alignment */
.control-btn, .small-btn, .nav-btn, .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
}

.action-btn-confirm, .control-btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid transparent;
  font-weight: 700;
}
.action-btn-confirm:hover:not(:disabled), .control-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.action-btn-cancel, .btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 600;
}
.action-btn-cancel:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
  background: var(--surface-hover, rgba(255, 255, 255, 0.08));
  border-color: var(--line-strong, var(--line));
}

.parameter-preview-card {
  margin: 10px 0;
  padding: 12px;
  background: var(--surface-soft, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}

.parameter-preview-card .preview-summary {
  margin: 6px 0 10px;
  font-weight: 500;
}

.confirmed-metadata-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

/* Safe areas & responsiveness across 360/390/555/1366 px */
@media (max-width: 555px) {
  .confirmed-metadata-actions {
    flex-direction: column;
    align-items: stretch;
  }
}