/* NL Sunday Cricket Club - premium light. Mobile first. Version 1.3 */

:root {
  --page: #F4F6F2;
  --sheet: #FFFFFF;
  --sheet-2: #F8FAF7;
  --ink: #13241B;
  --muted: #5E6E66;
  --faint: #8B9992;
  --line: #E5EAE3;
  --line-2: #EEF1ED;
  --green: #0E3B2C;          /* club green */
  --green-2: #1A5741;
  --green-tint: #EAF3EE;
  --gold: #AF8A3E;           /* brushed gold */
  --gold-2: #CBA85A;
  --gold-line: #E6D8B4;
  --gold-soft: #FBF6EA;
  --gold-ink: #74581A;
  --stripe-a: #FFFFFF;
  --stripe-b: #F4F8F2;
  --plate: #0E3B2C;
  --plate-ink: #FBF8EE;
  --paid: #1C7A4B;
  --paid-bg: #E8F4ED;
  --due: #B42D22;
  --due-bg: #FCEDEB;
  --part: #8A5E0D;
  --part-bg: #FAF1DC;
  --nil-bg: #EFF2EE;
  --online: #24598A;
  --online-bg: #E8F0F8;
  --c-ground: #1F6248;
  --c-food: #C99A2E;
  --c-kit: #3A76A6;
  --c-other: #9AA8A1;
  --btn-main: #0E3B2C;
  --focus: #CBA85A;
  --shadow: 0 1px 1px rgba(14, 59, 44, .03), 0 18px 36px -30px rgba(14, 59, 44, .45);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
/* Always light: the club asked for a light look, whatever the phone or app theme is. */
:root, :root[data-theme="dark"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); background: var(--page); }
body { margin: 0; background: var(--page); color: var(--ink); font: 500 15.5px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
body.has-nav { padding-bottom: 108px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--sheet); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.ic { width: 22px; height: 22px; flex: none; }
.num { font-variant-numeric: lining-nums tabular-nums; }

.wrap { max-width: 640px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { margin: 0; font-family: var(--display); color: var(--green); font-weight: 600; font-variation-settings: "SOFT" 30, "WONK" 0; }
h1 { font-size: 34px; line-height: 1.06; letter-spacing: -.01em; }
h2 { font-size: 22px; line-height: 1.15; letter-spacing: -.005em; }
/* ball-seam stitches under section headings */
.stitch::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 9px; background: repeating-linear-gradient(90deg, var(--gold-2) 0 4px, transparent 4px 7px); }

/* ---------- top bar ---------- */
.topbar { background: var(--sheet); border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.crest { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #0E3B2C; box-shadow: inset 0 0 0 2px #CBA85A, 0 0 0 3px var(--sheet), 0 0 0 4px var(--gold-line); }
.crest .ball { width: 25px; height: 25px; }
.brand-name { display: block; font: 600 19px/1.1 var(--display); color: var(--green); letter-spacing: -.005em; }
.brand-sub { display: block; margin-top: 2px; font: 600 12.5px/1.2 var(--body); color: var(--muted); }
.brand-sub b { color: var(--gold-ink); }
.topbar-link { flex: none; white-space: nowrap; padding: 10px 2px; color: var(--muted); font-weight: 700; text-decoration: none; font-size: 14.5px; }

/* ---------- club banner (home screens) ---------- */
.banner { position: relative; overflow: hidden; background: #F1F7F0; }
.banner .ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(rgba(244, 246, 242, 0), var(--page)); }
.banner-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 24px; padding-bottom: 66px; }
.crest-lg { width: 68px; height: 68px; box-shadow: inset 0 0 0 2.5px #CBA85A, 0 0 0 4px #fff, 0 0 0 5px var(--gold-line), 0 16px 28px -12px rgba(14, 59, 44, .55); }
.crest-lg .ball { width: 42px; height: 42px; }
.banner-name { margin: 16px 0 0; font: 600 28px/1.1 var(--display); color: var(--green); letter-spacing: -.01em; }
.banner-sub { margin: 7px 0 0; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--gold-line); font: 800 12.5px/1.4 var(--body); color: var(--gold-ink); }
.banner-link { position: absolute; top: 8px; right: 16px; padding: 8px 2px; color: var(--muted); font-weight: 800; font-size: 14px; text-decoration: none; }
.banner + main > .board:first-child { position: relative; z-index: 2; margin-top: -44px; }

/* ---------- scorecard (hero) ---------- */
.board {
  position: relative; isolation: isolate; margin: 16px 0 14px; padding: 20px 20px 16px; border-radius: 26px;
  background-color: #FFFFFF;
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(203, 168, 90, .16), rgba(203, 168, 90, 0) 62%), radial-gradient(90% 80% at 0% 100%, rgba(28, 122, 75, .07), rgba(28, 122, 75, 0) 60%);
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .85), inset 0 0 0 6px var(--gold-line), var(--shadow);
}
.board-art { position: absolute; z-index: -1; inset: 7px; overflow: hidden; border-radius: 20px; pointer-events: none; }
.board-art svg { position: absolute; top: -78px; right: -112px; width: 280px; height: 280px; opacity: .9; }
@media (min-width: 560px) { .board-art svg { top: -90px; right: -60px; width: 320px; height: 320px; } }
.board .back { margin-top: -6px; }
.board-label { margin: 0 0 12px; color: var(--green-2); font-size: 14.5px; font-weight: 700; }
.board-name { margin: 0 0 4px; font: 600 30px/1.05 var(--display); color: var(--green); }
.board-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; }
.board-note { margin: 14px 0 0; color: var(--muted); font-size: 15px; max-width: 34em; }
.board-foot { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding-top: 13px; border-top: 1px dashed var(--gold-line); }
.board-foot div { min-width: 0; padding: 0 10px; border-left: 1px solid var(--line); }
.board-foot div:first-child { padding-left: 0; border-left: 0; }
.board-foot b { display: block; font: 600 19px/1.15 var(--display); color: var(--green); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.board-foot small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.25; color: var(--muted); font-weight: 600; }

