/* =========================================================
   Badminton vyúčtování — Opava
   Compact dashboard, sticky result panel, mobile first.

   This file consolidates what had grown into many stacked
   "vN" patches (each redefining the same selectors, several
   media queries repeating the same breakpoint with different,
   conflicting values). Every class name is unchanged so the
   markup app.js generates still matches — only the values
   behind them have been unified onto one consistent scale.
   ========================================================= */

:root {
  /* ---- Color ---- */
  --bg: #eef2ed;
  --bg-2: #f8faf6;
  --ink: #0f1f1a;
  --muted: #617069;
  --green: #0c3b2e;
  --green-2: #145440;
  --green-3: #1f7a5b;
  --mint: #dff1e8;
  --orange: #ff7a3d;
  --orange-2: #d95b26;
  --lime: #b7f04b;
  --lime-soft: rgba(183, 240, 75, .22);
  --cream: #fff7df;
  --card: rgba(255, 255, 255, .90);
  --card-solid: #ffffff;
  --line: #d8e0db;
  --line-strong: #bfd0c7;
  --danger: #b42318;
  --shadow: 0 18px 50px rgba(15, 31, 26, .10);
  --shadow-soft: 0 8px 24px rgba(15, 31, 26, .07);
  --shadow-pop: 0 20px 48px rgba(8, 39, 31, .14);

  /* ---- Scale: spacing (4px grid) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;

  /* ---- Scale: radius ---- */
  --radius-2xl: 28px;   /* hero */
  --radius-xl: 20px;    /* cards */
  --radius-lg: 16px;    /* qr card, history item */
  --radius-md: 14px;    /* rows, inline panels */
  --radius-sm: 12px;    /* inputs, small chips */
  --radius-pill: 999px; /* buttons, tags */

  /* ---- Scale: control sizing ---- */
  --h-control: 44px;    /* inputs, selects, default buttons */
  --h-control-sm: 38px; /* compact/secondary buttons & selects */
  --h-control-xs: 28px; /* icon-only chip controls */

  --page-width: 1180px;

  --font-display: "Oswald", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  width: 100%;
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg);
}

body.badminton-theme {
  background:
    radial-gradient(circle at 11% 9%, rgba(183, 240, 75, .16), transparent 22rem),
    radial-gradient(circle at 87% 8%, rgba(255, 122, 61, .16), transparent 25rem),
    linear-gradient(135deg, var(--bg-2) 0%, #eef4e8 44%, var(--bg) 100%);
}

/* Faint grid, kept behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: .35;
  background-image:
    linear-gradient(rgba(12, 59, 46, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 59, 46, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 0%, black, transparent 78%);
  pointer-events: none;
}

/* Large, low-contrast badminton court outline centered behind the page */
body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(1080px, calc(100vw - 42px));
  height: min(860px, calc(100vh - 70px));
  transform: translate(-50%, -50%);
  opacity: .28;
  pointer-events: none;
  border: 2px solid rgba(12, 59, 46, .16);
  border-radius: var(--radius-2xl);
  background:
    repeating-linear-gradient(90deg, rgba(12, 59, 46, .14) 0 1px, transparent 1px 13px) 50% 50% / 100% 18px no-repeat,
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(12, 59, 46, .22) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(31% - 1px), rgba(12, 59, 46, .16) calc(31% - 1px) calc(31% + 1px), transparent calc(31% + 1px) calc(69% - 1px), rgba(12, 59, 46, .16) calc(69% - 1px) calc(69% + 1px), transparent calc(69% + 1px)),
    linear-gradient(0deg, transparent calc(12% - 1px), rgba(12, 59, 46, .10) calc(12% - 1px) calc(12% + 1px), transparent calc(12% + 1px) calc(88% - 1px), rgba(12, 59, 46, .10) calc(88% - 1px) calc(88% + 1px), transparent calc(88% + 1px)),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(12, 59, 46, .16) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(90deg, transparent calc(13% - 1px), rgba(12, 59, 46, .10) calc(13% - 1px) calc(13% + 1px), transparent calc(13% + 1px) calc(87% - 1px), rgba(12, 59, 46, .10) calc(87% - 1px) calc(87% + 1px), transparent calc(87% + 1px)),
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  box-shadow:
    inset 0 0 0 18px rgba(255, 255, 255, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .20);
}

