/* SDK Muta – same look as the club's main PC app (SDK-MainPCgui):
 * dark page, white rounded windows, small uppercase section headings,
 * black primary buttons, light grey secondary buttons and tiles.
 * Yellow only marks a 10; green/red only mark state. */

:root {
  --page: #1c1c1e;
  --card: #ffffff;
  --tile: #f7f7f8;
  --input: #fafafa;
  --text: #111111;
  --muted: #6b7280;
  --line: #e8e8ed;
  --row-line: #f0f0f0;
  --primary: #1d1d1f;
  --primary-hover: #333333;
  --green: #10b981;
  --green-text: #047857;
  --green-soft: #ecfdf5;
  --green-dark: #059669;
  --red: #ef4444;
  --red-text: #b91c1c;
  --ten: #fde047;
  --ten-soft: #fefce8;
  --radius: 10px;
  --side: 340px;          /* left column of every two-column page */
  --shadow: 0 1px 2px rgba(0, 0, 0, .05);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); }
body { margin: 0; background: var(--page); color: var(--text); line-height: 1.4; font-size: 14px; }
h1, h2, h3, p { margin: 0; }
a { color: var(--text); text-underline-offset: 2px; }
small { color: var(--muted); font-weight: 400; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.center { text-align: center; }
kbd { border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: .85em; background: var(--tile); }
code { font-size: .9em; }
input, select, button { font: inherit; color: var(--text); }
label input, label select { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }

.page { max-width: 1400px; margin: 0 auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* wide content (tabs, tables) scrolls inside its window instead of widening the page */
main > *, .layout > *, .layout .card { min-width: 0; max-width: 100%; }

/* ── Windows ── */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; min-width: 0;
}
.card.flush { padding: 0; overflow: hidden; }
.card-body { padding: 20px; }

/* Section heading, MainPCgui style */
.card > h2, .card-head h2, .card summary h2, .standings-head h2 {
  font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px;
}
.card > h2 { padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.card h2 small { text-transform: none; letter-spacing: 0; }
.title { font-size: 20px; font-weight: 700; color: var(--text); }
.card > p + *, .card > .title + * { margin-top: 12px; }

/* ── Header window ── */
.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 8px 0 16px; min-height: 60px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); padding: 8px 0; }
.brand-logo { height: 40px; width: auto; display: block; }
.brand-sub {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 12px;
}
.header-right { margin-left: auto; }
.header-right .btn { min-height: 38px; padding: 8px 14px; }