.plates { display: flex; align-items: flex-end; gap: 5px; }
.plate {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: clamp(32px, 10.5vw, 48px); height: clamp(48px, 15vw, 66px); padding-top: 3px;
  background: var(--plate); border-radius: 7px; color: var(--plate-ink);
  font: 600 clamp(32px, 10.5vw, 48px)/1 var(--display); font-variant-numeric: lining-nums;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28), 0 6px 14px -8px rgba(14, 59, 44, .6);
}
.plate::before { content: ""; position: absolute; top: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #CBA85A; }
.plate-sym { font: 700 clamp(22px, 7vw, 32px)/1 var(--body); color: #CBA85A; }
.plate-sep { margin: 0 -1px 4px; font: 700 30px/1 var(--display); color: var(--green); }

/* ---------- sheets and lists ---------- */
.sheet { background: var(--sheet); border: 1px solid #EDF0EB; border-radius: 24px; padding: 20px 18px 10px; margin: 14px 0; box-shadow: 0 1px 2px rgba(14, 59, 44, .04), 0 16px 32px -24px rgba(14, 59, 44, .32); }
.sheet > h2 { margin-bottom: 6px; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sheet-head a { color: var(--paid); font-weight: 700; text-decoration: none; padding: 2px 0 8px; white-space: nowrap; font-size: 14.5px; }
.sheet-note { color: var(--muted); margin: 6px 0 12px; }
.empty { color: var(--muted); margin: 8px 0 14px; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 1px solid var(--line-2); }
.item { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 12px 0; color: inherit; text-decoration: none; }
a.item:active { opacity: .7; }
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.item-title { font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.item-sub { color: var(--muted); font-size: 13.5px; line-height: 1.4; }

.amt { font: 600 22px/1 var(--display); text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.amt small { display: block; margin-top: 4px; font: 600 11.5px/1 var(--body); color: var(--muted); }
.amt-due { color: var(--due); }
.amt-ok { color: var(--paid); font: 700 14.5px/1.2 var(--body); }
.amt-extra { color: var(--paid); }
.amt-muted { color: var(--faint); font-size: 18px; }

/* avatars */
.av { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font: 800 14px/1 var(--body); letter-spacing: .02em; }
.av-0 { background: #E4F0E9; color: #1F5C43; } .av-1 { background: #E6EDF5; color: #2B547A; } .av-2 { background: #F5EEDF; color: #7A5716; }
.av-3 { background: #EEE8F2; color: #5B4677; } .av-4 { background: #F5E7E4; color: #8A3A31; } .av-5 { background: #E3EFEF; color: #2C6466; }
.av.ring { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--gold-2); }

/* tags and roles */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 6px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--nil-bg); color: var(--muted); font: 700 11.5px/1.6 var(--body); white-space: nowrap; }
.tag svg { width: 11px; height: 11px; }
.tag-gold { background: var(--gold-soft); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-line); }
.tag-green { background: var(--paid-bg); color: var(--paid); }
.tag-blue { background: var(--online-bg); color: var(--online); }
.tag-line { background: transparent; color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-2); }
.tag-quiet { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.role { display: inline-flex; align-items: center; gap: 5px; color: var(--green-2); font: 700 12.5px/1.4 var(--body); white-space: nowrap; }
.role svg { width: 15px; height: 15px; }
.phone { color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }

/* status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-paid { background: var(--paid-bg); color: var(--paid); }
.pill-due { background: var(--due-bg); color: var(--due); }
.pill-part { background: var(--part-bg); color: var(--part); }
.pill-nil { background: var(--nil-bg); color: var(--muted); }

/* date plate */
.date-plate { flex: none; width: 50px; padding: 6px 0 5px; text-align: center; border-radius: 14px; background: var(--sheet); border: 1px solid var(--gold-line); box-shadow: inset 0 -2px 0 var(--gold-soft); }
.date-plate b { display: block; font: 600 22px/1.05 var(--display); color: var(--green); font-variant-numeric: lining-nums; }
.date-plate small { display: block; font-size: 11.5px; font-weight: 800; line-height: 1.3; color: var(--gold-ink); }

.meter { display: block; height: 5px; max-width: 170px; margin: 8px 0 5px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--paid); border-radius: 3px; }
.month { margin: 22px 4px 0; font: 600 18px/1.2 var(--display); color: var(--muted); }

/* ---------- expenses ---------- */
.cat { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 999px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); font: 700 12px/1.6 var(--body); color: var(--ink); white-space: nowrap; }
.cat::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.cat b { font-weight: 800; }
.c-ground { --c: var(--c-ground); } .c-food { --c: var(--c-food); } .c-kit { --c: var(--c-kit); } .c-other { --c: var(--c-other); }
.cats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.split-bar { display: flex; height: 10px; margin: 12px 0; border-radius: 5px; overflow: hidden; background: var(--line); }
.split-bar i { display: block; height: 100%; background: var(--c); }
.split-bar i + i { box-shadow: -2px 0 0 var(--sheet); }
.catrows { list-style: none; margin: 4px 0 8px; padding: 0; }
.catrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; padding: 11px 0; }
.catrow + .catrow { border-top: 1px solid var(--line-2); }
.catrow-name { font-weight: 700; display: flex; align-items: center; gap: 9px; }
.catrow-name::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.catrow-amt { font: 600 19px/1 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.catrow-amt small { font: 700 12.5px var(--body); color: var(--muted); margin-left: 6px; }
.catbar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.catbar i { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.chart { display: flex; align-items: flex-end; gap: 12px; height: 176px; margin: 8px 0 2px; padding: 4px 2px 0; overflow-x: auto; }
.bar { flex: 1 0 42px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; color: inherit; text-decoration: none; }
.bar b { font: 600 13.5px/1 var(--display); font-variant-numeric: lining-nums; }
.bar-stack { display: flex; flex-direction: column-reverse; width: 100%; max-width: 44px; border-radius: 10px 10px 4px 4px; overflow: hidden; }
.bar-stack i { display: block; background: var(--c); }
.bar-stack i + i { box-shadow: 0 2px 0 var(--sheet); }
.bar small { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }

.filters { display: flex; gap: 8px; margin: 6px -16px 0; padding: 4px 16px 6px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); color: var(--ink); font: 700 13.5px var(--body); cursor: pointer; }
.fchip svg { width: 15px; height: 15px; }
.fchip small { color: var(--muted); font-weight: 700; }
.fchip[aria-pressed="true"] { background: #0E3B2C; border-color: #0E3B2C; color: #fff; }
.fchip[aria-pressed="true"] small { color: #CBA85A; }

/* ---------- page head ---------- */
.page-head { padding: 18px 0 4px; }
.back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-left: -6px; color: var(--muted); font-weight: 700; text-decoration: none; white-space: nowrap; font-size: 14.5px; }
.lead { margin: 8px 0 0; color: var(--muted); }

/* ---------- split band ---------- */
.split {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin: 12px 0; padding: 18px 20px;
  border-radius: 24px; border: 1px solid var(--gold-line);
  background-color: var(--stripe-a);
  background-image: repeating-linear-gradient(90deg, var(--stripe-a) 0 28px, var(--stripe-b) 28px 56px);
  box-shadow: inset 0 0 0 5px var(--sheet), inset 0 0 0 6px var(--gold-line), var(--shadow);
}
.split-part { display: flex; flex-direction: column; }
.split-part b { font: 600 27px/1 var(--display); color: var(--green); font-variant-numeric: lining-nums; }
.split-part small { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.split-op { padding-bottom: 24px; font: 500 24px/1 var(--display); color: var(--gold); }
.split-res b { margin: -4px -8px -2px; padding: 5px 9px 3px; border-radius: 9px; background: var(--plate); color: var(--plate-ink); font-size: 30px; box-shadow: 0 6px 14px -8px rgba(14, 59, 44, .6); }
.split-res small { text-align: right; }
.split-empty p { margin: 0; color: var(--muted); }
.split-note { margin: -4px 4px 10px; color: var(--muted); font-size: 13.5px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border: 1.5px solid transparent; border-radius: 999px; background: none; color: inherit; font: 800 15.5px/1 var(--body); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 20px; height: 20px; }
.btn-primary { background: var(--btn-main); color: #fff; box-shadow: 0 8px 18px -12px rgba(14, 59, 44, .8); }
.btn-cash { background: #1C7A4B; color: #fff; }
.btn-online { background: #24598A; color: #fff; }
.btn-wa { background: #128C4E; color: #fff; }
.btn-gold { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--sheet); }
.btn-danger { border-color: var(--due); color: var(--due); }
.btn-wide { width: 100%; }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
.link-btn { background: none; border: 0; padding: 10px 6px; font: 800 14.5px var(--body); color: var(--paid); cursor: pointer; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; text-decoration: none; }
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn.wa { color: #fff; background: #128C4E; box-shadow: 0 6px 14px -8px rgba(18, 140, 78, .9); }
.icon-btn.wa.off { color: #128C4E; background: var(--sheet); box-shadow: inset 0 0 0 1.5px #A9D8BE; }

/* ---------- forms ---------- */
form { margin: 0; }
.field { display: block; margin: 0 0 12px; }
.field > span { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.field > small { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
input[type=text], input[type=tel], input[type=date], input[type=number], input[type=password], select, textarea {
  display: block; width: 100%; min-height: 50px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--sheet-2); color: var(--ink); font: 500 16px/1.3 var(--body);
}
input[type=date]::-webkit-date-and-time-value { text-align: left; }
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green-2); box-shadow: 0 0 0 4px rgba(28, 122, 75, .14); background: var(--sheet); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 8px; font-weight: 700; font-size: 14.5px; }
.check input { width: 22px; height: 22px; accent-color: #1C7A4B; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.sheet > form:last-child, .sheet > .btn:last-child, .fold > form:last-child { margin-bottom: 10px; }
.legend-label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.tag-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; border: 0; }
.tag-pick label { position: relative; }
.tag-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag-pick span { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 13px; border: 1.5px solid var(--line); border-radius: 999px; font: 700 13.5px var(--body); cursor: pointer; background: var(--sheet); }
.tag-pick input:checked + span { background: var(--gold-soft); border-color: var(--gold-2); color: var(--gold-ink); }
.tag-pick input:checked + span::before { content: "✓"; }
.tag-pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- foldable sections ---------- */
.fold > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-bottom: 6px; list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 6px 4px 4px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); transition: transform .15s; }
.fold[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.fold-meta { margin-left: auto; color: var(--muted); font-weight: 700; font-size: 14px; }

/* ---------- who played chips ---------- */
.chip-tools { display: flex; gap: 6px; margin: 0 0 6px -6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--sheet); font-weight: 700; cursor: pointer; user-select: none; }
.chip input:checked + span { background: #0E3B2C; border-color: #0E3B2C; color: #fff; }
.chip input:checked + span::before { content: "✓"; color: #CBA85A; }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.add-new { margin-top: 16px; padding: 14px; border-radius: 18px; background: var(--sheet-2); border: 1px dashed var(--gold-line); }
.add-new .legend-label { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--green); margin-bottom: 10px; }
.sticky-save { position: sticky; bottom: calc(94px + env(safe-area-inset-bottom, 0px)); margin: 10px -18px 0; padding: 10px 18px 8px; background: var(--sheet); border-radius: 0 0 24px 24px; }

/* ---------- payments (admin) ---------- */
.pays { margin: 0 -18px 10px; }
.pay { padding: 16px 18px; border-top: 1px solid var(--line-2); scroll-margin-top: 12px; }
.pay:first-child { border-top: 0; }
.pay.just { animation: nl-mark 1.8s ease-out; }
@keyframes nl-mark { from { background: var(--gold-soft); } to { background: transparent; } }
.pay-top { display: flex; align-items: flex-start; gap: 12px; }
.pay-top .amt { padding-top: 6px; }
.pay-name { font-weight: 800; font-size: 16.5px; line-height: 1.3; }
.pay-status { margin-top: 6px; }
.cover { list-style: none; margin: 10px 0 0 54px; padding: 4px 0 4px 12px; border-left: 2px dashed var(--gold-line); }
.cover li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 5px 0; }
.cover li span:first-child { font-weight: 700; }
.pay-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0 54px; }
.more > summary { display: inline-flex; align-items: center; min-height: 42px; padding: 0 8px; color: var(--muted); font-weight: 800; list-style: none; cursor: pointer; font-size: 14.5px; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] { flex-basis: 100%; }
.more-box { margin-top: 6px; padding: 14px; border-radius: 16px; background: var(--sheet-2); border: 1px solid var(--line-2); }
.more-box h3 { margin: 0 0 8px; font-size: 16px; }
.more-box + .more-box { margin-top: 8px; }
.row-form { display: flex; flex-wrap: wrap; gap: 8px; }
.row-form input, .row-form select { flex: 1 1 120px; width: auto; }
.row-form .btn { flex: 1 1 100%; }
.payer-row { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; }
.payer-row span { flex: 0 0 78px; font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; }
.payer-row select { flex: 1; min-height: 44px; }

/* ---------- costs ---------- */
.costs > li { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.cost-name { flex: 1; display: flex; align-items: center; gap: 9px; font-weight: 600; }
.cost-name::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c, transparent); }
.cost-amt { font: 600 17px var(--display); font-variant-numeric: lining-nums tabular-nums; }
.costs > li.cost-total { border-top: 1.5px solid var(--green); }
.costs > li.cost-total .cost-name { font-weight: 800; }
.costs.has-del > li.cost-total .cost-amt { padding-right: 52px; }
.add-cost { display: grid; grid-template-columns: 1fr 112px; gap: 8px; margin: 12px 0 10px; }
.add-cost .btn { grid-column: 1 / -1; }
.quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.quick button { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); color: var(--ink); font: 700 13px var(--body); cursor: pointer; }

/* ---------- squad (admin players) ---------- */
.squad-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.member { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 8px; padding: 6px 0; }
.member > .icon-btn { margin-top: 12px; }
.member .fold > summary { gap: 12px; padding: 8px 0; }
.member .fold > summary::after { margin-top: 18px; align-self: flex-start; }
.member-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; }
.member-form { padding: 8px 0 4px; }

/* ---------- UPI pay card ---------- */
.pay-card { border-color: var(--gold-line); }
.qr-wrap { display: flex; align-items: center; gap: 16px; margin: 10px 0 16px; }
.qr { position: relative; flex: none; width: 150px; height: 150px; padding: 10px; border-radius: 18px; background: #fff; border: 1px solid var(--gold-line); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--gold-soft); }
.qr svg { display: block; width: 100%; height: 100%; }
.qr-sample { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-10deg); padding: 3px 9px; border-radius: 6px; background: var(--due); color: #fff; font: 800 11.5px/1.4 var(--body); white-space: nowrap; }
.qr-side { min-width: 0; }
.qr-amt { margin: 0; font: 600 30px/1 var(--display); color: var(--green); font-variant-numeric: lining-nums; }
.qr-to { margin: 8px 0 2px; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.upi-id { display: block; color: var(--ink); font-weight: 800; word-break: break-all; }
.pay-card .btn + .btn { margin-top: 8px; }

/* ---------- pager, footer ---------- */
.pager { display: flex; gap: 10px; margin: 6px 0 12px; }
.pager a { flex: 1; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--sheet); text-decoration: none; font-weight: 700; }
.pager a.next { justify-content: flex-end; text-align: right; }
.pager small { display: block; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.foot { padding-top: 14px; padding-bottom: 20px; color: var(--faint); font-size: 13px; font-weight: 600; }
.foot a { color: var(--paid); font-weight: 800; }
.danger { margin: 20px 0 6px; }
.subtle-link { display: inline-block; margin: 6px 0; color: var(--paid); font-weight: 800; }

/* ---------- floating tab bar ---------- */
.tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 20; max-width: 560px; margin: 0 auto; border-radius: 24px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line), 0 16px 34px -14px rgba(14, 59, 44, .35); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .tabbar { background: color-mix(in srgb, var(--sheet) 88%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
}
.tabbar-in { display: flex; padding: 6px; gap: 2px; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; border-radius: 18px; color: var(--faint); text-decoration: none; font-size: 11.5px; font-weight: 800; }
.tab .ic { width: 23px; height: 23px; }
.tab.is-on { color: var(--green); background: var(--green-tint); }
.tab.is-on .ic { color: var(--green-2); }

/* ---------- messages ---------- */
.toast { position: fixed; left: 50%; z-index: 30; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: min(92vw, 520px); padding: 13px 18px; border-radius: 18px; color: #fff; font-weight: 700; line-height: 1.4; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .4); }
.toast.low { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
.toast-ok { background: #1C7A4B; } .toast-warn { background: #7E5A12; } .toast-err { background: #B42D22; }

/* ---------- login ---------- */
.login-card .crest { width: 56px; height: 56px; margin-bottom: 14px; }
.login-card .crest .ball { width: 34px; height: 34px; }

@media (min-width: 560px) {
  h1 { font-size: 40px; }
  .split-part b { font-size: 32px; }
  .split-res b { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------- real-app extras ---------- */
.pay:target { animation: nl-mark 1.8s ease-out; }
.flash { margin: 12px 0; padding: 12px 16px; border-radius: 16px; font-weight: 700; }
.flash-ok { background: var(--paid-bg); color: var(--paid); }
.flash-warn { background: var(--part-bg); color: var(--part); }
.flash-err { background: var(--due-bg); color: var(--due); }
.qr:empty::after { content: "QR code needs JavaScript"; display: grid; place-items: center; height: 100%; color: var(--faint); font-size: 12px; text-align: center; }