.page {
  position: relative;
  z-index: 1;
  width: min(var(--page-width), calc(100% - var(--sp-7)));
  max-width: calc(100vw - var(--sp-6));
  margin: 0 auto;
  padding: var(--sp-6) 0 var(--sp-9);
  animation: pageEnter .4s var(--ease-out) both;
}

h1, h2, h3, p { margin: 0; }

.muted, .hint { color: var(--muted); }

.hint {
  margin-top: var(--sp-3);
  font-size: .9rem;
  line-height: 1.55;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px auto;
  align-items: center;
  gap: var(--sp-5);
  min-height: 210px;
  margin-bottom: var(--sp-6);
  padding: var(--sp-7);
  color: white;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  background:
    linear-gradient(135deg, rgba(8, 39, 31, .98), rgba(19, 80, 60, .94)),
    radial-gradient(circle at 82% 26%, rgba(183, 240, 75, .20), transparent 16rem),
    linear-gradient(45deg, transparent 0 48%, rgba(255, 255, 255, .12) 48% 50%, transparent 50% 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-xl);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -88px;
  top: -72px;
  width: 300px;
  height: 300px;
  border: 22px solid rgba(183, 240, 75, .10);
  border-radius: 50%;
}

.hero-text, .hero-visual, .hero-actions { position: relative; z-index: 1; }
.hero-text { max-width: 650px; }
.hero-actions { display: flex; align-items: center; gap: var(--sp-2); }

.eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-2);
  color: #ffd8c4;
  font-family: var(--font-mono);
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(183, 240, 75, .14);
}

h1 {
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.hero .muted {
  max-width: 56ch;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(.98rem, 1.6vw, 1.12rem);
  line-height: 1.55;
}

/* Small animated court illustration */
.hero-visual {
  width: 210px;
  height: 150px;
  display: grid;
  place-items: center;
}

.court-card {
  position: relative;
  width: 178px;
  height: 128px;
  border-radius: var(--radius-lg);
  border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .26), inset 0 0 0 8px rgba(255, 255, 255, .05);
  transform: perspective(520px) rotateX(58deg) rotateZ(-7deg);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--court-line, rgba(255,255,255,.74)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent 19%, var(--court-line, rgba(255,255,255,.74)) 19% 21%, transparent 21% 79%, var(--court-line, rgba(255,255,255,.74)) 79% 81%, transparent 81%),
    linear-gradient(90deg, transparent 18%, var(--court-line, rgba(255,255,255,.74)) 18% 20%, transparent 20% 80%, var(--court-line, rgba(255,255,255,.74)) 80% 82%, transparent 82%),
    linear-gradient(135deg, rgba(31, 122, 91, .96), rgba(9, 44, 35, .98));
}

.court-net, .court-line { position: absolute; pointer-events: none; }

.court-net {
  left: 50%;
  top: -16px;
  width: 2px;
  height: 160px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .92), rgba(255, 255, 255, .92) 5px, rgba(255, 255, 255, .25) 5px, rgba(255, 255, 255, .25) 9px);
  box-shadow: 0 0 16px rgba(255, 255, 255, .18);
}

.court-line-a, .court-line-b {
  left: 16px;
  right: 16px;
  height: 1px;
  background: rgba(255, 255, 255, .45);
}
.court-line-a { top: 41%; }
.court-line-b { top: 59%; }

.shuttle-mark {
  position: absolute;
  right: 18px;
  top: -19px;
  width: 43px;
  height: 43px;
  border-radius: 50% 50% 50% 6px;
  background: var(--cream);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .26);
  transform: rotate(-18deg);
}

.shuttle-mark::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -8px;
  width: 17px;
  height: 13px;
  border-radius: 0 0 12px 12px;
  background: var(--orange);
}

.shuttle-mark span {
  position: absolute;
  top: 7px;
  width: 2px;
  height: 25px;
  background: rgba(12, 59, 46, .38);
  transform-origin: bottom;
}
.shuttle-mark span:nth-child(1) { left: 13px; transform: rotate(-21deg); }
.shuttle-mark span:nth-child(2) { left: 21px; transform: rotate(0deg); }
.shuttle-mark span:nth-child(3) { left: 29px; transform: rotate(21deg); }