/* Steps = MainPCgui segmented control */
.steps {
  display: inline-flex; gap: 2px; margin: 0 0 0 auto; padding: 3px; list-style: none; counter-reset: s;
  background: var(--tile); border: 1px solid var(--line); border-radius: 8px;
}
.steps li {
  counter-increment: s; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: 6px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--muted);
}
.steps li::before {
  content: counter(s); display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; background: var(--line); color: var(--muted);
}
.steps li.active { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.steps li.active::before { background: var(--primary); color: #fff; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; cursor: pointer; text-decoration: none;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  background: var(--tile); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; }
.btn.danger-outline { width: 100%; background: transparent; color: var(--muted); }
.btn.danger-outline:hover { background: transparent; color: var(--red); border-color: var(--red); }
.btn.big { min-height: 52px; font-size: 15px; letter-spacing: .5px; }
.btn.ghost { background: transparent; }
.btn-stack { display: flex; flex-direction: column; gap: 8px; }
.btn-stack .btn, .league-save > .btn, form > .btn.primary { width: 100%; }
.btn.sm {
  min-height: 30px; height: 30px; padding: 0 12px; flex: none; border-radius: 6px;
  font-size: 11px; letter-spacing: .3px; white-space: nowrap;
}
.btn.danger-sm { color: var(--red-text); background: var(--card); }
.btn.copied, .btn.copied:hover { background: var(--green-dark) !important; border-color: var(--green-dark) !important; color: #fff !important; }
.btn.danger-sm:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; }

/* ── Stat tiles (MainPCgui stat-card) ── */
.stat-grid { display: grid; gap: 8px; margin-top: 14px; }
.stat-grid.one { grid-template-columns: 1fr; }
.stat-grid.two { grid-template-columns: 1fr 1fr; }
.stat {
  background: var(--tile); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 4px;
}
.stat span { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.stat strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Inputs ── */
.player-form input, .login input, .new-league input, .import-form select, .round-dates input, .code-input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--input); border: 1px solid var(--line); border-radius: 8px;
}
input:focus-visible, select:focus-visible, .shot:focus { outline: 2px solid var(--text); outline-offset: -1px; }

/* ── Two-window layout (left: controls, right: content) ── */
.layout { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: 12px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.side { position: sticky; top: 12px; }
.narrow { max-width: 560px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.screen[hidden] { display: none; }


/* ── Home ── */
.home { max-width: 560px; width: 100%; margin: 24px auto 0; padding: 32px 24px 24px; }
.home-logo { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 28px; }
.choices { display: grid; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; text-decoration: none;
  background: var(--tile); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
  transition: background .15s, color .15s, border-color .15s;
}
.choice:hover { border-color: var(--text); }
.choice.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.choice.primary small, .choice.primary .chevron { color: #c7c7cc; }
.choice.primary:hover { background: var(--primary-hover); }
.choice-icon {
  width: 26px; height: 26px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.choice-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.choice-text strong { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; }
.choice-text small { font-size: 13px; }
.chevron { font-size: 26px; line-height: 1; color: var(--muted); }

/* ── Start page ── */
.home-page { display: flex; flex-direction: column; gap: 12px; width: 100%; }   /* same width as every other page */
.home-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 22px 28px; }
.home-hero-logo { height: 76px; width: auto; display: block; }
.home-hero h1 { font-size: 26px; line-height: 1.15; }
.home-hero-status {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; border-radius: 10px;
  background: var(--tile); border: 1px solid var(--line); white-space: nowrap;
}
.home-hero-status span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.home-hero-status small { color: var(--muted); font-size: 12px; }
.home-hero-status.open { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.home-hero-status.open small { color: #d1fae5; }
.home-hero-status i { width: 8px; height: 8px; border-radius: 50%; background: #6ee7b7; animation: pulse 2s infinite; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; align-items: start; }
.home-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.month-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.month-strip li {
  display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 8px;
  background: var(--tile); border: 1px solid var(--line); min-width: 0;
}
.month-strip b { font-size: 12px; color: var(--muted); }
.month-strip span { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-strip small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.month-strip li.open { background: var(--green-soft); border-color: #a7f3d0; }
.month-strip li.open small { color: var(--green-text); }
.month-strip li.closed { opacity: .6; }
.top-list { list-style: none; margin: 0; padding: 0; }
.top-list li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 56px; gap: 10px; align-items: center;
  padding: 10px 8px; border-bottom: 1px solid var(--row-line);
}
.top-list li:first-child { background: var(--ten-soft); border-radius: 8px; }
.top-list li:last-child { border-bottom: 0; }
.tl-rank { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-name small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.tl-tens { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tl-score { text-align: right; font-size: 17px; font-variant-numeric: tabular-nums; }
.home-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 4px 12px;
  font-size: 12px; color: #8e8e93;
}
.home-foot a { color: #8e8e93; text-decoration: none; }
.home-foot a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 960px) {
  .home-hero { grid-template-columns: 1fr; gap: 14px; text-align: center; padding: 22px 18px; }
  .home-hero-logo { height: 64px; margin: 0 auto; }
  .home-hero-status { align-items: center; }
  .home-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .month-strip { grid-template-columns: 1fr; }
  .month-strip li { flex-direction: row; align-items: center; gap: 10px; }
  .month-strip small { margin-left: auto; }
  .top-list li { grid-template-columns: 44px minmax(0, 1fr) 50px; }
  .tl-tens { display: none; }
}

/* how it works: 4 steps in a row */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: hs; }
.how-steps li {
  counter-increment: hs; display: flex; flex-direction: column; gap: 4px; padding: 14px;
  background: var(--tile); border: 1px solid var(--line); border-radius: 10px;
}
.how-steps li::before {
  content: counter(hs); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px;
  border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 13px;
}
.how-steps strong { font-size: 14px; }
.how-steps span { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* roadmap: Prijave → 1. … 5. turnir → Konec */
.roadmap { list-style: none; margin: 4px 0 0; padding: 0; display: flex; }
.roadmap li {
  flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 2px; padding: 0 4px; min-width: 0;
}
.roadmap li::before {                        /* connecting line */
  content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0;
}
.roadmap li:first-child::before { display: none; }
.roadmap li.done::before, .roadmap li.current::before { background: var(--green-dark); }
.rm-dot {
  position: relative; z-index: 1; width: 21px; height: 21px; border-radius: 50%; margin-bottom: 8px;
  background: var(--card); border: 3px solid var(--line);
}
.roadmap li.done .rm-dot { background: var(--green-dark); border-color: var(--green-dark); }
.roadmap li.done .rm-dot::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; }
.roadmap li.current .rm-dot { border-color: var(--green-dark); box-shadow: 0 0 0 5px #d1fae5; background: #fff; }
.roadmap li.next .rm-dot { border-color: var(--text); }
.roadmap strong { font-size: 13px; }
.roadmap small { font-size: 12px; color: var(--muted); }
.roadmap li.done strong, .roadmap li.done small { color: var(--muted); }
.roadmap em {
  font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--green-dark); color: #fff;
}
.roadmap em.soon { background: var(--primary); }
.roadmap .btn { margin-top: 6px; }
.league-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.league-actions.single { grid-template-columns: 1fr; }
.practice { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: center; }
.practice h2 { margin-bottom: 8px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.practice p { font-size: 14px; }

@media (max-width: 960px) {
  .how-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-steps li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  .how-steps li::before { margin: 0; }
  .how-steps span { flex-basis: 100%; }
  /* roadmap becomes vertical */
  .roadmap { flex-direction: column; gap: 0; }
  .roadmap li {
    flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 4px 10px;
    padding: 0 0 18px 0;
  }
  .roadmap li::before { top: auto; bottom: 100%; left: 9px; width: 3px; height: calc(100% - 3px); transform: translateY(21px); }
  .roadmap li:first-child::before { display: none; }
  .roadmap li::before { top: -100%; bottom: auto; height: 100%; transform: none; }
  .rm-dot { margin: 0; flex: none; }
  .roadmap strong { min-width: 70px; }
  .roadmap em { margin: 0 0 0 auto; }            /* badge on the right */
  .roadmap .btn { margin: 4px 0 0 31px; }      /* indent past the timeline dot */
  .practice { grid-template-columns: 1fr; gap: 12px; }
  /* league buttons stay side by side: icon on top, text below */
  .league-actions { gap: 8px; }
  .league-actions .choice { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 12px; }
  .league-actions .choice-text strong { font-size: 13px; }
  .league-actions .choice-text small { font-size: 12px; }
  .league-actions .chevron { display: none; }
}

/* League open → green (start page button, pills, buttons) */
.choice.live { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.choice.live small, .choice.live .chevron { color: #d1fae5; }
.choice.live small b { color: #fff; }
.choice.live:hover { background: #047857; border-color: #047857; }
.live-pill, .next-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 4px 10px; border-radius: 999px;
}
.live-pill { background: #fff; color: var(--green-dark); }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.next-pill { background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.btn.go { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn.go:hover:not(:disabled) { background: #047857; border-color: #047857; }

/* League page */
.league-shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: 12px; align-items: start; }
.league-shell > .col { display: flex; flex-direction: column; gap: 12px; }
.status-bar { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.status-bar div { display: flex; flex-direction: column; gap: 2px; }
.status-bar strong { font-size: 16px; }
.status-bar span { font-size: 13px; color: var(--muted); }
.status-num {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  background: var(--tile); border: 1px solid var(--line); font-size: 18px; font-weight: 800; color: var(--text) !important;
}
.status-bar.open { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.status-bar.open span { color: #d1fae5; }
.status-bar .status-num { font-size: 20px; }
.status-bar.open .status-num { background: #fff; border-color: #fff; color: var(--green-dark) !important; }
.code-card { display: flex; flex-direction: column; gap: 12px; }
.code-card > h2 { margin-bottom: 0; }
.code-card .code-input { max-width: none; }
.code-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.round-list + .btn { margin-top: 12px; }
.how > h2:not(:first-child) { margin-top: 24px; }
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: st; }
.steps-list li {
  counter-increment: st; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; row-gap: 2px;
  padding: 12px 14px; background: var(--tile); border: 1px solid var(--line); border-radius: 8px;
}
.steps-list li::before {
  content: counter(st); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 14px;
}
.steps-list strong { font-size: 14px; }
.steps-list span { font-size: 13px; color: var(--muted); }
.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rules li { position: relative; padding-left: 18px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.rules li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.rules b, .steps-list b { color: var(--text); }

/* Sign-ups (league preparation) */
.signup-state {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px;
  padding: 8px 10px; border-radius: 7px; background: var(--tile); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
}
.signup-state.open { background: var(--green-soft); border-color: #a7f3d0; color: var(--green-text); }
.signup-state b { background: var(--red); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.tab b.b-warn { background: var(--red); border-color: var(--red); color: #fff; }
.switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.switch input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green-dark); flex: none; }
.switch span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.switch small { font-size: 12px; }
.prep-switch { padding: 12px 14px; margin-bottom: 14px; background: var(--green-soft); border: 1px solid #a7f3d0; border-radius: 8px; }
.signup-settings {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: 10px;
}
.signup-settings .switch, .signup-settings .wide, .signup-actions { grid-column: 1 / -1; }
.signup-settings label:not(.switch), .signup-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
}
.signup-settings input:not([type=checkbox]), .signup-settings textarea,
.signup-form input, .signup-form select, .signup-form textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; font: inherit; font-size: 14px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--text);
  background: var(--input); border: 1px solid var(--line); border-radius: 8px;
}
.signup-settings textarea, .signup-form textarea { resize: vertical; }
.signup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.signup-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.signup-row.pending { border-left: 4px solid #f59e0b; }
.signup-row.confirmed { background: var(--tile); }
.su-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.su-main > .muted, .su-note { flex-basis: 100%; }
.su-note { font-size: 13px; color: var(--text); background: var(--tile); border-radius: 6px; padding: 6px 8px; }
.su-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.su-confirm { display: flex; gap: 6px; }
.su-confirm select { min-height: 30px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-size: 13px; }
.signup-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.signup-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.signup-form legend {
  padding: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--line); width: 100%; margin-bottom: 4px;
}
#shooter-list { margin: 0; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 6px; }
#shooter-list li { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
#shooter-list li input { flex: 1; min-width: 0; }
#add-shooter { align-self: center; min-width: 200px; }
.legend-hint { margin-left: 8px; font-size: 12px; }
.send-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.send-row .btn { min-height: 42px; }
@media (max-width: 640px) { .send-row { grid-template-columns: 1fr; } .legend-hint { display: block; margin: 2px 0 0; } }
.su-people { flex-basis: 100%; margin-top: 4px; }
.signup-row.pending { align-items: flex-start; }

.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-hint { margin-top: -8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fee { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.pay-details { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.pay-details > div { display: contents; }
.pay-details dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding-top: 2px; }
.pay-details dd { margin: 0; overflow-wrap: anywhere; }
.mono, .pay-details .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.pay-details .mono { font-weight: 700; }
.legacy-pay { background: var(--ten-soft); border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; }
.payment { white-space: pre-line; font-size: 14px; margin-bottom: 8px; }
.signup-done { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0; }
.signup-done strong { font-size: 18px; color: var(--green-text); }
.signup-rounds { margin: 12px 0; }
.signup-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; color: var(--text);
  border: 2px solid var(--green-dark);
}
.signup-cta span:first-child { display: flex; flex-direction: column; gap: 2px; }
.signup-cta small { color: var(--muted); font-size: 13px; }
@media (max-width: 860px) {
  .signup-settings, .two-cols { grid-template-columns: 1fr; }
  .signup-row { flex-direction: column; align-items: stretch; }
  .su-actions { flex-wrap: wrap; }
  .su-confirm { flex: 1; }
  .su-confirm select { flex: 1; }
}

/* League page & sign-up page: header window on top, two columns below */
.page-stack { display: flex; flex-direction: column; gap: 12px; }
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  padding: 24px 28px;
}
.hero.open { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.hero-status { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted);
}
.hero.open .hero-kicker { color: #d1fae5; }
.hero-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #6ee7b7; animation: pulse 2s infinite; display: none; }
.hero.open .hero-kicker i { display: inline-block; }
.hero h1 { font-size: 30px; line-height: 1.1; }
.hero-status p { font-size: 14px; color: var(--muted); }
.hero.open .hero-status p { color: #d1fae5; }

.hero-code {
  display: flex; flex-direction: column; gap: 8px; width: 420px; max-width: 100%;
  background: var(--card); color: var(--text); border-radius: 10px; padding: 16px;
  border: 1px solid var(--line);
}
.hero-code label { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.hero-code .code-input { max-width: none; font-size: 22px; min-height: 48px; padding: 8px 12px; }
.hero-code .btn { min-height: 48px; white-space: nowrap; }
.hero-hint { font-size: 12px; color: var(--muted); }
.hero-code.closed p { font-size: 14px; color: var(--text); }
.hero-code.closed .btn { align-self: flex-start; min-height: 30px; height: 30px; }
.hero-fee {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right;
  background: rgba(255, 255, 255, .12); border-radius: 10px; padding: 12px 18px;
}
.hero-fee span { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #d1fae5; }
.hero-fee strong { font-size: 22px; white-space: nowrap; }

.info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; align-items: start; }
.signup-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.info-grid > .col { display: flex; flex-direction: column; gap: 12px; }
.steps-list.compact { gap: 8px; }
.steps-list.compact li { padding: 10px 12px; }
.steps-list.compact li::before { width: 26px; height: 26px; font-size: 12px; }
.steps-list.compact li { grid-template-columns: 26px 1fr; }
.month-list { list-style: none; margin: 0; padding: 0; }
.month-list li { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.month-list li:last-child { border-bottom: 0; }
.month-list span { color: var(--muted); }
/* sign-up page: the schedule as tiles (number · month · dates) */
.signup-grid .month-list { display: flex; flex-direction: column; gap: 8px; }
.signup-grid .month-list li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--tile); border: 1px solid var(--line); border-radius: 8px;
}
.signup-grid .month-list li:last-child { border-bottom: 1px solid var(--line); }
.signup-grid .month-list i {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-style: normal; font-size: 12px; font-weight: 700;
}
.signup-grid .month-list b { font-size: 15px; }
.signup-grid .month-list b::first-letter { text-transform: uppercase; }
.signup-grid .month-list span { font-size: 12px; }
.signup-grid .signup-form { max-width: none; }
/* payment details above the form: one compact row of label/value pairs */
.pay-top { flex: none; }
.pay-top h2 { margin-bottom: 10px; }
.pay-top .pay-details { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.pay-top .pay-details > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-top .pay-details .mono { white-space: nowrap; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding: 20px; }
  .hero-code { width: 100%; }
  .hero-fee { align-items: flex-start; text-align: left; }
  .info-grid, .signup-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .code-row { grid-template-columns: 1fr; }
  .hero h1 { font-size: 24px; }
}

/* centred single-window pages: league code, login, empty standings */
.soon { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 28px 20px; }
.soon > h2 { align-self: stretch; }
.soon-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.code-input {
  max-width: 280px; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: .12em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.form-error { color: var(--red-text); font-weight: 600; }
.login { display: flex; flex-direction: column; gap: 14px; }
.login label, .new-league label, .round-dates label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
}
.login .soon-actions { justify-content: flex-end; }

/* ── Setup ── */
.banner { display: flex; flex-direction: column; gap: 10px; border-color: var(--text); }
.banner-actions { display: flex; gap: 8px; }
.banner-actions .btn { flex: 1; }

.format { display: flex; align-items: flex-end; gap: 10px; }
.stepper { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stepper > span { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.stepper div { display: flex; }
.stepper button {
  width: 40px; height: 48px; flex: none; font-size: 20px; cursor: pointer;
  border: 1px solid var(--line); background: var(--tile);
}
.stepper button:hover:not(:disabled) { background: var(--primary); color: #fff; }
.stepper button:first-child { border-radius: 8px 0 0 8px; }
.stepper button:last-child { border-radius: 0 8px 8px 0; }
.stepper input {
  width: 100%; min-width: 0; height: 48px; text-align: center; font-size: 20px; font-weight: 700;
  border: 1px solid var(--line); border-left: 0; border-right: 0; background: var(--card);
  -moz-appearance: textfield;
}
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper button:disabled, .stepper input:disabled { opacity: .5; cursor: not-allowed; }
.times { font-size: 20px; color: var(--muted); padding-bottom: 10px; }

.player-form { display: flex; gap: 8px; margin-bottom: 14px; }
.player-form .btn { flex: none; }
.player-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px;
}
.player-list li { display: flex; }
.player-toggle {
  flex: 1; display: flex; align-items: center; gap: 10px; min-height: 46px; text-align: left; cursor: pointer;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px 0 0 8px; background: var(--tile);
  font-weight: 500;
}
.player-toggle::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 2px solid #c7c7cc; background: #fff;
}
.player-toggle[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.player-toggle[aria-pressed="true"]::before {
  border-color: #fff; background: #fff;
  box-shadow: inset 0 0 0 3px var(--primary);
}
.player-del {
  width: 40px; cursor: pointer; color: var(--muted);
  border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; background: var(--tile);
}
.player-del:hover { color: var(--red); }
.player-toggle:last-child { border-radius: 8px; }   /* league mode: no delete button */

/* ── Scoring ── */
.tabs {
  display: flex; overflow-x: auto; padding: 0 8px;
  background: var(--tile); border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.tab {
  flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 14px 16px; margin-bottom: -1px; white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
}
.tab:hover { color: var(--text); }
.tab b {
  font-variant-numeric: tabular-nums; font-size: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 6px; color: var(--text);
}
.tab.done::after { content: "✓"; color: var(--green); }
.tab.active { color: var(--text); border-bottom-color: var(--text); }
.tab.active b { background: var(--primary); border-color: var(--primary); color: #fff; }

.score-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.score-head p { margin-top: 4px; }
.score-head .stat-grid { margin: 0; min-width: 190px; }
.score-head .stat { padding: 8px 12px; }

/* Column width grows with the number of shots per target (--shots is set by app.js),
   and the shot boxes always fill their target – no empty half. */
.target-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(calc(84px + var(--shots, 2) * 56px), 1fr));
}
.target {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-width: 0;
  background: var(--tile); border: 1px solid var(--line); border-radius: 8px;
}
.target.complete { background: var(--green-soft); border-color: #a7f3d0; }
.target .tn { width: 28px; flex: none; font-size: 11px; font-weight: 700; color: var(--muted); }
.target .shots { display: flex; gap: 6px; flex: 1; min-width: 0; }
.target .sum { width: 30px; flex: none; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.shot {
  flex: 1 1 0; width: 0; min-width: 0; height: 46px;
  text-align: center; font-size: 18px; font-weight: 700;
  background: var(--card); border: 1px solid var(--line); border-radius: 7px;
}
.shot.ten { background: var(--ten); border-color: #facc15; color: #3a2c00; }
.pager { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }

.progress { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px; }
.bar { height: 6px; background: var(--line); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .2s; }
.standings ol { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 4px; }
.standings li {
  counter-increment: r; display: flex; gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 7px; background: var(--tile); font-weight: 500;
}
.standings li::before { content: counter(r) "."; width: 22px; color: var(--muted); font-size: 12px; font-weight: 700; }
.standings li span { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; }

/* Side action window: stacked buttons */
.actionbar { display: flex; flex-direction: column; gap: 8px; }
.actionbar .btn { width: 100%; }

/* ── Tables (MainPCgui) ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.results-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.results-table th {
  position: sticky; top: 0; background: var(--tile); text-align: left;
  padding: 12px 14px; border-bottom: 2px solid var(--line);
  font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
}
.results-table td { padding: 12px 14px; border-bottom: 1px solid var(--row-line); }
.results-table tbody tr:nth-child(even) { background: #fafafa; }
.results-table tbody tr:hover { background: #f3f4f6; }
.results-table tr:last-child td { border-bottom: 0; }
.results-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Column grid: fixed widths, thin separators, headings centred over their values */
.results-table { table-layout: fixed; }
.results-table td { vertical-align: middle; }
.results-table th + th, .results-table td + td { border-left: 1px solid var(--row-line); }
.results-table th.num, .results-table td.num { text-align: center; }
.results-table col.c-rank { width: 14%; }
.results-table col.c-name { width: 35%; }
.results-table col.c-num { width: 17%; }
.results-table .rank-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.results-table td.total { font-weight: 700; font-size: 17px; }
.results-table tbody tr.p1 { background: var(--ten-soft); }
.results-table .incomplete { color: var(--muted); font-size: 12px; }

/* ── League in the calculator ── */
.league-bar { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; font-weight: 600; }
.league-bar #league-text { flex: 1; }
.league-bar.error { border-color: var(--red); color: var(--red-text); }
.league-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  background: var(--green-dark); color: #fff; border-radius: 6px; padding: 3px 8px; white-space: nowrap;
}
.league-bar.error .league-tag { background: var(--red); }
.league-save { border: 2px solid var(--primary); display: flex; flex-direction: column; gap: 12px; }
.league-save h2 { margin-bottom: 4px; }
.league-save-text p { margin: 0; }
/* under the results table on a wide screen: text on the left, the button on the right */
@media (min-width: 861px) {
  .league-save { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .league-save > .btn { width: auto; flex: none; min-width: 260px; }
}
.league-save.saved { border-color: var(--green); }
.league-save.saved h2 { color: var(--green-text); }

/* ── Admin ── */
.code-big {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 30px; font-weight: 800;
  letter-spacing: .12em; text-align: center; padding: 16px; margin-bottom: 12px;
  background: var(--primary); color: #fff; border-radius: 8px; user-select: all;
}
.code-big + .btn-stack + p { margin-top: 12px; }
.rounds { display: grid; gap: 10px; margin-bottom: 14px; }
.round { background: var(--tile); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.round-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.round-head strong { font-size: 13px; }
.round-head small { margin-left: auto; }
.round-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.round-dates input { background: var(--card); min-height: 40px; padding: 8px; }
.state {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.state.open { background: var(--green-soft); color: var(--green-text); border-color: #a7f3d0; }
.state.upcoming { background: var(--card); color: var(--text); border-color: var(--line); }
.state.closed { background: var(--line); color: var(--muted); }
.new-league .fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.new-league .wide { grid-column: 1 / -1; }
.import-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.subs, .past { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.subs li {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  background: var(--tile); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.subs .names { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 2px; }
.tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; margin: 0 4px;
}
.past li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--tile); border: 1px solid var(--line); border-radius: 8px;
}
.past li > div { display: flex; flex-direction: column; min-width: 0; }
.past li a { font-weight: 600; font-size: 13px; }

/* Admin panel: left overview window + right window with tabs (like SDK-MainPCgui) */
.admin-shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: 12px; align-items: stretch; flex: 1; }
.admin-shell:has(> .flow) { grid-template-rows: auto 1fr; }
.admin-side { display: flex; flex-direction: column; gap: 24px; }
.side-section > h2 {
  font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.side-section .title { margin-bottom: 4px; }
.side-section .code-big { margin-bottom: 8px; }
.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.btn.full { width: 100%; }

.round-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.round-list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px;
  background: var(--tile); border: 1px solid transparent; font-size: 13px;
}
.round-list li.open { background: var(--green-soft); border-color: #a7f3d0; }
.round-list li.closed { color: var(--muted); }
.rl-num { font-weight: 700; width: 18px; }
.rl-dates { flex: 1; font-variant-numeric: tabular-nums; }

.admin-panel { display: flex; flex-direction: column; min-height: 100%; }
.admin-panel > .tabs { flex: none; }
.tab-panel { padding: 24px; }
.rows { display: flex; flex-direction: column; gap: 8px; }
.rows > * { margin: 0; }
.panel-intro { margin-bottom: 16px; }
.empty { color: var(--muted); text-align: center; padding: 48px 0; }

/* dates as a compact table */
.date-table { display: grid; gap: 6px; }
.dt-head, .dt-row { display: grid; grid-template-columns: 120px 240px minmax(0, 1fr); gap: 12px; align-items: center; }
.new-league .dt-head, .new-league .dt-row { grid-template-columns: 120px 220px; }
.dt-row select {
  width: 100%; min-height: 40px; padding: 8px 10px; font-size: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 7px;
}
.dt-period { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dt-head { padding: 0 11px; }
.dt-head span { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.dt-row { padding: 8px 10px; background: var(--tile); border: 1px solid var(--line); border-radius: 8px; }
.dt-row.open { background: var(--green-soft); border-color: #a7f3d0; }
.dt-row strong { font-size: 13px; }
.dt-row input {
  width: 100%; min-height: 40px; padding: 8px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 7px;
}
.dt-state { display: flex; align-items: center; gap: 8px; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.form-actions .btn { min-width: 220px; }

/* TV import */
.import-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.file-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 36px 20px; border: 2px dashed #d4d4d8; border-radius: 10px; background: var(--input); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.file-drop:hover, .file-drop:focus-within { border-color: var(--text); background: var(--tile); }
.file-drop.chosen { border-style: solid; border-color: var(--green); background: var(--green-soft); }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.file-drop strong { font-size: 14px; }
.import-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 160px; gap: 10px; }
.import-row select { width: 100%; min-height: 44px; padding: 10px 12px; background: var(--input); border: 1px solid var(--line); border-radius: 8px; }

/* submissions */
.subs li { align-items: center; }
.sub-main { min-width: 0; }
.sub-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 2px; }
.sub-top .tag { margin: 0; }

.new-league .fields { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.new-league .wide { grid-column: auto; }
.admin-panel > h2 { margin: 0 0 16px; }
.tab-panel > .new-league { max-width: 760px; }

@media (min-width: 861px) {
  body:has(.admin-shell) .page { min-height: 100vh; }
  body:has(.admin-shell) main { flex: 1; }
}
@media (max-width: 1100px) {
  .new-league .fields { grid-template-columns: 1fr 1fr; }
  .new-league .wide { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { gap: 18px; }
  .tab-panel { padding: 16px; }
  .dt-head { display: none; }
  .dt-row, .new-league .dt-row { grid-template-columns: 1fr 1fr; }
  .dt-row strong { grid-column: 1 / -1; display: flex; justify-content: space-between; }
  .dt-state { grid-column: 1 / -1; }
  .import-row { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; }
  .tabs .tab { flex: 1; justify-content: center; }
}

/* Admin: "Naslednji koraki" – phase + next actions, across the full width */
.flow { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; }
.flow-phases { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; counter-reset: ph; }
.flow-phases li {
  counter-increment: ph; flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px; background: var(--tile); border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
}
.flow-phases li::before {
  content: counter(ph); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--line); color: var(--muted); font-size: 11px; flex: none;
}
.flow-phases li.done { color: var(--text); }
.flow-phases li.done::before { content: "✓"; background: var(--green-dark); color: #fff; }
.flow-phases li.current { background: var(--green-soft); border-color: #a7f3d0; color: var(--green-text); }
.flow-phases li.current::before { background: var(--green-dark); color: #fff; }
/* admin side: next / back step buttons under the league name */
.step-controls { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.step-controls form { margin: 0; }
.step-controls.debug { padding: 10px; border: 1px dashed #f59e0b; border-radius: 8px; }
.debug-tag { margin: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #b45309; }
.step-controls .btn.primary { white-space: normal; line-height: 1.3; }
/* league steps: Priprava · 1.–5. turnir · Zaključek (no counter – the names carry the numbers) */
.flow-phases.steps li { justify-content: center; padding: 8px 6px; white-space: nowrap; min-width: 0; }
.flow-phases.steps li::before { content: ""; width: 8px; height: 8px; }
.flow-phases.steps li.done::before { content: "✓"; width: 16px; height: 16px; font-size: 10px; }
.flow-phases.steps li.current::before { width: 10px; height: 10px; box-shadow: 0 0 0 3px #a7f3d0; }
.flow-phases.steps .short { display: none; }
.flow-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.flow-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.flow-text h2 { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.flow-text p { font-size: 15px; }
.flow-text .auto-note { font-size: 13px; color: var(--muted); }
.flow-text .auto-note.warn { color: #9a6700; }
/* checklist: who still has to shoot the open tournament */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.checklist li {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--card);
}
.checklist li.done { background: var(--green-soft); border-color: #a7f3d0; }
.ck-mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c7c7cc; background: #fff;
  display: grid; place-items: center;
}
.checklist li.done .ck-mark { border-color: var(--green-dark); background: var(--green-dark); }
.checklist li.done .ck-mark::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; }
.ck-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ck-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-info { font-size: 12px; color: var(--muted); }
.checklist li.done .ck-info { color: var(--green-text); }
.checklist li .btn { flex: none; }
.flow-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 860px) {
  .checklist { grid-template-columns: 1fr; }
  .flow-phases li { font-size: 10px; padding: 6px 8px; }
  .flow-phases.steps { gap: 4px; }
  .flow-phases.steps li { padding: 6px 2px; gap: 4px; flex: 1 1 0; overflow: hidden; }
  .flow-phases.steps li:not(.current) .long { display: none; }
  .flow-phases.steps li:not(.current) .short { display: inline; }
  .flow-phases.steps li.current { flex: 3.2 1 0; }
  .flow-actions { width: 100%; }
  .flow-actions .btn, .flow-actions form { flex: 1 1 auto; }
  .flow-actions form .btn { width: 100%; }
}

/* Admin lists (Klubi, Prijave): one-line rows that open on click */
.inline-add { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
.inline-add input {
  width: 100%; min-height: 44px; padding: 10px 12px; font-size: 14px;
  background: var(--input); border: 1px solid var(--line); border-radius: 8px;
}
.item-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.item { background: var(--card); }
.item-list .item + .item { border-top: 1px solid var(--line); }
.item-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--tile); border-bottom: 1px solid var(--line);
}
.it-title { font-weight: 600; font-size: 15px; }
.it-meta { color: var(--muted); font-size: 13px; margin-right: auto; }
.item .club-code { font-size: 13px; padding: 4px 10px; }
.it-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.it-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.it-foot .person-add { flex: 1; max-width: 460px; }
.list-total { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: right; }
.list-total b { color: var(--text); }

.su-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 10px; margin-bottom: 12px;
  background: var(--tile); border: 1px solid var(--line);
}
.su-status.open { background: var(--green-soft); border-color: #a7f3d0; }
.su-status.expired { background: #fef2f2; border-color: #fecaca; }
.su-status-text { display: flex; flex-direction: column; gap: 2px; }
.su-status-text b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.su-status.open b { color: var(--green-text); }
.su-status.expired b { color: var(--red-text); }
.su-status-text b i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.su-status-text span { font-size: 13px; color: var(--muted); }
.su-status-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.item.settings { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.item.settings .signup-settings { border: 0; border-radius: 0; margin: 0; padding: 16px; display: grid; }
.list-head { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.list-head b { background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; letter-spacing: 0; }
.list-head ~ .list-head { margin-top: 22px; }
.confirmed-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.confirmed-list li { display: flex; flex-direction: column; padding: 8px 12px; background: var(--tile); border-radius: 8px; font-size: 14px; font-weight: 500; }
.confirmed-list small { font-size: 12px; font-weight: 400; }
.list-foot { margin-top: 12px; }
.signup-state.expired { background: #fef2f2; border-color: #fecaca; color: var(--red-text); }
@media (max-width: 860px) {
  .inline-add { grid-template-columns: 1fr; }
  .item-head { flex-wrap: wrap; gap: 6px 10px; }
  .it-meta { flex-basis: 100%; order: 3; margin: 0; }
  .item .club-code { margin-left: auto; }
  .it-foot .person-add { max-width: none; flex-basis: 100%; }
}

/* Admin tabs hold several sections: Udeleženci (prijave + klubi), Rezultati (oddaje + uvoz), Liga (datumi, prijave, zgodovina) */
.tab-section + .tab-section { margin-top: 28px; }
.section-title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px;
}
.section-title b { background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; letter-spacing: 0; }
.item.tab-section { margin-top: 28px; }

/* History tab: one row per finished league */
.history-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.hr-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hr-main strong { font-size: 15px; }
.hr-stats { display: flex; gap: 16px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.hr-stats b { color: var(--text); font-size: 15px; }
.hr-actions { display: flex; gap: 6px; }
@media (max-width: 860px) {
  .history-row { grid-template-columns: 1fr; gap: 8px; }
}

/* Clubs (admin): one row per club – info left, registered people right */
.club-total { background: var(--primary) !important; color: #fff; font-weight: 600; }
.club-total strong { font-size: 15px; }
.stat-grid.three { grid-template-columns: repeat(3, 1fr); }
.club-stats { margin: 0 0 16px; max-width: 520px; }
.club-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.club-mini li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--tile); border-radius: 7px; font-size: 13px; font-weight: 500; }
.club {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
.club-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.club-info h3 { font-size: 15px; }
.club-info input { width: 100%; min-height: 40px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.club-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.club-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; letter-spacing: .1em; font-size: 16px;
  background: var(--primary); color: #fff; border-radius: 6px; padding: 5px 12px; user-select: all;
}
.club-people { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
.club textarea {
  width: 100%; font: inherit; font-size: 14px; line-height: 1.5; padding: 10px 12px; resize: vertical;
  background: var(--input); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
}
.club-people { align-items: stretch; }
/* registered people: one tag per person, each with its own × */
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.people li {
  display: inline-flex; align-items: center; gap: 2px; padding: 0 0 0 12px; height: 34px;
  background: var(--tile); border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500;
}
.person-x {
  width: 30px; height: 30px; margin: 0 1px; border: 0; border-radius: 50%; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--muted);
}
.person-x:hover:not(:disabled) { background: #fee2e2; color: var(--red-text); }
.person-x:disabled { opacity: .3; cursor: not-allowed; }
.person-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.person-add input, .add-club-fields input {
  width: 100%; min-height: 40px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
}
.person-add .btn { min-height: 40px; height: 40px; min-width: 96px; }
.add-club { border-style: dashed; background: var(--tile); }
.add-club-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.add-club-fields label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
}
.add-club-fields .btn { min-height: 40px; height: 40px; }
/* phone: club row stacks (must come after the base club rules) */
@media (max-width: 860px) {
  .club { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .add-club-fields { grid-template-columns: 1fr; }
  .add-club-fields .btn { width: 100%; }
}
.add-club .btn { min-width: 160px; }
.warn-dot {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 800;
}
.dup {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid var(--red); border-radius: 8px; font-size: 13px;
}
.dup strong { color: var(--red-text); display: flex; align-items: center; gap: 8px; }
.dup span { color: var(--muted); }
.tag.club-tag { background: var(--primary); border-color: var(--primary); color: #fff; }
.club-name { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }

/* ── League standings ── */
.league-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px; }
.picker-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.picker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--tile); color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.chip small { font-size: 11px; font-weight: 500; color: var(--muted); }
.chip:hover { border-color: var(--text); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip.active small { color: #c7c7cc; }
.picker-note { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.standings-page { display: flex; flex-direction: column; gap: 14px; }
.standings-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.standings-head h2 { margin-bottom: 6px; }
.standings-head p { margin-top: 4px; }
.round-chips { display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; }
/* Lestvica: numbered chips like the admin's Turnirji – the colour says the state */
.round-chips .rc {
  display: grid; place-items: center; padding: 6px 0; border: 2px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text); font-size: 14px; font-weight: 700;
}
.round-chips .rc.closed { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.round-chips .rc.closed::after { content: " ✓"; font-size: 11px; white-space: pre; }
.round-chips .rc.open { background: var(--green-soft); border-color: var(--green-dark); box-shadow: 0 0 0 3px #d1fae5; }
.live-note { display: flex; align-items: center; gap: 6px; }
[data-compact] .live-note { margin-top: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
[data-standings] .table-wrap { border: 1px solid var(--line); border-radius: 8px; }
.league-table { min-width: 900px; }
.league-table th, .league-table td { padding: 10px 12px; white-space: nowrap; }
.league-table td:nth-child(2) { white-space: normal; font-weight: 500; }
.league-table col.c-rank { width: 80px; }
.league-table col.c-name { width: 240px; }
.league-table col.c-num { width: 100px; }
.league-table col.c-tens { width: 70px; }
/* the 5 tournament columns share the rest of the width */
.rounds-inline { display: none; }
.league-table .cell small { color: var(--muted); font-size: .75em; }
.league-table .cell.dropped { text-decoration: line-through; color: var(--muted); }
.league-table .final { font-weight: 800; font-size: 16px; }
.league-table td.tens { color: var(--muted); }
.league-table th:nth-child(5), .league-table td:nth-child(5) { border-left: 2px solid var(--line); }
.league-table tr.changed td { animation: flash 2.5s ease-out; }
@keyframes flash { from { background: var(--ten); } }

/* ── Popups: same as SDK-MainPCgui (.modal / .modal-content / .close / toasts) ── */
dialog.modal {
  border: 0; padding: 0; background: transparent; overflow: visible;
  width: 90%; max-width: 420px; color: var(--text);
}
dialog.modal::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }
dialog.modal[open] { animation: modal-in .15s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-content {
  background: var(--card); padding: 32px; border-radius: 8px; border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
.modal-content h2 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 12px; padding-right: 32px; }
.modal-content p { font-size: 14px; color: var(--muted); line-height: 1.5; margin-bottom: 24px; }
.close {
  float: right; margin: -10px -10px 0 0; width: 36px; height: 36px; padding: 0;
  font-size: 28px; font-weight: 700; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--muted); transition: color .2s;
}
.close:hover { color: var(--text); }
.modal-actions { display: flex; flex-direction: column; gap: 10px; }
.modal-actions .btn { width: 100%; }

.toast-host {
  position: fixed; right: 20px; bottom: 20px; z-index: 2000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none;
}
.toast {
  max-width: min(420px, calc(100vw - 40px)); padding: 11px 16px; border-radius: 8px;
  background: #111; color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); border-left: 4px solid var(--green);
  animation: toast-in .18s ease-out; transition: opacity .3s, transform .3s;
}
.toast-err { border-left-color: var(--red); }
.toast.hide { opacity: 0; transform: translateY(6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Desktop: windows fill the screen like the main PC app ── */
@media (min-width: 861px) {
  .page { min-height: 100vh; }
  main { flex: 1; }
  main > .screen { flex: 1; }
  .screen.layout { align-items: stretch; }
  .screen .side { position: static; }
  .screen .col > .grow { flex: 1; }
  /* the main button stays visible at the bottom even when the right column is long */
  .screen .actionbar { position: sticky; bottom: 12px; box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
}

/* ── Start page roadmap: bigger on PC, centred in the free space of its window ── */
@media (min-width: 641px) {
  /* steps share one top line (dots in a row); the whole timeline is centred in the free space */
  .home-league .roadmap { align-items: flex-start; padding: 28px 0 32px; margin: auto 0; }
  .home-league .league-actions { margin-top: 0; }
  .home-league .roadmap li { gap: 4px; }
  .home-league .roadmap li::before { top: 14px; height: 4px; }
  .home-league .rm-dot { width: 32px; height: 32px; border-width: 4px; margin-bottom: 12px; }
  .home-league .roadmap li.done .rm-dot::after { font-size: 15px; }
  .home-league .roadmap li.current .rm-dot { box-shadow: 0 0 0 7px #d1fae5; }
  .home-league .roadmap strong { font-size: 16px; }
  .home-league .roadmap small { font-size: 13px; }
  .home-league .roadmap em { font-size: 11px; padding: 3px 10px; margin-top: 8px; }
}

/* ── PC: every page fills the screen height ── */
@media (min-width: 861px) {
  .page { min-height: 100vh; }
  main { flex: 1; }
  main > .page-stack, main > .home-page, main > .admin-shell { flex: 1; }
  /* the main window of each page takes the remaining height */
  .page-stack > :last-child { flex: 1; }                      /* league page: schedule; sign-up: form + side */
  .signup-grid { align-items: stretch; }
  .signup-grid > .col > :last-child { flex: 1; }
  main > .standings-page { flex: 1; }                          /* live standings */
  .home-page > .home-league { flex: 1; display: flex; flex-direction: column; }
  .home-league .league-actions { margin-top: auto; }          /* buttons at the bottom of the window */
  main > .narrow { margin-top: auto; margin-bottom: auto; }   /* login & empty pages: centred */

  /* sign-up page: exactly one screen, a long shooter list scrolls inside its own box */
  body:has(.signup-form) .page { height: 100vh; min-height: 0; }
  body:has(.signup-form) main,
  body:has(.signup-form) .page-stack,
  body:has(.signup-form) .signup-grid { min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body:has(.signup-form) .page-stack > .hero { padding-top: 14px; padding-bottom: 14px; }
  body:has(.signup-form) .hero h1 { font-size: 24px; }
  body:has(.signup-form) .hero-status { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
  body:has(.signup-form) .hero-kicker { flex-basis: 100%; }
  body:has(.signup-form) .signup-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  body:has(.signup-form) .signup-grid > .col { min-height: 0; overflow: auto; }
  body:has(.signup-form) .signup-grid > .signup-main { overflow: visible; }
  .signup-form { flex: 1; min-height: 0; gap: 10px; }
  /* shooters: a framed box that takes all the free height; names in columns on wide screens */
  .signup-form .shooters {
    flex: 1; min-height: 0; padding: 12px 14px 14px;
    background: var(--tile); border: 1px solid var(--line); border-radius: 10px;
  }
  .signup-form .shooters legend { float: left; border: 0; padding: 0; margin: 0; }
  .signup-form #shooter-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px;
    align-content: start; padding-left: 22px;
  }
  .signup-form #shooter-list input { background: var(--card); }
  /* right column: the schedule fills its window, months spread evenly */
  body:has(.signup-form) .signup-grid > .col:not(.signup-main) > :last-child { display: flex; flex-direction: column; }
  body:has(.signup-form) .month-list { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
  body:has(.signup-form) .month-list li { flex: 1 1 0; max-height: 96px; min-height: 38px; padding-top: 4px; padding-bottom: 4px; }
  .signup-form input { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
  .signup-form #shooter-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }

  /* admin panel: exactly one screen, the side window and each tab scroll inside themselves */
  body:has(.admin-shell) .page { height: 100vh; min-height: 0; }
  body:has(.admin-shell) main { min-height: 0; }
  .admin-shell { min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .admin-shell:has(> .flow) { grid-template-rows: auto minmax(0, 1fr); }
  .admin-shell > .flow { max-height: 40vh; overflow-y: auto; }   /* a long checklist can't eat the tabs */
  .admin-side { min-height: 0; overflow-y: auto; }
  .admin-panel { min-height: 0; }
  .admin-panel > .tab-panel { flex: 1; min-height: 0; overflow-y: auto; }

  /* Aktivna liga (side window): compact, so it fits without scrolling – a long club list scrolls in its own box */
  .admin-side { gap: 14px; padding: 16px; }
  .admin-side .side-section > h2 { padding-bottom: 6px; margin-bottom: 8px; }
  .admin-side .title { font-size: 17px; margin-bottom: 2px; }
  .admin-side .signup-state { margin-top: 8px; padding: 6px 10px; }
  .admin-side .step-controls { margin-top: 10px; gap: 6px; }
  .admin-side .step-controls .btn { min-height: 40px; padding: 8px 12px; }
  .admin-side > * { flex: none; }                 /* nothing collapses – the side scrolls instead */
  .admin-side .club-mini { min-height: 0; overflow-y: auto; gap: 3px; }
  .admin-side .club-mini li { padding: 5px 10px; }
  .admin-side .club-total { position: sticky; bottom: 0; }
  .admin-side .round-list { gap: 3px; }
  .admin-side .round-list li { padding: 5px 10px; }
  .admin-side .side-bottom {
    gap: 6px; padding-top: 10px; margin-top: auto;
    position: sticky; bottom: -16px; margin-bottom: -16px; padding-bottom: 16px;   /* always visible at the bottom */
    background: var(--card); box-shadow: 0 -10px 10px -6px var(--card);
  }
  .admin-side .side-bottom .btn { min-height: 38px; padding: 8px 12px; }
}

/* ── Sign-up page on a low PC screen (laptops): drop the extras so everything fits ── */
@media (min-width: 861px) and (max-height: 820px) {
  body:has(.signup-form) .hero-kicker { display: none; }
  body:has(.signup-form) .how .steps-list span { display: none; }
  body:has(.signup-form) .how .steps-list li { padding: 8px 12px; }
  body:has(.signup-form) .how .steps-list li { align-items: center; }
  body:has(.signup-form) .how .steps-list li::before { width: 26px; height: 26px; font-size: 12px; grid-row: auto; }
  body:has(.signup-form) .month-list { gap: 6px; }
  .signup-form { gap: 8px; }
}

/* ── Tablet: narrower side window ── */
@media (max-width: 1100px) {
  :root { --side: 290px; }
}

/* ── Phone: one column, windows in a useful order, main button pinned to the bottom ── */
@media (max-width: 860px) {
  .page { padding: 8px; gap: 8px; }
  main { gap: 8px; }
  .card { padding: 16px; }
  .card.flush { padding: 0; }
  .card-body { padding: 16px; }

  .topbar { padding: 0 12px; min-height: 0; gap: 0; }
  .brand-logo { height: 34px; }
  .topbar { padding-bottom: 10px; }
  .steps { display: flex; width: 100%; margin: 0; }
  .steps li { flex: 1; padding: 0 4px; font-size: 11px; }
  .header-right { padding: 8px 0; }

  .layout { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .col { display: contents; }
  .side { position: static; }
  .o0 { order: 0; } .o1 { order: 1; } .o2 { order: 2; } .o3 { order: 3; } .o4 { order: 4; } .o9 { order: 9; }

  /* main action pinned to the bottom of the screen */
  #setup .actionbar, #score .actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    flex-direction: row-reverse; border-radius: 0; border-width: 1px 0 0; padding: 10px 12px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .25);
  }
  #setup .actionbar .btn, #score .actionbar .btn { width: auto; }
  #setup .actionbar .btn.primary, #score .actionbar .btn.primary { flex: 1; }
  #setup, #score { padding-bottom: 84px; }
  .toast-host { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  body:has(#setup:not([hidden])) .toast-host,
  body:has(#score:not([hidden])) .toast-host { bottom: 84px; }
  .modal-content { padding: 24px; }

  .score-head { flex-direction: column; align-items: stretch; gap: 12px; }
  /* each target is a full-width row; the shot boxes stretch to fill it */
  .target-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .target .tn { width: 30px; font-size: 12px; }
  .shot { height: 52px; font-size: 20px; }
  .target .sum { width: 34px; font-size: 16px; }
  .home { margin-top: 8px; padding: 24px 16px 16px; }
  .new-league .fields { grid-template-columns: 1fr 1fr; }
  .league-bar { flex-wrap: wrap; }
}

@media (max-width: 860px) {
  .league-shell { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* standings on a phone: no sideways scrolling – tournaments as tags under the name */
  .league-table { min-width: 0; }
  .league-table .rcol, .league-table col.c-round { display: none; }
  .league-table col.c-rank { width: 52px; }
  .league-table col.c-name { width: auto; }
  .league-table col.c-num { width: 64px; }
  .league-table col.c-tens { width: 44px; }
  .league-table td:nth-child(2) { white-space: normal; }
  .rounds-inline { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .rounds-inline .ri {
    display: inline-flex; gap: 4px; align-items: baseline; font-size: 11px; font-variant-numeric: tabular-nums;
    padding: 1px 6px; border-radius: 5px; background: var(--tile); border: 1px solid var(--line); color: var(--text);
  }
  .rounds-inline .ri b { font-size: 9px; color: var(--muted); font-weight: 700; }
  .rounds-inline .ri.empty { color: var(--muted); }
  .rounds-inline .ri.dropped { text-decoration: line-through; color: var(--muted); }
  [data-standings] .table-wrap { border: 0; border-radius: 0; margin: 0 -16px; }
  .results-table th, .results-table td { padding: 10px; }
  .results-table col.c-rank { width: 64px; }
  .results-table col.c-name { width: auto; }
  .results-table col.c-num { width: 80px; }
  .results-table .c-avg { display: none; }
}
}

@media (max-width: 420px) {
  .brand-sub { display: none; }
  .player-list { grid-template-columns: 1fr; }
}

@media print {
  html, body { background: #fff; }
  .topbar .steps, .side .card:not(:first-child), #results .side, .league-save, #setup, #score, .toast-host, .league-bar { display: none !important; }
  .layout { display: block; }
  .card { border: 0; box-shadow: none; }
  .side { position: static; }
}

/* Invite to the 6th, fun tournament (home, standings): a date block + two lines */
.invite {
  display: flex; gap: 16px; align-items: center;
  background: var(--green-soft); border: 1px solid #a7f3d0;
}
.home-league .invite { box-shadow: none; margin: 4px 0 16px; }
.inv-date {
  flex: none; width: 64px; border-radius: 10px; overflow: hidden; text-align: center;
  background: var(--card); border: 1px solid #a7f3d0;
}
.inv-date small { display: block; padding: 3px 0; background: var(--green-dark); color: #fff;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.inv-date strong { display: block; padding: 4px 0 6px; font-size: 26px; font-weight: 800; line-height: 1.1; }
.inv-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.invite-title { font-size: 18px; font-weight: 800; color: var(--text); text-transform: none; letter-spacing: 0; margin: 0; padding: 0; border: 0; }
.inv-meta { margin: 0; font-size: 14px; font-weight: 600; color: var(--green-text); }
.inv-note { margin: 0; font-size: 13px; color: var(--muted); white-space: pre-line; }
@media (max-width: 520px) { .invite { align-items: flex-start; gap: 12px; } .inv-date { width: 56px; } .invite-title { font-size: 16px; } }

/* Admin: 6th tournament form */
.final-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.final-form .wide { grid-column: 1 / -1; }
.final-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
}
.final-when { display: grid; grid-template-columns: 90px minmax(0, 1fr) 110px; gap: 12px; }
.final-form input, .final-form textarea, .final-form select {
  width: 100%; min-height: 42px; padding: 9px 12px; font: inherit; font-size: 14px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--text);
  background: var(--input); border: 1px solid var(--line); border-radius: 8px;
}
.final-form textarea { resize: vertical; }
.final-form .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin: 0; }
.final-form .form-actions .btn { min-width: 140px; }
.final-preview { margin-right: auto; }
@media (max-width: 820px) { .final-form { grid-template-columns: 1fr; } }

/* Liga tab: sign-up settings locked once the league has left Priprava */
fieldset.signup-settings { border: 0; margin: 0; padding: 0; min-width: 0; }
.item.settings.locked form { opacity: .55; filter: grayscale(1); }
.item.settings.locked form * { cursor: not-allowed; }
details.item.settings > summary { cursor: pointer; list-style: none; }
details.item.settings > summary::-webkit-details-marker { display: none; }
details.item.settings > summary::after { content: "›"; margin-left: auto; font-size: 18px; color: var(--muted); transition: transform .15s; }
details.item.settings[open] > summary::after { transform: rotate(90deg); }

/* Plan turnirjev: the row colour says the state, so the badge goes */
.dt-row .dt-state .state { display: none; }
.dt-state:not(:has(small)) { display: none; }

.dt-row.closed { opacity: .65; }

/* Admin top bar: the league's road – Priprava → 1.–5. turnir → Zaključni turnir */
.admin-roadmap { margin: 2px 0 4px; }
.admin-roadmap .short { display: none; }
.admin-roadmap li.current strong { color: var(--green-text); }
@media (max-width: 860px) {
  /* stays a horizontal line on the phone: short labels, only the current step shows its date */
  .admin-roadmap { flex-direction: row; }
  .admin-roadmap li { flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 0 2px; }
  .admin-roadmap li::before { top: 9px; bottom: auto; left: -50%; width: 100%; height: 3px; transform: none; }
  .admin-roadmap li:first-child::before { display: none; }
  .admin-roadmap .rm-dot { margin-bottom: 6px; }
  .admin-roadmap .long { display: none; }
  .admin-roadmap .short { display: inline; }
  .admin-roadmap strong { min-width: 0; font-size: 12px; }
  .admin-roadmap small { display: none; }
  .admin-roadmap li.current small { display: block; font-size: 10px; white-space: nowrap; }
  .admin-roadmap em { margin: 4px 0 0; font-size: 9px; padding: 1px 6px; }
}

/* open tournament: how many clubs have submitted – counter + bar, amber while some are missing */
.ck-progress { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.ck-count { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ck-count b { font-size: 24px; font-weight: 800; color: var(--text); }
.ck-bar { flex: 1 1 160px; max-width: 320px; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ck-bar i { display: block; height: 100%; border-radius: inherit; background: #f59e0b; transition: width .3s; }
.ck-label { font-size: 13px; color: var(--muted); }
.ck-progress .ck-label b { color: #b45309; }
.ck-progress.none .ck-count b, .ck-progress.some .ck-count b { color: #b45309; }
.ck-progress.all .ck-count b, .ck-progress.all .ck-label { color: var(--green-text); }
.ck-progress.all .ck-bar i { background: var(--green-dark); }
/* a club that still has to shoot: amber "waiting" mark */
.checklist li.todo { border-left: 3px solid #f59e0b; }
.checklist li.todo .ck-mark { border-color: #f59e0b; background: #fffbeb; }
.checklist li.todo .ck-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.checklist li.todo .ck-info { color: #b45309; }

/* ── PC: a compact top card, so the tabs below get most of the screen ── */
@media (min-width: 861px) {
  .flow { gap: 10px; padding: 14px 20px 16px; }
  .admin-roadmap { margin: 0; }
  .admin-roadmap .rm-dot { width: 18px; height: 18px; margin-bottom: 6px; border-width: 3px; }
  .admin-roadmap li::before { top: 8px; }
  .admin-roadmap li.done .rm-dot::after { font-size: 10px; }
  .admin-roadmap li.current .rm-dot { box-shadow: 0 0 0 4px #d1fae5; }
  .admin-roadmap strong { font-size: 13px; }
  .admin-roadmap small { font-size: 11px; }
  .admin-roadmap em { margin-top: 3px; font-size: 9px; padding: 1px 7px; }
  .flow-body { padding-top: 10px; border-top: 1px solid var(--line); }
  /* status · progress · auto-close on one line */
  .flow-text { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
  .flow-text p { font-size: 14px; }
  .flow-text .ck-progress { margin: 0; flex: 1 1 360px; }
  .flow-text .auto-note { flex-basis: 100%; }
  /* clubs: slim cards, four in a row */
  .checklist { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 6px; }
  .checklist li { min-height: 0; padding: 6px 8px 6px 10px; gap: 8px; }
  .checklist .ck-mark { width: 18px; height: 18px; }
  .checklist li.done .ck-mark::after { font-size: 11px; }
  .checklist .ck-name { font-size: 13px; }
  .checklist .ck-info { font-size: 11px; }
  .checklist li .btn.sm { min-height: 26px; padding: 3px 8px; font-size: 10px; }
}

/* ── calmer admin: side numbers, club chips with details in the tooltip ── */
.side-stats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side-stats a {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px;
  background: var(--tile); border: 1px solid var(--line); color: inherit; text-decoration: none;
}
.side-stats a:hover { border-color: var(--text); }
.side-stats strong { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.side-stats span { font-size: 12px; color: var(--muted); }
.checklist li { cursor: default; }
.checklist .ck-name { flex: 1; min-width: 0; }

/* start page: the two league actions as matching cards – code entry (green accent) and results */
.league-actions { align-items: stretch; }
.league-actions .choice, .code-entry {
  border-radius: 12px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.league-actions .choice { gap: 16px; }
.league-actions .choice:hover { border-color: var(--text); background: var(--card); }
.league-actions .choice-icon, .code-entry .choice-icon {
  width: 44px; height: 44px; padding: 10px; border-radius: 10px; background: var(--tile); color: var(--text);
}
.league-actions .choice-text strong, .code-entry label strong { font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.league-actions .choice-text small, .code-entry label small { font-size: 13px; color: var(--muted); }
/* sign-up open: same card, green */
.league-actions .choice.live { border-color: var(--green-dark); }
.league-actions .choice.live .choice-icon { background: var(--green-dark); color: #fff; }
.league-actions .choice.live small, .league-actions .choice.live .chevron { color: var(--muted); }
.league-actions .choice.live:hover { background: var(--green-soft); }

.code-entry { display: flex; flex-direction: column; gap: 14px; border: 1.5px solid var(--green-dark); scroll-margin-top: 16px; }
.ce-head { display: flex; align-items: center; gap: 16px; }
.ce-head label { display: flex; flex-direction: column; gap: 2px; }
.code-entry .choice-icon { background: var(--green-dark); color: #fff; }
.code-entry .code-input {
  max-width: none; min-height: 46px; padding: 8px 12px; font-size: 20px; letter-spacing: 1px;
  background: var(--input); border: 1px solid var(--line); border-radius: 8px;
}
.code-entry .code-input:focus { border-color: var(--green-dark); outline: 2px solid #a7f3d0; outline-offset: 0; }
.code-entry .btn { min-height: 46px; padding: 10px 22px; white-space: nowrap; font-weight: 700; }
.code-entry .btn:disabled { opacity: .7; cursor: progress; }
.code-entry .form-error { font-size: 13px; }
@media (max-width: 640px) {
  .league-actions:has(.code-entry) { grid-template-columns: 1fr; }
  .code-entry .code-row { grid-template-columns: 1fr; }
  .league-actions .choice, .code-entry { padding: 14px 16px; }
  .league-actions .choice { flex-direction: row; align-items: center; }
  .league-actions .chevron { display: block; }
}

/* start page: "Kako deluje liga" behind an ⓘ button, shown in a popup */
.card-head-right { display: inline-flex; align-items: center; gap: 12px; }
.info-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: var(--tile); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer;
}
.info-btn span {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary); color: #fff; font: italic 700 12px/1 Georgia, serif;
}
.info-btn:hover { border-color: var(--text); }
dialog.how-modal { max-width: 520px; }
.how-modal .how-steps { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  .home-league .roadmap li:last-child { padding-bottom: 0; }
  .home-league .league-actions { margin-top: 18px; padding-top: 16px; }
}

/* ═════════ Admin (v2): one column – "now" card + tabs ═════════ */
.admin-page { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.admin-page .admin-panel { min-height: 0; }

/* now card */
.now-card { gap: 14px; }
.now-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.now-league { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.now-league strong { font-size: 15px; }
.now-links { display: flex; gap: 6px; align-items: center; }
.now-links form { margin: 0; }

.mini-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.mini-steps li {
  flex: 1; text-align: center; padding: 5px 4px; border-radius: 6px; font-size: 11px; font-weight: 600;
  background: var(--tile); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-steps li.done { background: #d1fae5; color: var(--green-text); }
.mini-steps li.current { background: var(--green-dark); color: #fff; }
.mini-steps .short { display: none; }

.now-body { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.now-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.now-kicker {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; color: var(--green-text);
}
.now-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.now-title { margin: 0; padding: 0; border: 0; font-size: 22px; font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--text); }
.now-title small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); }
.now-meter { flex: 0 1 220px; display: flex; flex-direction: column; gap: 6px; }
.nm-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.nm-top b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.nm-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.nm-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.now-meter.some .nm-bar i { background: #f59e0b; }
.now-meter.some .nm-top b { color: #b45309; }
.now-meter.all .nm-bar i { background: var(--green-dark); }
.now-meter.all .nm-top b { color: var(--green-text); }
.now-counts { display: flex; gap: 8px; }
.now-counts a {
  display: flex; flex-direction: column; min-width: 92px; padding: 8px 14px; border-radius: 10px;
  background: var(--tile); border: 1px solid var(--line); color: inherit; text-decoration: none;
}
.now-counts a:hover { border-color: var(--text); }
.now-counts strong { font-size: 22px; font-weight: 800; line-height: 1.1; }
.now-counts span { font-size: 12px; color: var(--muted); }
.now-counts a.warn { background: #fffbeb; border-color: #f59e0b; }
.now-counts a.warn strong { color: #b45309; }
.now-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.now-actions form { margin: 0; }
.now-hint { font-size: 13px; color: var(--muted); }
.now-card .step-controls.debug { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 8px 10px; }

/* Klubi: summary + add form, then club cards */
.clubs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.clubs-sum { display: flex; gap: 18px; }
.clubs-sum > span { display: flex; align-items: baseline; gap: 6px; }
.clubs-sum strong { font-size: 20px; font-weight: 800; }
.clubs-sum span span { font-size: 13px; color: var(--muted); }
.club-add { display: flex; gap: 6px; flex: 0 1 520px; }
.club-add input {
  flex: 1; min-width: 0; min-height: 38px; padding: 8px 10px; font-size: 14px;
  background: var(--input); border: 1px solid var(--line); border-radius: 8px;
}
.club-add .btn { min-height: 38px; white-space: nowrap; }

.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.club-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; scroll-margin: 80px; }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--tile); border-bottom: 1px solid var(--line); }
.cc-title { display: flex; flex-direction: column; min-width: 0; }
.cc-title strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-title small { font-size: 11px; }
.cc-code {
  flex: none; padding: 4px 8px; border-radius: 6px; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; font: 700 12px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 1px;
}
.cc-code:hover { background: #000; }
.cc-code.copied { background: var(--green-dark); font-family: inherit; letter-spacing: 0; }
.cc-people { list-style: none; margin: 0; padding: 4px 0; }
.cc-people li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 12px; font-size: 13px; }
.cc-people li:hover { background: var(--tile); }
.cc-people form { margin: 0; }
.cc-people .person-x { opacity: .35; }
.cc-people li:hover .person-x, .cc-people .person-x:focus-visible { opacity: 1; }
@media (hover: none) { .cc-people .person-x { opacity: .7; } }
.cc-foot { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; border-top: 1px solid var(--line); }
.cc-foot .person-add { flex: 1; margin: 0; }
.cc-foot .person-add input {
  width: 100%; min-height: 32px; padding: 5px 8px; font-size: 13px;
  background: transparent; border: 1px dashed var(--line); border-radius: 6px;
}
.cc-foot .person-add input:focus { background: var(--input); border-style: solid; }
.cc-foot form { margin: 0; }
.cc-del { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.cc-del svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc-del:hover:not(:disabled) { background: #fef2f2; color: var(--red); }
.cc-del:disabled { opacity: .3; cursor: not-allowed; }
.confirmed-wrap summary { cursor: pointer; list-style: none; }
.confirmed-wrap summary::-webkit-details-marker { display: none; }

/* Rezultati: tournament filter + groups */
.round-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.round-filter button {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: var(--tile); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text);
}
.round-filter button b { font-size: 11px; color: var(--muted); }
.round-filter button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.round-filter button.active b { color: #c7c7cc; }
.round-filter button:disabled { opacity: .4; cursor: default; }
.sub-group + .sub-group { margin-top: 16px; }

/* Nastavitve: compact plan form */
.plan-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.plan-form .section-title small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.plan-months { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pm { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.pm i { font-style: normal; color: var(--green-text); }
.pm select, .plan-final select, .plan-final input {
  width: 100%; min-height: 38px; padding: 7px 9px; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0;
  background: var(--input); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
}
.pm.open select { border-color: var(--green-dark); background: var(--green-soft); }
.pm.closed select { color: var(--muted); }
.plan-final { display: grid; grid-template-columns: 80px minmax(0, 1.4fr) 96px minmax(0, 2fr); gap: 8px; }
.plan-final label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.plan-final .pf-note { grid-column: 1 / -1; }
.plan-form .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.new-league .plan-months { margin-bottom: 6px; }

@media (max-width: 860px) {
  .plan-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-final { grid-template-columns: 70px minmax(0, 1fr) 90px; }
  .plan-final .pf-place { grid-column: 1 / -1; }
  .mini-steps .long { display: none; }
  .mini-steps .short { display: inline; }
  .mini-steps li.current .long { display: inline; }
  .mini-steps li.current .short { display: none; }
  .mini-steps li.current { flex: 3; }
  .now-meter { flex: 1 1 140px; }
  .club-add { flex: 1 1 100%; flex-wrap: wrap; }
  .club-add input { flex: 1 1 140px; }
  .now-links .btn { min-height: 32px; padding: 6px 10px; font-size: 11px; }
}
/* fixes: add-club bar as a grid, tighter people rows, phone chips two per row */
.club-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; flex: 0 1 560px; }
.club-add .btn { width: auto; padding: 8px 16px; }
.cc-people li { padding: 2px 6px 2px 12px; min-height: 28px; }
.cc-people .person-x { width: 24px; height: 24px; min-height: 0; padding: 0; font-size: 16px; line-height: 1; }
@media (max-width: 860px) {
  .club-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1 1 100%; }
  .club-add .btn { grid-column: 1 / -1; }
  .now-card .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .now-card .checklist li { min-width: 0; }
  .now-card .checklist .ck-name { flex: 1; min-width: 0; }
  .now-card .checklist li { min-height: 0; padding: 6px 8px; gap: 6px; }
  .now-card .checklist .ck-mark { width: 16px; height: 16px; }
  .now-card .checklist .ck-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .now-card .checklist li .btn.sm { min-height: 24px; padding: 2px 6px; font-size: 10px; }
}

/* start page: "Ligaški turnir" card in solid green */
.code-entry { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.code-entry .choice-icon { background: rgba(255, 255, 255, .16); color: #fff; }
.code-entry label strong { color: #fff; }
.code-entry label small { color: #d1fae5; }
.code-entry .code-input { background: #fff; border-color: #fff; }
.code-entry .code-input:focus { outline: 2px solid #6ee7b7; border-color: #fff; }
.code-entry .btn.go { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.code-entry .btn.go:hover:not(:disabled) { background: #000; border-color: #000; }
.code-entry .form-error { color: #fff; background: rgba(0, 0, 0, .25); padding: 6px 10px; border-radius: 6px; }

/* Nastavitve: "Prijave in plačilo" as a plain section like Turnirji */
.su-section .section-title small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.su-section .signup-settings { padding: 0; border: 0; margin: 0; }
.su-section .signup-settings input:not([type=checkbox]) { min-height: 38px; padding: 7px 9px; }
.su-section .signup-actions { display: flex; justify-content: flex-end; }
.su-section.locked fieldset { opacity: .55; filter: grayscale(1); }
.su-section.locked fieldset * { cursor: not-allowed; }

/* ── Admin on PC: the "now" card is a left column with the phone layout, tabs on the right ── */
@media (min-width: 1000px) {
  /* both columns run down to the bottom of the screen (or of the longer tab) */
  main > .admin-page { flex: 1; }
  .admin-page { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 12px; align-items: stretch; }
  .admin-page > .now-card { grid-column: 1; }
  .admin-page > .now-card + .admin-panel { grid-column: 2; }
  .admin-page > .admin-panel:only-child { grid-column: 1 / -1; }
  /* same as on the phone */
  .now-card .now-links .btn { min-height: 32px; padding: 6px 10px; font-size: 11px; }
  .now-card .mini-steps .long { display: none; }
  .now-card .mini-steps .short { display: inline; }
  .now-card .mini-steps li.current { flex: 3; }
  .now-card .mini-steps li.current .long { display: inline; }
  .now-card .mini-steps li.current .short { display: none; }
  .now-card .now-body { gap: 14px 16px; }
  .now-card .now-main { flex-basis: 100%; }
  .now-card .now-meter { flex: 1 1 140px; }
  .now-card .now-counts { flex-wrap: wrap; }
  .now-card .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .now-card .checklist li { min-width: 0; min-height: 0; padding: 6px 8px; gap: 6px; }
  .now-card .checklist .ck-mark { width: 16px; height: 16px; }
  .now-card .checklist .ck-name { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .now-card .checklist li .btn.sm { min-height: 24px; padding: 2px 6px; font-size: 10px; }
  /* tabs side: club cards a bit narrower so three still fit */
  .admin-page .club-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* Rezultati: import shown openly under the submissions */
.import-section { margin-top: 22px; }
.import-section .section-title small { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ── Nova liga ── */
.new-league { display: flex; flex-direction: column; gap: 22px; }
.new-league .nl-sec .section-title { margin-bottom: 10px; }
.new-league .section-title small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.new-league .nl-name { max-width: 360px; margin-bottom: 12px; }
.nl-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; }
.new-league .nl-rules label { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; font-weight: 500;
  color: var(--text); text-transform: none; letter-spacing: 0; }
.nl-rules input { width: 64px; text-align: center; padding: 8px 6px; }
.nl-rules b { font-weight: 600; color: var(--muted); }
.nl-rules i { font-style: normal; color: var(--muted); margin: 0 4px; }
.new-league .switch { flex-direction: row; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); }
.new-league .switch b { font-size: 14px; }
.new-league .switch small { font-size: 12px; font-weight: 400; }
.new-league .form-actions { margin-top: 0; }
.pm-fixed { display: block; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 8px;
  font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
@media (max-width: 640px) {
  .new-league .plan-months { grid-template-columns: 1fr; }
  .new-league .pm { flex-direction: row; align-items: center; justify-content: space-between; }
  .new-league .pm select { width: 62%; }
  .new-league .form-actions .btn { width: 100%; }
  .nl-rules i { display: none; }
  .nl-rules { gap: 10px; }
}
/* the live preview of a new league is a PC thing – on a phone the form alone is enough */
@media (max-width: 999px) { .new-preview { display: none; } }
@media (min-width: 1000px) { .tab-panel > .new-league { max-width: none; } }
.new-preview .now-body p { margin: 0; }

/* Lestvica: the seasons (active + past leagues) sit inside the league table card */
.standings-card .league-picker {
  margin: -4px 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--line);
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.standings-card .league-picker::-webkit-scrollbar { display: none; }
.standings-card .picker-chips { flex-wrap: nowrap; }
.standings-card .chip { white-space: nowrap; }
.standings-card .picker-note { flex: none; white-space: nowrap; }
@media (max-width: 640px) {
  .standings-card .league-picker { flex-wrap: wrap; }
  .standings-card .picker-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .standings-card .picker-note { white-space: normal; }
}
.standings-card .chip.active { cursor: default; }

/* start page: after the league the invite takes the place of the code card, results full width below */
.league-actions .invite {
  margin: 0; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  border: 1.5px solid var(--green-dark);
}
/* PC: the full-width code card puts its title left and the code field right, on one line */
@media (min-width: 900px) {
  .league-actions.single .code-entry { flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
  .league-actions.single .code-entry .code-row { flex: 0 1 480px; }
  .league-actions.single .code-entry .form-error { flex-basis: 100%; margin: 0; }
}

/* start page: nothing open → a short message with our contacts (full width, above the results button) */
.contact-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
  padding: 18px 20px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.ct-msg { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.ct-msg strong { font-size: 16px; }
.ct-msg small { font-size: 13px; color: var(--muted); }
.ct-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 8px 22px; font-size: 14px; }
.ct-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ct-list svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--green-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-list a { color: var(--text); font-weight: 600; text-decoration: none; }
.ct-list a:hover { text-decoration: underline; }
@media (max-width: 640px) { .ct-list { grid-template-columns: 1fr; } }
/* a timeline without a league: just grey points */
.roadmap.empty strong { color: var(--muted); }

/* calculator · results: a bit more air, the title row carries the "← Vnos" button */
.results-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--line);
}
.results-head h2 { margin: 0 0 4px; }
.results-head p { margin: 0; }
#results .results-table th, #results .results-table td { padding-top: 14px; padding-bottom: 14px; }
#results .results-table th:first-child, #results .results-table td:first-child { padding-left: 22px; }
#results .results-table th:last-child, #results .results-table td:last-child { padding-right: 22px; }
@media print { #edit-scores { display: none !important; } }
.results-head { flex-wrap: nowrap; }
.results-head > div { min-width: 0; }
#edit-scores { flex: none; }
@media (max-width: 640px) { .results-head { padding: 16px 16px 14px; } #edit-scores { padding: 8px 12px; font-size: 12px; } }

/* ── calculator · results: save first (league), then the table, exports at its foot ── */
.results-screen { display: flex; flex-direction: column; gap: 12px; }
.results-screen[hidden] { display: none; }
.results-card { display: flex; flex-direction: column; }
.results-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--line); background: var(--tile);
}
.results-foot > span { margin-right: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; font-size: 11px; }

/* the save card: green and big while the results still have to be sent, calm once they are in */
.save-banner {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px;
  background: var(--green-soft); border: 2px solid var(--green-dark);
}
.save-banner .sb-icon {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-dark); color: #fff; font-size: 22px; font-weight: 800;
}
.save-banner .sb-icon::before { content: "!"; }
.save-banner.saved .sb-icon::before { content: "✓"; }
.save-banner .league-save-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sb-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--green-text); }
.save-banner h2 { margin: 0; font-size: 19px; font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--text); }
.save-banner p { margin: 0; font-size: 13px; color: var(--muted); }
.save-banner p a { color: var(--green-text); font-weight: 700; }
.sb-btn {
  flex: none; min-width: 220px; padding: 15px 22px; font-size: 15px;
  background: var(--green-dark); border-color: var(--green-dark); color: #fff;
  box-shadow: 0 4px 14px rgba(5, 150, 105, .35);
}
.sb-btn:hover { background: #047857; border-color: #047857; }
.save-banner:not(.saved) { animation: sb-pulse 2.4s ease-in-out 3; }
@keyframes sb-pulse { 50% { box-shadow: 0 0 0 6px rgba(5, 150, 105, .18); } }
.save-banner.saved { background: var(--card); border-width: 1px; border-color: #a7f3d0; }

/* PC: the results window fills the height; the table scrolls inside, exports stay at the bottom */
@media (min-width: 861px) {
  .results-card { flex: 1; min-height: 0; }
  .results-card .table-wrap { flex: 1; overflow: auto; }
  .results-card .results-foot { margin-top: auto; }
}
@media (max-width: 640px) {
  .save-banner { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .save-banner .sb-icon { width: 38px; height: 38px; font-size: 18px; }
  .save-banner h2 { font-size: 17px; }
  .sb-btn { width: 100%; min-width: 0; }
  .results-foot { padding: 12px 16px; }
}
@media print { .save-banner, .results-foot, #edit-scores { display: none !important; } }

/* ── calculator · Priprava: one column – step card with the start button, then the players ── */
.setup-screen { display: flex; flex-direction: column; gap: 12px; }
.setup-screen[hidden] { display: none; }
.resume-banner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 2px solid var(--text); }
.resume-banner .banner-actions { flex: 0 1 320px; }

.step-banner {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px;
  border: 1px solid var(--line);
}
.step-banner .sb-num {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-size: 22px; font-weight: 800;
}
.step-banner .sb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.step-banner .sb-kicker { color: var(--muted); }
.step-banner h2 { margin: 0; font-size: 19px; font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--text); }
.sb-format { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sb-format .format { margin: 6px 0 0; }
.sb-format p { margin: 0; }
.step-banner .sb-btn:disabled { background: #c7c7cc; border-color: #c7c7cc; box-shadow: none; color: #fff; }

/* PC: the players window fills the rest of the height */
@media (min-width: 861px) {
  .players-card { flex: 1; min-height: 0; overflow: auto; }
}

/* players: light rows with a round check – selected = green, easy to see and to tap */
.player-list { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.player-toggle {
  min-height: 48px; background: var(--card); border: 1.5px solid var(--line); font-weight: 600; font-size: 14px;
  transition: background .12s, border-color .12s;
}
.player-toggle::before {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c7c7cc; background: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff;
}
.player-toggle:hover { border-color: var(--text); }
.player-toggle[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green-dark); color: var(--text); }
.player-toggle[aria-pressed="true"]::before { content: "✓"; background: var(--green-dark); border-color: var(--green-dark); box-shadow: none; }
.player-del { background: var(--card); border-width: 1.5px; }

@media (max-width: 640px) {
  .step-banner { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .step-banner .sb-num { width: 38px; height: 38px; font-size: 18px; }
  .step-banner h2 { font-size: 17px; }
  .step-banner .sb-btn { width: 100%; min-width: 0; }
  /* phone: two players per row, compact, names may wrap */
  .player-list { grid-template-columns: 1fr 1fr; gap: 6px; }
  .player-toggle { min-height: 44px; padding: 8px 10px; gap: 8px; font-size: 13px; line-height: 1.25; }
  .player-toggle::before { width: 20px; height: 20px; font-size: 12px; }
  .resume-banner .banner-actions { flex-basis: 100%; }
}
/* phone: the start button is pinned to the bottom, so it is there after scrolling through the players */
@media (max-width: 860px) {
  #setup .step-banner .sb-btn {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 10; width: auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  }
}
/* Vnos: the main button is green like the other steps' main buttons */
#finish { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
#finish:hover { background: #047857; border-color: #047857; }

/* Vnos: card foot with Prejšnji · Počisti rezultate · Naslednji */
.score-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 22px; border-top: 1px solid var(--line); background: var(--tile);
}
.score-foot .btn:disabled { opacity: .45; }
@media (min-width: 861px) {
  .score-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .score-card .card-body { flex: 1; overflow: auto; }
}
@media (max-width: 640px) {
  .score-foot { padding: 12px; gap: 6px; }
  .score-foot .btn { flex: 1; padding-left: 8px; padding-right: 8px; font-size: 12px; }
}

/* ── Vnos: live ranking across the top ── */
.score-screen { display: flex; flex-direction: column; gap: 12px; }
.score-screen[hidden] { display: none; }
.live-card { display: flex; align-items: center; gap: 20px; padding: 14px 18px; }
.lc-head { flex: none; width: 190px; }
.lc-head h2 { margin: 0 0 8px; padding: 0; border: 0; }
.lc-head .progress { margin: 0; }
.live-chips {
  flex: 1; min-width: 0; margin: 0; padding: 2px 0; list-style: none; counter-reset: r;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin;
}
.live-chips li {
  counter-increment: r; flex: none; display: flex; align-items: baseline; gap: 6px;
  padding: 7px 12px; border-radius: 999px; background: var(--tile); border: 1px solid var(--line); font-size: 13px;
}
.live-chips li::before { content: counter(r) "."; color: var(--muted); font-weight: 700; font-size: 12px; }
.live-chips li:first-child { background: #fef9c3; border-color: #fde047; }
.live-chips b { font-weight: 600; }
.live-chips span { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); font-size: 12px; }
.live-card .actionbar { flex: none; flex-direction: row-reverse; gap: 8px; padding: 0; }
.live-card .actionbar .btn { width: auto; }
.live-card #finish { padding: 12px 22px; font-size: 14px; }
@media (max-width: 860px) {
  .live-card { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .lc-head { width: 100%; display: flex; align-items: center; gap: 12px; }
  .lc-head h2 { margin: 0; white-space: nowrap; }
  .lc-head .progress { flex: 1; }
  .live-chips { flex-basis: 100%; }
  /* phone: the two buttons stay pinned to the bottom of the screen (rule for #score .actionbar) */
  #score .live-card .actionbar { background: var(--card); }
}
@media (min-width: 861px) { .live-card .actionbar { position: static; box-shadow: none; } }
.lc-head h2 { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }

/* start page: sign-ups in the same green card as the code entry */
.signup-entry .ce-label { display: flex; flex-direction: column; gap: 2px; }
.signup-entry .ce-label strong { font-size: 16px; font-weight: 700; color: #fff; }
.signup-entry .ce-label small { font-size: 13px; color: #d1fae5; }
.signup-entry .btn.go { align-self: stretch; text-align: center; text-decoration: none; }
@media (min-width: 900px) {
  .league-actions.single .signup-entry { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .signup-entry .btn.go { align-self: auto; min-width: 220px; padding: 14px 22px; }
}

/* ── Prijava v ligo: one column, three numbered steps, the send button at the foot ── */
.signup-page { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 920px; margin: 0 auto; }
body:has(.signup-page) .page { height: auto; min-height: 100vh; }
.su-head h1 { margin: 0; font-size: 22px; font-weight: 800; }
.su-head .su-icon { background: var(--green-dark); }
.su-head .su-icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.su-head .sb-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.su-open { color: var(--green-text) !important; display: inline-flex; align-items: center; gap: 6px; }
.su-open i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.su-fee { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 10px 16px; border-radius: 10px; background: var(--green-soft); border: 1px solid #a7f3d0; }
.su-fee span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--green-text); }
.su-fee strong { font-size: 17px; }

.su-card { padding: 0; overflow: hidden; }
.signup-form.su-card { max-width: none; gap: 0; flex: none; }
.su-sec { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.su-card > .su-step, .su-card > .pay-details { margin: 20px 22px; }
.su-step { display: flex; align-items: center; gap: 12px; }
.su-step h2 { margin: 0; padding: 0; border: 0; font-size: 16px; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: 0; }
.su-step h2 small { font-weight: 500; font-size: 13px; }
.su-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 800;
}
.su-sec .form-hint { margin: -4px 0 0; }
.signup-form .su-sec .shooters { flex: none; padding: 0; background: none; border: 0; gap: 10px; }
.signup-form .su-sec #shooter-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 14px;
  padding-left: 22px; overflow: visible; max-height: none;
}
.signup-form .su-sec #shooter-list input { background: var(--card); }
.su-sec #add-shooter { align-self: flex-start; min-width: 0; }
.su-pay { padding: 14px 16px; border-radius: 10px; background: var(--tile); border: 1px solid var(--line); }
.su-foot {
  display: flex; align-items: flex-end; gap: 14px; padding: 18px 22px; background: var(--tile);
}
.su-notefield { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.su-foot .sb-btn { min-width: 240px; }
.su-done .btn { flex: none; }
@media (max-width: 640px) {
  .su-head { flex-wrap: wrap; }
  .su-head h1 { font-size: 18px; }
  .su-fee { flex-direction: row; align-items: baseline; gap: 8px; width: 100%; }
  .su-sec, .su-foot { padding: 16px; }
  .su-foot { flex-direction: column; align-items: stretch; }
  .su-foot .sb-btn { width: 100%; min-width: 0; }
  .signup-form .su-sec #shooter-list { grid-template-columns: 1fr; }
  .su-done { flex-wrap: wrap; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* sign-up on PC: the whole width – form left, payment with the QR code right, send button below */
.signup-page { max-width: none; }
.su-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 12px; align-items: stretch; }
.su-layout .su-foot { grid-column: 1 / -1; border-radius: 12px; }
.su-form-main .su-sec:last-of-type { border-bottom: 0; }
.su-side .su-sec { border-bottom: 0; }
.su-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border-radius: 12px; border: 2px solid var(--green-dark); background: #fff; }
.su-qr img { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.su-qr figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.su-qr figcaption b { font-size: 16px; }
.su-qr figcaption span { font-size: 12px; color: var(--muted); }
.su-pay-wrap { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.su-pay-wrap .su-pay { flex: 1 1 280px; }
@media (max-width: 1000px) { .su-layout { grid-template-columns: 1fr; } }
.signup-form.su-layout { max-width: none; flex: none; }

/* sign-up: the price of this sign-up right under the shooters */
.su-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 10px; background: var(--green-soft); border: 1px solid #a7f3d0;
}
.su-total span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--green-text); }
.su-total b { font-size: 18px; font-variant-numeric: tabular-nums; }
@media (min-width: 1001px) { .su-layout { grid-template-columns: minmax(0, 1fr) 420px; } }
/* the fee is the foot of the shooters card */
.su-form-main { display: flex; flex-direction: column; }
.su-form-main > .su-total {
  margin-top: auto; border-radius: 0; border: 0; border-top: 1px solid var(--line);
  background: var(--tile); padding: 16px 22px;
}
.su-form-main > .su-total b { font-size: 20px; }
@media (max-width: 640px) { .su-form-main > .su-total { padding: 14px 16px; } }
@media (max-width: 640px) { .su-foot .su-total { flex-direction: row; align-items: baseline; justify-content: space-between; } .su-foot .sb-btn { align-self: stretch; } }
/* PC: the QR code shrinks with a lower window, so the whole sign-up fits one screen */
@media (min-width: 1001px) { .su-side .su-qr img { width: clamp(180px, calc(100vh - 690px), 320px); } }