:root {
  --bg: #0d1220;
  --panel: #151c2e;
  --panel-2: #1c2540;
  --line: #2a3555;
  --text: #e9edf7;
  --muted: #8e9ab8;
  --accent: #ffb21e;
  --accent-ink: #1b1300;
  --alive: #3dd6a3;
  --out: #ff6b6b;
  --tie: #c08bff;
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
.num, td.n, th.n { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; background: rgba(13,18,32,.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 56px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .02em;
  text-decoration: none; color: var(--text); font-size: 17px; }
.brand .pin { width: 26px; height: 26px; }
.top .spacer { flex: 1; }
.whoami { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); font-size: 13px; white-space: nowrap; }
.whoami:empty { display: none; }
.whoami svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 1.5; }
.whoami span { color: var(--muted); font-size: 12px; padding-left: 6px; border-left: 1px solid var(--line); }
.top select { max-width: 260px; }

/* controls */
.btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #43517a; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.btn.danger { color: var(--out); }
.btn.small { padding: 3px 9px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], input[type=email], select {
  background: #0b1020; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input[type=number] { width: 80px; }
label.chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.field input, .field select { color: var(--text); font-size: 15px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }

/* tabs & chips */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 14px 0 16px; }
.tabs button { background: none; border: none; padding: 10px 14px; color: var(--muted); cursor: pointer;
  border-bottom: 3px solid transparent; font-weight: 600; white-space: nowrap; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 12px;
  cursor: pointer; font-size: 14px; }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }

/* panels & tables */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.panel h2, .panel h3 { margin: 0 0 12px; font-size: 17px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.grid-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
  cursor: pointer; text-decoration: none; color: var(--text); display: block; }
.card:hover { border-color: var(--accent); }
.card .t { font-weight: 700; font-size: 16px; }
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
td.n, th.n { text-align: right; }
tr.me td { background: rgba(255,178,30,.10); }
.stat { display: inline-flex; flex-direction: column; padding: 10px 14px; background: var(--panel-2);
  border-radius: 8px; min-width: 110px; }
.stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill.alive { background: rgba(61,214,163,.15); color: var(--alive); }
.pill.out { background: rgba(255,107,107,.12); color: var(--out); }
.pill.gold { background: rgba(255,178,30,.18); color: var(--accent); }
.live-pill { display: inline-flex; align-items: center; gap: 6px; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--alive); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.pill.tie { background: rgba(192,139,255,.15); color: var(--tie); }
.empty { padding: 30px; text-align: center; color: var(--muted); }

/* brackets */
.brackets { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); }
.bracket { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.bracket.size16 { grid-column: 1 / -1; }
.bracket header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; }
.bracket header b { font-size: 15px; }
.bk { --gap: 22px; display: grid; gap: 0 var(--gap); align-items: stretch; overflow-x: auto; padding-bottom: 2px; }
.bk .col { display: flex; flex-direction: column; min-width: 120px; }
.bk .champcol { min-width: 96px; }
.bk .colh { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; text-align: center;
  height: 18px; line-height: 18px; margin-bottom: 6px; white-space: nowrap; }
.bk .slots { flex: 1; display: flex; flex-direction: column; }
.bk .pair { flex: 1; display: flex; flex-direction: column; position: relative; }
.bk .slot { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 4px 0; }
.bk .slot > * { position: relative; z-index: 1; }
/* connector lines: out of each match, down/up to the pair's midpoint, into the next match */
.bk .pair .slot::after { content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--gap) / 2);
  border-top: 1.5px solid #3a4770; }