/* ---------- Layout ---------- */
.app-layout {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-5);
}

.main-column, .side-column {
  display: grid;
  min-width: 0;
  gap: var(--sp-5);
}

.side-column { position: sticky; top: var(--sp-5); }

/* ---------- Cards ---------- */
.card {
  position: relative;
  min-width: 0;
  padding: var(--sp-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), var(--card));
  border: 1px solid rgba(12, 59, 46, .12);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .80);
  transition: box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(183, 240, 75, .30), rgba(255, 122, 61, .18), rgba(31, 122, 91, .20));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .5;
  pointer-events: none;
}

.result-card { overflow: hidden; }
.result-card::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 240, 75, .18), transparent 68%);
  pointer-events: none;
}

.history-card { align-self: start; }

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.compact-title { margin-bottom: var(--sp-3); }

h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--green);
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.settings h2, .groups h2, .payment h2 { grid-column: 1 / -1; }

.tag {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  color: white;
  background: var(--green-3);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 6px 14px rgba(31, 122, 91, .20);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
}

.tag.score {
  width: auto;
  padding: 0 var(--sp-3);
  background: var(--orange);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 6px 14px rgba(217, 91, 38, .20);
}

/* ---------- Buttons ---------- */
button {
  min-height: var(--h-control);
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--radius-pill);
  color: white;
  background: linear-gradient(135deg, var(--green), var(--green-3));
  box-shadow: 0 7px 16px rgba(12, 59, 46, .18);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: box-shadow .12s ease, filter .12s ease;
}
button:hover { box-shadow: 0 10px 22px rgba(12, 59, 46, .22); }
button:active { box-shadow: 0 4px 12px rgba(12, 59, 46, .16); }

button.secondary { background: linear-gradient(135deg, #23352f, #485953); }

button.ghost {
  color: white;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: none;
}
button.ghost:hover { background: rgba(255, 255, 255, .18); }

button.ghost-light {
  color: var(--green);
  background: #f6faf7;
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
button.ghost-light:hover { background: #edf6f0; }

button.small {
  min-height: var(--h-control-sm);
  padding: 0 var(--sp-3);
  font-size: .84rem;
}

button.remove {
  color: var(--danger);
  background: #fff7f6;
  border: 1px solid #f1c4be;
  box-shadow: none;
}
button.remove:hover { background: #ffefed; }

/* Icon-only remove buttons (booking row / player row) share one square size */
.row .remove.icon-remove,
.player-row .player-remove {
  width: var(--h-control);
  min-width: var(--h-control);
  height: var(--h-control);
  min-height: var(--h-control);
  padding: 0;
  border-radius: var(--radius-sm);
  display: inline-grid;
  place-items: center;
}
.row .remove.icon-remove svg,
.player-row .player-remove svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ---------- Forms ---------- */
label {
  display: grid;
  gap: var(--sp-1);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

input, select {
  width: 100%;
  min-height: var(--h-control);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-family: var(--font-mono);
  font-size: .95rem;
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out);
}
select { font-family: var(--font-body); font-weight: 600; }
input::placeholder { color: #98a49e; }

input:hover, select:hover { border-color: rgba(31, 122, 91, .45); }

input:focus, select:focus, button:focus-visible {
  outline: 3px solid rgba(255, 122, 61, .28);
  border-color: var(--orange);
  background: #fffef8;
}

.time-input { font-variant-numeric: tabular-nums; }

/* Booking row */
.row {
  display: grid;
  grid-template-columns: minmax(150px, 1.35fr) minmax(82px, .68fr) minmax(82px, .68fr) minmax(88px, .64fr) auto;
  gap: var(--sp-3);
  align-items: end;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  padding: var(--sp-4);
  background: linear-gradient(90deg, rgba(183, 240, 75, .08), transparent 22%), #fff;
  border: 1px solid rgba(12, 59, 46, .14);
  border-radius: var(--radius-md);
  box-shadow: inset 4px 0 0 var(--green-3), 0 6px 18px rgba(15, 31, 26, .04);
}

/* Two-column settings-style sections */
.groups, .settings, .payment {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: var(--sp-4);
}
.wide { grid-column: 1 / -1; }

/* ---------- Player rows ---------- */
.players-list { display: grid; gap: var(--sp-2); }

.player-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, auto);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(90deg, rgba(31, 122, 91, .06), transparent 28%), #fff;
  border: 1px solid rgba(12, 59, 46, .14);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 16px rgba(15, 31, 26, .04);
}

.player-row strong {
  min-width: 0;
  color: var(--ink);
  font-weight: 800;
}
.player-row strong::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(183, 240, 75, .16);
}

.player-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  width: 100%;
  margin-left: auto;
}
.player-actions .player-remove { flex: 0 0 var(--h-control); }

.check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-3);
  background: #f7faf4;
  border: 1px solid rgba(31, 122, 91, .12);
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out);
}
.check-label:hover { background: #f0f8ea; border-color: rgba(31, 122, 91, .28); }
.check-label:has(input:checked) { color: var(--green); background: var(--mint); border-color: rgba(31, 122, 91, .25); }

.check-label input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--green-3);
}

/* Player presets */
.player-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.player-preset.is-selected {
  color: white;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
}

/* ---------- Summary / scorebar ---------- */
.scorebar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.score-item {
  position: relative;
  overflow: hidden;
  padding: var(--sp-4);
  background: linear-gradient(180deg, #ffffff, #f8fbf5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 20px rgba(15, 31, 26, .05);
}
.score-item::after {
  content: "";
  position: absolute;
  right: -22px;
  top: -22px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(31, 122, 91, .07);
}
.score-label {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.score-value {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--green);
  font-family: var(--font-display);
  font-size: 1.58rem;
  font-weight: 700;
  line-height: 1;
}
.score-item.due {
  background:
    radial-gradient(circle at 92% 14%, rgba(183, 240, 75, .32), transparent 46%),
    linear-gradient(135deg, var(--green), var(--green-3));
  border-color: transparent;
  box-shadow: 0 14px 32px rgba(12, 59, 46, .20);
}
.score-item.due .score-label { color: rgba(255, 255, 255, .72); }
.score-item.due .score-value { color: white; }

.share-actions { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.share-actions button { width: 100%; }

/* ---------- Result groups / lines ---------- */
.warnings:empty, #calculationDetail:empty { display: none; }

.result-groups { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }

.result-line {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(31, 122, 91, .13);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(15, 31, 26, .045);
  transition: box-shadow .16s var(--ease-out), border-color .16s var(--ease-out);
}
.result-line:hover { border-color: rgba(31, 122, 91, .28); box-shadow: 0 10px 24px rgba(15, 31, 26, .07); }

.result-line-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  background: linear-gradient(90deg, rgba(183, 240, 75, .10), transparent 34%);
}

.result-line-title h3 {
  margin-bottom: 3px;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.25;
}
.result-line-title h3::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 16px;
  margin-right: var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--orange);
  vertical-align: -2px;
}
.result-line.is-free .result-line-title h3::before { background: var(--green-3); }

.result-line-title span,
.result-line-price span,
.result-line-meta em {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  font-style: normal;
}