.bk .pair::after { content: ""; position: absolute; left: calc(100% + var(--gap) / 2 - 1px); top: 25%; bottom: 25%;
  border-left: 1.5px solid #3a4770; }
.bk .col.in .slot::before { content: ""; position: absolute; right: 100%; top: 50%; width: calc(var(--gap) / 2);
  border-top: 1.5px solid #3a4770; }
.bk .col:not(.champcol) > .slots > .slot::after { content: ""; position: absolute; left: 100%; top: 50%;
  width: calc(var(--gap) / 2); border-top: 1.5px solid #3a4770; }
.bk .champcol .colh { color: var(--accent); }
.m { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #0f1527; }
.m .p { display: flex; justify-content: space-between; gap: 6px; padding: 4px 8px; font-size: 13px; }
.m .p + .p { border-top: 1px solid var(--line); }
.m .p .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m .p .sc { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.m .p.win { background: rgba(61,214,163,.12); }
.m .p.win .sc { color: var(--alive); font-weight: 700; }
.m .p.lose .nm { color: #6f7a96; text-decoration: line-through; text-decoration-color: rgba(255,107,107,.6); }
.m .p.bye .nm { color: #59647f; font-style: italic; }
.m .p.tbd .nm { color: #59647f; }
.m .p.hl { outline: 2px solid var(--accent); outline-offset: -2px; }
.m.tie { border-color: var(--tie); }
.m .tiebar { display: flex; gap: 4px; padding: 4px; background: rgba(192,139,255,.12); font-size: 12px; align-items: center; flex-wrap: wrap; }
.champ { border: 1px solid var(--accent); border-radius: 7px; padding: 8px; text-align: center; background: rgba(255,178,30,.08); }
.champ .lbl { font-size: 11px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.champ .who { font-weight: 800; }
.champ .second { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* print-only info strip on each bracket */
.bk-print { display: none; }
.tieprint { display: none; }
.brackets > .sheet { display: contents; }

/* bracket pool cards */
.pcards { display: flex; flex-direction: column; gap: 12px; }
.pcard { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.pcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.pcard-title { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcard-head b.hl { color: var(--text); }
.pgrid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); align-items: end; }
.pgrid .field input, .pgrid .field select { width: 100%; }
.pgrid input:disabled, .pgrid select:disabled { opacity: .55; cursor: not-allowed; }
.pactions { display: flex; gap: 8px; justify-content: flex-end; }
.pnote { margin-top: 10px; }
@media (max-width: 900px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgrid .f-name { grid-column: 1 / -1; } .pactions { grid-column: 1 / -1; justify-content: flex-start; } }

/* score grid */
.scores input { width: 64px; text-align: right; font-family: var(--mono); padding: 5px 7px; }
.scores input.saving { border-color: var(--accent); }
.scores input.bad { border-color: var(--out); }
.scores td { padding: 4px 8px; }

/* login */
.login { max-width: 360px; margin: 12vh auto; }
.login .panel { display: flex; flex-direction: column; gap: 12px; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #26304d;
  border: 1px solid var(--line); padding: 10px 16px; border-radius: 8px; z-index: 50; max-width: 90vw; }
.toast.err { border-color: var(--out); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.live[hidden], .whoami[hidden] { display: none; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--alive); box-shadow: 0 0 8px var(--alive); }

.field[hidden], .payprev[hidden] { display: none; }
.payprev { flex-basis: 100%; color: var(--muted); padding: 2px 2px 0; }
.payprev b { color: var(--text); }
.chip.on .muted { color: inherit; opacity: .7; }
@media (max-width: 640px) {
  .top .wrap { gap: 6px 8px; padding-top: 8px; padding-bottom: 8px; }
  .top .spacer { flex-basis: 100%; height: 0; }
  .brackets { grid-template-columns: 1fr; }
  /* phones: stack rounds top-to-bottom, matches two across */
  .bk { display: flex !important; flex-direction: column; gap: 12px; overflow: visible; }
  .bk .col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
  .bk .slots, .bk .pair, .bk .slot { display: contents; }
  .bk .slot::before, .bk .slot::after, .bk .pair::after { content: none !important; }
  .bk .col .colh { grid-column: 1 / -1; text-align: left; margin: 0; }
  .bk .champcol .colh { display: none; }
  .bk .col:nth-last-child(2) .m, .bk .champcol .champ { grid-column: 1 / -1; }
  .m .p { font-size: 14px; padding: 6px 8px; }
  .hide-sm { display: none; }
  th, td { padding: 6px 6px; }
}
/* printable reports: shown as a sheet of paper on screen */
.paper { background: #fff; color: #111; border-radius: 6px; padding: 32px 36px; max-width: 1000px; margin: 0 auto 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 13px; color-scheme: light; }
.paper h2 { margin: 2px 0 2px; font-size: 22px; }
.paper h3 { margin: 22px 0 6px; font-size: 15px; }
.paper h3 span { font-weight: 400; color: #666; font-size: 12px; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #111; padding-bottom: 10px; margin-bottom: 14px; gap: 12px; }
.rp-center { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #a26a00; font-weight: 800; }
.rp-sub { color: #555; }
.rp-stamp { color: #777; font-size: 11px; white-space: nowrap; }
.rp-note { background: #f4f4f1; border-left: 3px solid #e09a00; padding: 8px 12px; margin-bottom: 14px; line-height: 1.6; }
table.rp { width: 100%; border-collapse: collapse; }
table.rp th { color: #555; border-bottom: 1.5px solid #111; padding: 5px 7px; font-size: 10.5px; }
table.rp th span { font-weight: 400; text-transform: none; letter-spacing: 0; }
table.rp td { border-bottom: 1px solid #ddd; padding: 5px 7px; color: #111; }
table.rp tr.dim td { color: #999; }
table.rp tr.sum td { font-weight: 700; border-top: 1.5px solid #111; border-bottom: none; }
table.rp.grid td { border: 1px solid #bbb; }
table.rp.grid th { border: 1px solid #bbb; border-bottom: 1.5px solid #111; vertical-align: bottom; }
table.rp tr.tall td { height: 30px; }
.ck { text-align: center; }
.box { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #333; border-radius: 2px; vertical-align: middle; }
.rp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.rp-kpis div { border: 1px solid #ccc; border-radius: 6px; padding: 8px 10px; color: #555; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.rp-kpis b { display: block; font-size: 20px; color: #111; letter-spacing: 0; }
.rcpts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rcpt { border: 1.5px dashed #999; border-radius: 6px; padding: 12px 14px; break-inside: avoid; }
.rc-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #111; padding-bottom: 5px; margin-bottom: 4px; }
.rc-top b { font-size: 15px; }
.rc-top span { color: #666; font-size: 12px; }
.rcpt table.rp td { padding: 3px 4px; }
.rc-br { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: #333; padding: 6px 0; border-bottom: 1px solid #ddd; }
.rc-sign { margin-top: 12px; color: #777; font-size: 11px; }
@media (max-width: 640px) {
  .paper { padding: 18px 14px; overflow-x: auto; }
  .rcpts, .rp-kpis { grid-template-columns: 1fr 1fr; }
}
@media print {
  body:has(.paper) main > *:not(#body) { display: none !important; }
  .paper { box-shadow: none; padding: 0; max-width: none; margin: 0; border-radius: 0; }
  .rcpts { grid-template-columns: 1fr 1fr; }
  table.rp thead { display: table-header-group; }
  table.rp tr { break-inside: avoid; }
}
@media print {
  :root { --bg: #fff; --panel: #fff; --panel-2: #fff; --text: #000; --muted: #444; --line: #bbb; color-scheme: light; }
  .top, .tabs, .chips, .noprint, .btn { display: none !important; }
  .m { background: #fff; }
  .bracket { break-inside: avoid; }
  /* bracket sheets: landscape, 2 brackets stacked per page, sized to fill the sheet */
  body:has(.brackets) main > *:not(#body) { display: none !important; }
  .brackets { page: bracketsheet; display: block !important; }
  /* each sheet is one full landscape page; the two brackets are centered on it,
     so top and bottom space stay equal no matter what margins the printer adds */
  .brackets > .sheet { display: flex !important; flex-direction: column; justify-content: center; gap: 0.25in;
    height: 8.49in; padding: 0 0.4in; box-sizing: border-box; break-after: page; break-inside: avoid; overflow: hidden; }
  .brackets > .sheet:last-child { break-after: auto; }
  .brackets .bracket { height: 3.75in; flex: none; margin: 0; padding: 0.1in 0.16in; box-sizing: border-box; border: 1px solid #999;
    border-radius: 6px; display: flex; flex-direction: column; break-inside: avoid; }
  .brackets .bracket header { margin-bottom: 4px; }
  .bk-print { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
    border-bottom: 1.5px solid #000; padding-bottom: 4px; margin-bottom: 4px; color: #000; }
  .bk-name { font-size: 19px; font-weight: 800; line-height: 1.15; }
  .bk-sub { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 12px; line-height: 20px; white-space: nowrap; }
  .bk-of { padding: 0 6px; border: 1px solid #000; border-radius: 3px; font-weight: 700; }
  .bk-date { color: #000; }
  .bk-right { text-align: right; }
  .bk-facts { color: #000; white-space: nowrap; font-size: 12px; line-height: 20px; }
  .bk-stamp { color: #666; font-size: 10.5px; margin-bottom: 3px; }
  .brackets .bk { flex: 1; overflow: visible; --gap: 30px; }
  .brackets .m .p { font-size: 15.5px; padding: 2px 10px; line-height: 1.4; }
  .brackets .m .p .sc { font-size: 16px; font-weight: 700; }
  .brackets .m .p.lose .sc { font-weight: 400; color: #555; }
  /* losers: dark grey name with a solid strike line that shows on colour and black-and-white printers */
  .brackets .m .p.lose .nm { color: #777; text-decoration: line-through; text-decoration-color: #9b0000;
    text-decoration-thickness: 2.5px; text-decoration-skip-ink: none; }
  .brackets .champ .who { font-size: 18px; }
  .brackets .champ .lbl { font-size: 13px; font-weight: 800; }
  /* wider prize column on paper so 2nd place fits on one line at a bigger size */
  .brackets .bk { grid-template-columns: repeat(var(--r), minmax(0, 1fr)) minmax(0, 1.3fr) !important; }
  .brackets .champ .who, .brackets .champ .second { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brackets .champ .second { font-size: 14.5px; color: #222; margin-top: 5px; }
  .brackets .bracket header b { font-size: 17px; }
  .brackets .slot { padding: 2px 0; }
  .brackets .colh { margin-bottom: 2px; font-size: 11.5px; }
  .brackets .m .tiebar { display: none; }
  .brackets .m .tieprint { display: block; font-size: 11px; padding: 1px 10px; background: #f3effc; color: #4a3a7a; }
  .brackets .m .p .sc { color: #000; }
  .brackets .m .p.win { background: #e9f6ef; }
  .brackets .champ { background: #fff8e6; border-color: #c99400; }
  .brackets .champ .lbl { color: #8a6500; }
  .brackets .pair::after, .brackets .slot::after, .brackets .slot::before { border-color: #777 !important; }
  .brackets .colh { color: #333; }
}
@page bracketsheet { size: letter landscape; margin: 0; }
@media print {
  /* no stray page padding, so the two brackets sit exactly inside the 0.4in margins */
  body:has(.brackets), body:has(.brackets) main.wrap, body:has(.brackets) #body { margin: 0 !important; padding: 0 !important; max-width: none !important; }
}
/* top bar: role, username, Public page and Sign out all the same height and text size */
.top #rolePill, .top .whoami, .top #logout, .top #viewPublic, .top #appFeesLink:not([hidden]) {
  display: inline-flex; align-items: center; height: 30px; box-sizing: border-box;
  font-size: 13px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); }
.top #rolePill { border-color: rgba(255,178,30,.35); }
.top .whoami { gap: 6px; padding-left: 10px; }
.top .whoami[hidden], .top .whoami:empty { display: none; }
/* Bowlers & Entries: tidy, evenly sized columns */
.addform .f-num { min-width: 96px; white-space: nowrap; }
.addform .f-num input { width: 100%; text-align: center; }
.addform .f-chk { white-space: nowrap; }
.addform .chkbox { display: flex; align-items: center; justify-content: center; gap: 8px; height: 37.75px; box-sizing: border-box;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); font-size: 15px; cursor: pointer; }
.addform .chkbox input { width: 18px; height: 18px; accent-color: var(--accent); }
table.entries td.c input[type=checkbox] { accent-color: var(--accent); }
table.entries thead th { vertical-align: bottom; }
table.entries th.c, table.entries td.c { text-align: center; }
table.entries thead th.c { min-width: 76px; }
table.entries td.c input[type=number] { width: 68px; text-align: center; }
table.entries td.c input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; }
table.entries td:last-child, table.entries th:last-child { width: 1%; }
table.entries th:first-child { width: 100%; }
table.entries td.n, table.entries th.n { padding-left: 18px; }
/* Eliminator standings */
.elim td small { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.1; }
.elim tr.dead td { color: #aab2c8; }
.elim td.cutcell { color: var(--out); }
.elim .dash { color: #4b5577; }
.elim tr.cutline td { background: rgba(255,107,107,.08); color: var(--out); font-size: 12px; font-weight: 600;
  border-bottom: 1px dashed var(--out); white-space: normal; }
.elim tr.me td { background: rgba(255,178,30,.08); }
.pill.out { white-space: nowrap; }
/* New tournament: what will you run? */
.runpick { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.runpick .rl { color: var(--muted); font-size: 13px; margin-right: 4px; }
.runopt { position: relative; cursor: pointer; }
.runopt input { position: absolute; opacity: 0; pointer-events: none; }
.runopt span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel-2); font-size: 14px; white-space: nowrap; }
.runopt span::before { content: ""; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; }
.runopt input:checked + span { border-color: var(--accent); background: rgba(255,178,30,.14); color: var(--accent); font-weight: 700; }
.runopt input:checked + span::before { border-color: var(--accent); background: radial-gradient(var(--accent) 45%, transparent 50%); }
.runopt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.xform { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 10px; background: rgba(255,255,255,.015); }
.xform .xnew { font-weight: 700; margin-bottom: 8px; }
.xprev { margin-top: 8px; color: var(--muted); }
.xprev b { color: var(--text); }
.addform .paidbox:has(input:checked) { border-color: rgba(61,214,163,.55); color: var(--alive); }
.addform .paidbox input { accent-color: var(--alive); }
.addfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.addfoot .subtotal { margin-left: auto; color: var(--muted); font-size: 15px; white-space: nowrap; }
.addfoot .subtotal b { color: var(--accent); font-size: 18px; margin-left: 6px; }
input[type=checkbox][data-f=paid_in]:disabled { opacity: 1; cursor: default; accent-color: var(--alive); }
.addform .chkbox.need { border-color: var(--out); background: rgba(255,107,107,.18); box-shadow: 0 0 0 2px rgba(255,107,107,.45);
  color: var(--out); font-weight: 700; animation: needshake .35s; }
.addform .field:has(.chkbox.need) { color: var(--out); font-weight: 700; }
.addform .chkbox.need input { outline: 2px solid var(--out); outline-offset: 1px; }
@keyframes needshake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* "must pay first" bubble above the Paid box */
.addform .paidfield { position: relative; }
.paidbubble { position: absolute; bottom: calc(100% + 10px); right: -6px; z-index: 20; width: max-content; max-width: 230px;
  background: var(--out); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35; white-space: normal;
  padding: 8px 12px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.45); animation: bubblein .18s ease-out; }
.paidbubble b { color: #fff; text-decoration: underline; }
.paidbubble::after { content: ""; position: absolute; top: 100%; right: 34px; border: 8px solid transparent; border-top-color: var(--out); }
.paidbubble[hidden] { display: none; }
@keyframes bubblein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* tournament name at the top of a tournament page */
.evtitle { margin: 4px 0 4px; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
@media (max-width: 640px) { .evtitle { font-size: 26px; } }
.backlink { margin: 16px 0 4px; }
.backlink a { font-size: 16px; font-weight: 600; }
/* Mystery Doubles */
.myst .pp { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.myst .pp + .pp { border-top: 1px dashed var(--line); }
.myst .psc { font-variant-numeric: tabular-nums; text-align: right; }
.myst .psc small { display: block; color: var(--muted); font-size: 10.5px; line-height: 1; }
.myst .tt { font-size: 20px; font-weight: 800; }
.myst .rk { color: var(--muted); font-weight: 700; }
.myst tr.win td { background: rgba(255,178,30,.06); }
.myst tr.me td { outline: 1px solid rgba(255,178,30,.5); }
.ent { color: var(--muted); font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 0 4px; margin-left: 4px; }
.closedadd { border-color: rgba(61,214,163,.4); color: var(--muted); }
.closedadd b { color: var(--alive); margin-right: 6px; }
input[type=checkbox].paidro:disabled { opacity: 1; cursor: default; accent-color: var(--alive); }
.lockx { display: inline-block; width: 30px; text-align: center; opacity: .55; font-size: 14px; cursor: default; }
/* app name + byline */
.brand .bt { display: flex; flex-direction: column; line-height: 1.1; }
.brand .by { font-size: 11px; font-weight: 500; letter-spacing: .03em; color: var(--muted); margin-top: 2px; }
/* bowler roster */
table.roster th.sortable { cursor: pointer; user-select: none; }
table.roster th.sortable.on { color: var(--accent); }
table.roster tbody tr { cursor: pointer; }
table.roster tbody tr:hover td { background: rgba(255,255,255,.03); }
.rcard { border-color: rgba(255,178,30,.45); }
.impdel { margin-top: 14px; padding: 10px 14px; border: 1px solid rgba(255,107,107,.45); background: rgba(255,107,107,.08); border-radius: 10px; }
.impdel h3 { color: var(--out); }
table.roster { table-layout: fixed; min-width: 1060px; }
table.roster th.c, table.roster td.c { text-align: center; }
table.roster td.cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.roster .c-name { width: 17%; } table.roster .c-avg { width: 6%; } table.roster .c-phone { width: 12%; }
table.roster .c-email { width: 20%; } table.roster .c-usbc { width: 10%; } table.roster .c-played { width: 7%; }
table.roster .c-won { width: 8%; } table.roster .c-last { width: 11%; } table.roster .c-by { width: 9%; }
table.roster td.n, table.roster th.n { padding-right: 18px; }

/* roster import (v1.8.5) */
.imp .step { display: inline-block; background: var(--accent); color: #1a1200; font-weight: 800; border-radius: 999px; padding: 2px 12px; font-size: 13px; }
.impopts { display: flex; gap: 12px; flex-wrap: wrap; }
.impopt { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel-2); }
.impopt:hover { border-color: var(--accent); background: rgba(255,178,30,.08); }
.impopt b { font-size: 16px; }
.impopt .ic { font-size: 22px; }
.impread { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.impread img { width: 220px; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.imp .bar { height: 10px; border-radius: 999px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--line); }
.imp .bar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
table.lg { min-width: 760px; }
table.lg td { vertical-align: middle; }
table.lg td input[type=text], table.lg td input[type=email] { width: 100%; box-sizing: border-box; min-width: 0; }
table.lg tr.off td { opacity: .45; }
table.lg td.warn input { outline: 2px solid var(--out); }
.tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.t-new { background: rgba(61,214,163,.15); color: var(--alive); }
.t-old { background: rgba(255,178,30,.15); color: var(--accent); }
.t-chk { background: rgba(255,107,107,.15); color: var(--out); }
table.lg td input[data-k=name] { min-width: 160px; }
.drafts { border-color: rgba(255,178,30,.45); }
.draftrow { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.draftrow:first-of-type { border-top: 0; }
.pdfic { width: 120px; height: 150px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-weight: 800; font-size: 26px; color: var(--out); gap: 8px; text-align: center; padding: 8px; box-sizing: border-box; }
.pdfic small { font-size: 11px; font-weight: 400; color: var(--muted); word-break: break-all; }
/* v1.8.10: slimmer import choices, title beside the icon */
.impopt { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 2px; padding: 10px 14px; border-radius: 10px; }
.impopt .ic { font-size: 18px; line-height: 1; }
.impopt b { font-size: 15px; }
.impopt > span.muted { grid-column: 1 / -1; line-height: 1.35; }
.impopt b { font-size: 18px; }
.impopt .ic { font-size: 22px; }
/* v1.8.12: step badge and title on one line */
.imphead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.imphead h3 { margin: 0; min-width: 0; }
.imphead .spacer { flex: 1; }
.imp .step { flex: none; }
@media (max-width: 560px) { .impread img, .impread .pdfic { width: 100%; max-height: 180px; object-fit: cover; object-position: top; } .impread > div { flex-basis: 100%; } }
.imphead h3 { flex: 1 1 180px; }
/* v1.8.13: import screens a little smaller on phones */
@media (max-width: 560px) {
  .imphead { gap: 8px; margin-bottom: 10px; }
  .imphead h3 { font-size: 15px; line-height: 1.3; }
  .imp .step { font-size: 11px; padding: 2px 9px; }
  .impopts { gap: 8px; }
  .impopt { padding: 9px 12px; }
  .impopt b { font-size: 16px; }
  .impopt .ic { font-size: 18px; }
  .impopt > span.muted, .imp .small { font-size: 12.5px; }
  .drafts h3 { font-size: 14px !important; }
}
/* v1.8.18: roster names without underline (underline only on hover) */
table.roster td a { text-decoration: none; }
table.roster td a:hover { text-decoration: underline; }
/* v1.8.19: finished tournaments are locked */
.lockbar { border-color: rgba(255,178,30,.45); background: rgba(255,178,30,.08); padding: 10px 14px; }
#body .locked { opacity: .45 !important; cursor: not-allowed; }
/* v1.8.20: reopen */
.lockrow { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.reopenbar { border-color: rgba(61,214,163,.45); background: rgba(61,214,163,.07); }
/* v1.8.21: run again + unpaid */
.evhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.evhead .evtitle { margin-right: auto; }
.raopts { display: flex; flex-direction: column; gap: 8px; }
.raopts .chk { align-items: flex-start; gap: 8px; line-height: 1.35; }
.raopts input { margin-top: 3px; }
.unpaidbar { border-color: rgba(255,178,30,.45); background: rgba(255,178,30,.07); padding: 10px 14px; }
/* v1.8.22: each-game Mystery Doubles */
.mgpays { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.mgpays[hidden] { display: none; }
.mgpays { align-items: stretch; }
.mgcard { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.mgcard.single { margin-top: 10px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.mgcard[hidden] { display: none; }
.spl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.splf { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.splf[hidden] { display: none; }
.splf input { width: 58px; padding: 6px 8px; }
.splsum { color: var(--alive); } .splsum.bad { color: var(--out); font-weight: 700; }
/* v1.8.23: tournament list follows "What will you run?" */
.listhead { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 4px 2px 10px; color: var(--muted); font-size: 14px; }
.listhead b { color: var(--text); }
.grid-cards > [hidden] { display: none; }
/* v1.8.25: league on import, M/F, league averages */
.implg { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.implg label { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.implg input { width: 260px; max-width: 60vw; }
.implg .small { flex: 1 1 320px; }
table.lg td select { width: 100%; }
table.roster .c-sex { width: 5%; } table.roster .c-email { width: 15%; }
sup.lgn { font-size: 10px; color: var(--accent); margin-left: 2px; }
.lgbox { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.lghead { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.lgrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lgrow input[data-lf="league"] { width: 260px; max-width: 60vw; }
.lgrow input[data-lf="average"] { width: 80px; }
table.lg td select { min-width: 58px; }


/* Sortable columns in the roster import and AVG review. */
table.lg th[data-review-sort] { cursor: pointer; user-select: none; }
table.lg th[data-review-sort][aria-sort="ascending"], table.lg th[data-review-sort][aria-sort="descending"] { color: var(--accent); }
table.lg th[data-review-sort]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Keep the finished-tournament action beside the scrolling tab navigation. */
.event-tabs { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); margin: 14px 0 16px; }
.event-tabs > .tabs { flex: 1; min-width: 0; margin: 0; border-bottom: 0; }
.event-tabs > #runAgain { flex-shrink: 0; margin-bottom: 4px; }

/* Compact league sheet cards: metadata wraps naturally on narrow screens. */
.league-source { padding: 6px; margin-bottom: 6px; }
.league-source-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.league-source-header > b { display: inline-flex; align-items: center; font-size: 20px; font-weight: 700; line-height: 1.2; min-height: 34px; padding: 5px 10px; overflow-wrap: anywhere; min-width: 0; }
.league-source-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.league-source-actions .btn { padding: 5px 10px; }
.league-source-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 3px; }
.league-source-url { min-width: 0; overflow-wrap: anywhere; }
.league-source-downloaded { max-width: 100%; }
.league-source-downloaded::before { content: "·"; margin-right: 12px; }

.league-sources-heading { align-items: center; }
.league-sources-heading > h3 { margin: 0; }

.league-sources-heading + p { margin: 6px 0; }

/* Compact, explicit selection for bowlers with several league averages. */
.league-average-dialog { width: min(400px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); }
.league-average-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.league-average-dialog h3 { margin: 0; font-size: 18px; }
.league-average-dialog p { margin: 4px 0 12px; }
.league-average-options { display: grid; gap: 6px; }
.league-average-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); cursor: pointer; }
.league-average-option input { margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.league-average-option > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.league-average-option small { display: block; font-size: 11px; }
.league-average-option:has(input:checked) { border-color: var(--accent); }
.league-average-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }

/* Compact Create user fields; league assignment stays on a separate row. */
#uf .create-user-fields {display:grid; grid-template-columns:minmax(100px,1fr) minmax(100px,1fr) minmax(90px,.8fr) 100px minmax(110px,1fr) 132px minmax(150px,1.4fr); gap:8px; width:100%; align-items:end;}
#uf .create-user-fields > .field {min-width:0;}
#uf .create-user-fields input, #uf .create-user-fields select {box-sizing:border-box; width:100%;}
@media(max-width:1000px){#uf .create-user-fields{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:600px){#uf .create-user-fields{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:380px){#uf .create-user-fields{grid-template-columns:minmax(0,1fr);}}

/* Keep user management content comfortably inside its panel. */
.panel.manage-users-panel {padding:24px; box-sizing:border-box;}
@media(max-width:600px){.panel.manage-users-panel{padding:16px;}}

.manage-users-panel .create-user-section {margin-top:24px; padding:24px; border:1px solid var(--line); border-radius:12px; background:rgba(11,16,32,.35); box-sizing:border-box;}
.manage-users-panel .create-user-section > h3 {margin:0 0 12px;}
.manage-users-panel .create-user-section #uf {margin-top:16px; row-gap:16px;}
@media(max-width:600px){.manage-users-panel .create-user-section{padding:16px; margin-top:20px;}}

/* Always-visible, compact score image controls. */
.panel.score-import-panel {padding:18px;}
.score-import-panel > h3 {margin:0 0 14px;}
.score-import-tools {display:grid;grid-template-columns:minmax(85px,.65fr) minmax(180px,1.5fr) minmax(130px,1fr) minmax(130px,1fr);gap:10px;align-items:end;max-width:900px;}
.score-import-tools .field {min-width:0;}
.score-import-tools select,.score-import-tools > button {box-sizing:border-box;width:100%;height:44px;min-width:0;margin:0;}
.score-import-tools > button {display:flex;align-items:center;justify-content:center;}
.score-import-panel .score-import-help {margin:12px 0 0;}
.score-import-panel #scoreMessage:empty {display:none;}
@media(max-width:650px){.score-import-tools{grid-template-columns:minmax(85px,.65fr) minmax(170px,1.35fr);}.panel.score-import-panel{padding:14px;}}
@media(max-width:360px){.score-import-tools{grid-template-columns:minmax(75px,.6fr) minmax(150px,1.4fr);}.score-import-tools > button{padding-inline:8px;}}

/* Center and emphasize the tournament deletion confirmation. */
.tournament-delete-dialog { position:fixed; inset:0; margin:auto; width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:28px; border:2px solid #f87171; border-radius:16px; background:var(--panel, #171e30); color:var(--text, #eef2ff); box-shadow:0 24px 90px #000b; }
.tournament-delete-dialog::backdrop { background:rgba(0,0,0,.78); }
.tournament-delete-dialog h2 { margin:0 0 16px; font-size:28px; color:#f87171; }
.tournament-delete-dialog .delete-tournament-name { font-size:20px; font-weight:700; overflow-wrap:anywhere; }
.tournament-delete-dialog p { line-height:1.5; }
.tournament-delete-dialog label { display:block; margin:20px 0 8px; font-weight:700; }
.tournament-delete-dialog input { width:100%; font-size:20px; padding:12px; }
.tournament-delete-dialog .delete-dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:12px; margin-top:24px; }
.tournament-delete-dialog [data-confirm] { background:#b91c1c; border-color:#ef4444; color:white; font-weight:700; }
.tournament-delete-dialog [data-confirm]:disabled { opacity:.45; cursor:not-allowed; }