.result-line-price { text-align: right; white-space: nowrap; }
.result-line-price strong {
  display: block;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.15;
}
.result-line.is-free .result-line-price strong {
  font-family: var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.result-line-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
}
.result-line-meta > span {
  flex: 1 1 92px;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  background: #f7f8f5;
  border: 1px solid #eef0eb;
  border-radius: var(--radius-sm);
}
.result-line-meta b {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .86rem;
  font-weight: 800;
  white-space: nowrap;
}
.result-line-meta .result-line-total { background: #fbf8f2; border-color: #ebe2d2; }
.result-line-meta .result-line-total b { color: var(--green); }
.result-line-meta .free-badge {
  display: grid;
  place-items: center;
  flex: 1 1 100%;
  padding: var(--sp-3);
  color: var(--green);
  background: linear-gradient(135deg, rgba(183, 240, 75, .34), rgba(223, 241, 232, .94));
  border-color: rgba(31, 122, 91, .18);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.empty-result {
  padding: var(--sp-3) var(--sp-4);
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.empty-result.compact { padding: var(--sp-2) var(--sp-3); }

/* ---------- QR cards ---------- */
.qr-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }

.qr-card {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 64%, #f1f8ec 100%);
  border: 1px solid rgba(31, 122, 91, .15);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px rgba(15, 31, 26, .06);
  transition: box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}
.qr-card:hover { border-color: rgba(31, 122, 91, .30); box-shadow: 0 14px 34px rgba(15, 31, 26, .10); }
.qr-card::after {
  content: "QR";
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  padding: 4px 7px;
  color: var(--green);
  background: var(--lime-soft);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.qr-card h3 {
  grid-column: 2;
  padding-right: 42px;
  color: var(--green);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}
.qr-card img {
  grid-row: 1 / span 2;
  width: 128px;
  height: 128px;
  display: block;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.qr-card code { display: none; }

.qr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); align-self: end; }
.qr-actions button { flex: 1 1 150px; min-height: var(--h-control-sm); }

.qr-bulk-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-bottom: var(--sp-3); }
.qr-bulk-actions button { width: auto; min-height: var(--h-control-sm); padding: 0 var(--sp-4); }

.qr-warning { margin-top: var(--sp-3); color: var(--muted); font-size: .92rem; }
.qr-members { margin: -4px 0 var(--sp-3); color: var(--muted); font-size: .92rem; line-height: 1.35; }

/* Compact QR used inline in history / payment result */
.inline-qr-card, .history-qr-card {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3);
}
.inline-qr-card { grid-template-columns: 132px minmax(0, 1fr); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid rgba(20, 32, 26, .1); }
.inline-qr-card img { width: 132px; height: 132px; border-radius: var(--radius-sm); background: #fff; }
.inline-qr-card .qr-actions { justify-content: flex-start; }
.history-qr-card img { width: 96px; height: 96px; }
.history-qr-card h3 { font-size: .9rem; }

/* ---------- Warnings / calculation detail ---------- */
.warning-box {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  color: #7a2e14;
  background: linear-gradient(135deg, #fff7ef, #fffdf8);
  border: 1px solid rgba(255, 122, 61, .26);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(217, 91, 38, .07);
}
.warning-box strong {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--orange-2);
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.warning-box strong::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: var(--sp-2);
  border-radius: var(--radius-pill);
  color: white;
  background: var(--orange);
  font-family: var(--font-mono);
  font-size: .78rem;
}
.warning-box p { margin-top: var(--sp-1); font-size: .88rem; line-height: 1.45; }

.calc-detail {
  margin-top: var(--sp-3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.calc-detail[open] { box-shadow: 0 10px 24px rgba(15, 31, 26, .06); }
.calc-detail summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--green);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(90deg, rgba(183, 240, 75, .10), transparent 46%);
}
.calc-detail summary::-webkit-details-marker { display: none; }
.calc-detail summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  color: white;
  background: var(--green-3);
  font-family: var(--font-mono);
  transition: transform .22s var(--ease-out);
}
.calc-detail summary:hover::after { box-shadow: 0 8px 18px rgba(31, 122, 91, .22); }
.calc-detail[open] summary::after { content: "−"; transform: rotate(180deg); }
.calc-detail-body {
  padding: 0 var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--line);
  transform-origin: top;
  animation: detailOpen .22s var(--ease-out) both;
}
.calc-detail h3 {
  margin: var(--sp-4) 0 var(--sp-2);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.calc-detail ul { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.calc-detail li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: #f8faf7;
  border: 1px solid #eef0eb;
  border-radius: var(--radius-sm);
}
.calc-detail li span { min-width: 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.calc-detail li strong { color: var(--green); font-family: var(--font-mono); font-size: .86rem; white-space: nowrap; }

/* ---------- History ---------- */
.history-list { display: grid; gap: var(--sp-3); }

.history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: linear-gradient(90deg, rgba(31, 122, 91, .06), transparent 34%), #fff;
  border: 1px solid rgba(31, 122, 91, .13);
  border-radius: var(--radius-lg);
  transition: box-shadow .16s var(--ease-out), border-color .16s var(--ease-out);
}
.history-item:hover { border-color: rgba(31, 122, 91, .28); box-shadow: 0 10px 24px rgba(15, 31, 26, .07); }

.history-main { min-width: 0; }
.history-item h3 { margin-bottom: var(--sp-1); color: var(--green); font-size: .96rem; font-weight: 800; }
.history-item p { margin-top: 3px; color: var(--muted); font-size: .82rem; line-height: 1.35; }

.history-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.history-actions button { min-height: var(--h-control-sm); white-space: nowrap; }
.history-actions .remove { min-height: var(--h-control-sm); }
.history-actions button[aria-expanded="true"] {
  color: white;
  background: linear-gradient(135deg, var(--green), var(--green-3));
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(12, 59, 46, .18);
}

.history-qr-slot { grid-column: 1 / -1; transform-origin: top; }
.history-qr-slot:empty { display: none; }
.history-qr-slot.is-open { display: block; }
.history-qr-panel {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  animation: qrPanelIn .26s var(--ease-out) both;
}

/* ---------- Payment groups ---------- */
.payment-groups-manager {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.payment-groups-manager h3 { font-size: 1rem; }

.payment-group-add { display: flex; align-items: center; gap: var(--sp-2); }
.payment-group-add input { flex: 1; min-width: 0; }
.payment-group-add button { width: auto; white-space: nowrap; }

.payment-groups-list { display: grid; gap: var(--sp-2); }

.payment-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.payment-group-row label { display: grid; gap: var(--sp-1); color: var(--muted); font-size: .78rem; font-weight: 700; }
.payment-group-row input { min-height: var(--h-control-sm); }
.payment-group-row button[disabled] { cursor: not-allowed; opacity: .45; }
.payment-group-members { align-self: center; color: var(--muted); font-weight: 700; white-space: nowrap; }

.payment-group-label { display: grid; gap: var(--sp-1); min-width: 150px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.payment-group-label select { min-height: var(--h-control-sm); padding: 0 34px 0 var(--sp-3); border-radius: var(--radius-pill); font-size: .9rem; }

.payment-assignments, .payment-group-preview { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.payment-assignments h4, .payment-group-preview h4 { font-size: .95rem; }

.payment-assignment-row, .payment-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(20, 32, 26, .12);
  border-radius: var(--radius-sm);
}
.payment-assignment-row > div, .payment-preview-row > div { display: grid; gap: 2px; min-width: 0; }
.payment-assignment-row span, .payment-preview-row span { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.payment-assignment-row label { min-width: 150px; }
.payment-assignment-row select { width: 100%; }

/* Each group card in the final overview: one padded, self-contained
   module (header → rename → members → QR) with real breathing room
   between the parts, instead of controls butting up against the edges. */
.payment-result-line {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4);
}

.final-payment-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.final-payment-header h3 { margin-bottom: var(--sp-1); }

/* Group name: a compact inline-edit field sized to its content,
   not a form input stretched across the whole card. */
.payment-line-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.payment-group-name-input {
  flex: 0 1 260px;
  min-width: 120px;
  min-height: var(--h-control-sm);
  padding: 0 var(--sp-3);
  color: var(--green);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  background: #f7faf4;
  border: 1px solid rgba(31, 122, 91, .16);
  border-radius: var(--radius-sm);
}
.payment-line-toolbar > button { flex: 0 0 auto; }

.payment-member-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.payment-member-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(20, 32, 26, .12);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.payment-member-check input { grid-row: span 2; }
.payment-member-check span { font-weight: 800; overflow-wrap: anywhere; }
.payment-member-check small { color: var(--muted); font-size: .78rem; }
.payment-member-check.is-checked { background: rgba(224, 250, 226, .7); border-color: rgba(30, 132, 92, .45); }

/* Members live in one quiet, clearly-bounded surface: chips, then the
   add control right beneath — instead of floating loose in the card. */
.payment-group-members-block {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: rgba(247, 250, 244, .65);
  border: 1px solid rgba(31, 122, 91, .10);
  border-radius: var(--radius-md);
}

.payment-member-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.payment-member-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
  background: rgba(224, 250, 226, .58);
  border: 1px solid rgba(30, 132, 92, .2);
  border-radius: var(--radius-pill);
}
.payment-member-chip > span { display: grid; gap: 1px; min-width: 0; }
.payment-member-chip strong { font-size: .9rem; overflow-wrap: anywhere; }
.payment-member-chip small { color: var(--muted); font-size: .76rem; }

.chip-remove {
  width: var(--h-control-xs);
  height: var(--h-control-xs);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(20, 32, 26, .08);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  min-height: 0;
}
.chip-remove:hover { background: rgba(197, 58, 58, .14); color: #8f2323; }

/* Add-player: opens already expanded — a small popover listing every
   player as a tappable row, so there's no second click needed to see
   who's available. */
.payment-member-add-panel {
  display: grid;
  gap: var(--sp-2);
  justify-self: start;
  width: 100%;
  max-width: 320px;
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid rgba(31, 122, 91, .18);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 32px rgba(15, 31, 26, .12);
  transform-origin: top left;
  animation: pickerIn .16s var(--ease-out) both;
}

.member-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.member-picker-label {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.member-picker-close {
  flex: 0 0 auto;
  width: var(--h-control-xs);
  height: var(--h-control-xs);
  min-height: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  background: rgba(20, 32, 26, .08);
  border-radius: var(--radius-pill);
  box-shadow: none;
  font-size: 16px;
  line-height: 1;
}
.member-picker-close:hover { color: #8f2323; background: rgba(197, 58, 58, .14); }

.member-picker-list {
  display: grid;
  gap: 5px;
  max-height: 224px;
  overflow-y: auto;
  padding-right: 2px;
}

.member-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 8px var(--sp-3);
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  background: #f7faf4;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s var(--ease-out), border-color .12s var(--ease-out), transform .12s var(--ease-out);
}
.member-picker-option:hover {
  background: var(--mint);
  border-color: rgba(31, 122, 91, .22);
  transform: translateX(2px);
}
.member-picker-option.is-checked {
  background: rgba(224, 250, 226, .82);
  border-color: rgba(30, 132, 92, .42);
}
.member-picker-option input {
  flex: 0 0 18px;
  align-self: center;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  padding: 0;
  margin: 0;
  accent-color: var(--green);
}
.member-picker-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
  line-height: 1.16;
  overflow: hidden;
}
.member-picker-name {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.16;
  overflow-wrap: anywhere;
}
.member-picker-meta {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.16;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@keyframes pickerIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .payment-member-add-panel { animation: none; }
}

/* ---------- Notes / footer ---------- */
.notes {
  position: relative;
  overflow: hidden;
  margin-top: var(--sp-6);
  background: linear-gradient(135deg, #ffffff, #f3faf6);
}
.notes p { color: var(--muted); line-height: 1.65; }
.notes::after {
  content: "";
  position: absolute;
  right: var(--sp-5);
  bottom: -48px;
  width: 150px;
  height: 150px;
  border: 16px solid rgba(31, 122, 91, .07);
  border-radius: 50%;
}

.page-footer {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .76rem;
}
.page-footer .dot { color: var(--line-strong); }

/* ---------- Optional table (kept for safety, no longer referenced live) ---------- */
.table-wrap { overflow: auto; }
table { width: 100%; min-width: 0; border-collapse: collapse; }
th, td { padding: var(--sp-2); text-align: left; border-bottom: 1px solid var(--line); }

/* ---------- Racket fields ---------- */
body:not(.has-tenis) .racket-only { display: none !important; }

/* ---------- Motion ---------- */
@keyframes pageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes detailOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qrPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   Responsive — consolidated, one rule per breakpoint
   ========================================================= */

@media (max-width: 1180px) {
  .app-layout { grid-template-columns: 1fr; }
  .side-column { position: static; }
  .result-card { order: -1; }

  .hero { grid-template-columns: minmax(0, 1fr) auto; }
  .hero-visual { grid-column: 2; grid-row: 1 / span 2; }
  .hero-actions { grid-column: 1; }
}

@media (max-width: 760px) {
  .page { padding-inline: var(--sp-3); }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: var(--sp-6);
    text-align: center;
  }
  .hero-text { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { width: 100%; height: 118px; place-items: center; }
  .court-card { margin-inline: auto; transform: perspective(520px) rotateX(56deg) rotateZ(-5deg); }

  .row, .groups, .settings, .payment, .scorebar { grid-template-columns: 1fr; }
  .row label:first-child, .row label:nth-child(4) { grid-column: 1 / -1; }
  .row .remove.icon-remove {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    border-radius: var(--radius-md);
  }
  .row .remove.icon-remove::after { content: "Smazat rezervaci"; margin-left: var(--sp-2); }

  .section-title { align-items: flex-start; flex-direction: column; }
  .section-title button { width: 100%; }

  .qr-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .qr-card h3 { grid-column: auto; padding-right: 0; }
  .qr-card img { grid-row: auto; width: min(220px, 100%); height: auto; aspect-ratio: 1; }

  .history-qr-card, .inline-qr-card { grid-template-columns: 1fr; }
  .history-qr-card img, .inline-qr-card img { width: min(220px, 100%); height: auto; aspect-ratio: 1; }
}

@media (max-width: 640px) {
  body::before { display: none; }
  body::after { width: calc(100vw - var(--sp-6)); height: min(760px, calc(100vh - 40px)); opacity: .22; border-radius: var(--radius-xl); }

  .page { width: calc(100vw - var(--sp-4)); max-width: calc(100vw - var(--sp-4)); padding: var(--sp-3) 0 var(--sp-7); }

  .hero { padding: var(--sp-4); border-radius: var(--radius-xl); margin-bottom: var(--sp-3); }
  .hero::after { display: none; }
  .hero-visual { height: 104px; }
  .court-card { width: 138px; height: 92px; }
  .shuttle-mark { right: -9px; top: -12px; transform: rotate(-18deg) scale(.85); }
  h1 { font-size: 2.25rem; line-height: 1; }
  .hero .muted { font-size: .95rem; }
  .hero-actions, .hero-actions button { width: 100%; }

  .main-column, .side-column { gap: var(--sp-3); }
  .card { padding: var(--sp-4); border-radius: var(--radius-lg); }
  .section-title { align-items: stretch; }

  .row { grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: var(--sp-3); }
  .row label:nth-child(4) { grid-column: 1 / -1; }

  .player-row { grid-template-columns: 1fr; }
  .player-actions { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin-left: 0; }
  .player-actions .check-label,
  .player-actions .player-remove { width: 100%; max-width: none; justify-content: space-between; }

  input, select, button { min-height: var(--h-control); }

  .qr-card { grid-template-columns: 104px minmax(0, 1fr); justify-items: stretch; text-align: left; }
  .qr-card img { grid-row: 1 / span 2; width: 104px; height: 104px; }
  .qr-card h3 { grid-column: 2; padding-right: 0; font-size: .95rem; }
  .qr-actions { grid-column: 2; flex-direction: row; }
  .qr-actions button { flex: 0 1 auto; width: auto; min-height: 38px; padding: 0 var(--sp-3); font-size: .82rem; }
  .qr-bulk-actions { justify-content: flex-start; }
  .qr-bulk-actions button { width: auto; min-height: 38px; padding: 0 var(--sp-3); font-size: .82rem; }

  .payment-group-label, .payment-group-label select { width: 100%; }
  .payment-group-add, .payment-group-row { grid-template-columns: 1fr; display: grid; }
  .payment-group-add button, .payment-group-row button { width: 100%; }
  .payment-member-add-panel { width: 100%; max-width: none; }
  .member-picker-list { max-height: 40vh; }

  .notes { display: none; }
  .page-footer { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .result-line-main { grid-template-columns: 1fr; }
  .result-line-price { text-align: left; }
  .result-line-meta > span { flex-basis: calc(50% - var(--sp-2)); }

  .qr-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .qr-card h3 { grid-column: auto; padding-right: 0; }
  .qr-card img { grid-row: auto; width: min(220px, 100%); height: auto; aspect-ratio: 1; }
}

@media (max-width: 380px) {
  .row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .payment-assignment-row, .payment-preview-row { grid-template-columns: 1fr; }
  .payment-assignment-row label { min-width: 0; }
  .final-payment-header, .inline-qr-card { grid-template-columns: 1fr; display: grid; }
  .payment-group-name-input { flex: 1 1 100%; }
  .inline-qr-card img { width: min(220px, 100%); height: auto; aspect-ratio: 1; }
}