:root {
  --ink: #17201c;
  --muted: #68736c;
  --line: #e2e8e4;
  --line-strong: #d5ded8;
  --paper: #f4f6f4;
  --panel: #ffffff;
  --green: #17694f;
  --green-strong: #10543f;
  --green-deep: #0d2d23;
  --green-soft: #edf6f1;
  --gold: #c7a64d;
  --red: #b34842;
  --blue: #326b94;
  --shadow: 0 18px 50px rgba(20, 40, 31, 0.075), 0 2px 8px rgba(20, 40, 31, 0.035);
  --soft-shadow: 0 8px 28px rgba(20, 40, 31, 0.055);
  --control-shadow: 0 1px 2px rgba(20, 40, 31, 0.035);
  --radius-control: 12px;
  --radius-card: 18px;
  --radius-modal: 24px;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

body { margin: 0px; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

button, input, select, textarea { font: inherit; }

button, select, input, textarea { border: 1px solid var(--line); border-radius: 7px; background: rgb(255, 255, 255); color: var(--ink); }

button { min-height: 38px; padding: 0px 14px; cursor: pointer; font-weight: 700; }

button.primary { background: var(--green); border-color: var(--green); color: rgb(255, 255, 255); font-weight: 700; }

button:disabled { cursor: not-allowed; opacity: 0.45; }

select, input { min-height: 40px; padding: 0px 12px; }

button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: rgba(31, 107, 77, 0.18) solid 3px; outline-offset: 1px; }

textarea { grid-column: 1 / -1; min-height: 92px; padding: 10px 12px; resize: vertical; }

.landing { position: fixed; inset: 0px; z-index: 50; display: grid; align-items: center; overflow: hidden; padding: clamp(24px, 6vw, 72px); color: rgb(248, 251, 248); background: rgb(20, 58, 42); }

.landing.hidden { display: none; }

#landingPitch { position: absolute; inset: 0px; width: 100%; height: 100%; }

.landing-copy { position: relative; z-index: 1; display: grid; gap: 18px; max-width: 760px; }

.landing-copy h1 { max-width: 680px; margin: 0px; font-size: clamp(42px, 8vw, 92px); line-height: 0.95; letter-spacing: 0px; }

.landing-copy p:not(.eyebrow) { max-width: 560px; margin: 0px; color: rgb(219, 233, 223); font-size: clamp(18px, 2.2vw, 24px); }

.landing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

.landing-actions button { min-width: 132px; }

.landing-actions a { display: inline-flex; align-items: center; min-height: 38px; padding: 0px 14px; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 7px; color: rgb(248, 251, 248); background: rgba(255, 255, 255, 0.08); font-weight: 800; text-decoration: none; }

.landing-ticker { position: absolute; right: clamp(18px, 4vw, 54px); bottom: clamp(18px, 4vw, 54px); z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: min(480px, -36px + 100vw); }

.landing-ticker span { padding: 9px 12px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; color: rgb(238, 248, 240); background: rgba(255, 255, 255, 0.08); font-weight: 800; font-size: 13px; }

.app-shell { display: grid; grid-template-columns: 232px minmax(0px, 1fr); min-height: 100vh; }

.setup-overlay { position: fixed; inset: 0px; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(21, 60, 44, 0.82); }

.login-overlay { position: fixed; inset: 0px; z-index: 80; display: grid; place-items: center; overflow-y: auto; padding: 20px; color: rgb(248, 251, 248); background: rgba(18, 56, 40, 0.96); }

.login-overlay[hidden] { display: none; }

.login-dialog { display: grid; gap: 14px; min-width: 0px; width: min(480px, 100%); padding: 28px; color: var(--ink); background: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; box-shadow: var(--shadow); }

.login-dialog h2, .login-dialog p { margin: 0px; }

.auth-tabs, .auth-row { display: grid; min-width: 0px; width: 100%; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; }

.auth-tabs button { min-width: 0px; padding: 0px 8px; color: var(--muted); background: rgb(244, 247, 245); white-space: normal; }

.auth-tabs button.active { color: rgb(255, 255, 255); border-color: var(--green); background: var(--green); }

.auth-form { display: none; min-width: 0px; width: 100%; gap: 10px; }

.auth-form.active { display: grid; }

.auth-row { grid-template-columns: repeat(2, minmax(0px, 1fr)); }

.auth-form input, .auth-form select, .auth-form button { min-width: 0px; width: 100%; }

.auth-status { min-height: 20px; white-space: pre-line; }

.login-dialog label { display: grid; gap: 7px; font-weight: 800; }

.setup-overlay[hidden] { display: none; }

.setup-dialog { display: grid; gap: 12px; width: min(420px, 100%); padding: 24px; background: rgb(255, 255, 255); border-radius: 8px; box-shadow: var(--shadow); }

.setup-dialog h2 { margin: 0px; }

.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 18px; }

.academy-admin-settings, .academy-admin-users { display: grid; gap: 18px; }

#academyAdminView[data-subview="settings"] .academy-admin-users, #academyAdminView[data-subview="users"] .academy-admin-settings { display: none; }

.profile-form { display: grid; gap: 12px; }

.profile-form label { display: grid; gap: 7px; font-weight: 800; }

.coach-access-panel { grid-column: 1 / -1; }

.selection-policy-panel { grid-column: 1 / -1; padding: 18px; }

.selection-policy-form { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; margin-top: 16px; }

.selection-policy-form label { display: grid; gap: 6px; color: rgb(52, 68, 59); font-size: 13px; font-weight: 800; }

.selection-policy-form .policy-wide { grid-column: 1 / -1; }

.policy-check { grid-template-columns: auto 1fr; align-items: center; justify-content: start; }

.policy-check input { width: 18px; min-height: 18px; }

.policy-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.selection-policy-preview { margin-top: 16px; }

.selection-policy-preview ol { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px 24px; padding-left: 26px; }

.selection-policy-preview li span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }

.coach-create-form { grid-template-columns: repeat(4, minmax(0px, 1fr)) auto; align-items: end; }

.coach-create-form .subtle { grid-column: 1 / -1; }

.coach-access-list { display: grid; gap: 8px; margin-top: 18px; }

.data-health-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgb(248, 250, 248); }

.cricclubs-league-settings { display: grid; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }

.cricclubs-league-settings h4, .cricclubs-league-settings p { margin: 0px; }

.cricclubs-league-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.3fr) minmax(120px, 0.7fr) auto; gap: 10px; align-items: end; }

.cricclubs-league-form label { display: grid; gap: 6px; color: rgb(52, 68, 59); font-size: 13px; font-weight: 800; }

.cricclubs-league-form .subtle { grid-column: 1 / -1; }

.cricclubs-league-list { display: grid; gap: 8px; }

.cricclubs-league-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgb(248, 250, 248); }

.cricclubs-league-row small { display: block; margin-top: 3px; color: var(--muted); }

.player-cricclubs-record-links > label { display: grid; gap: 6px; min-width: min(280px, 100%); color: rgb(52, 68, 59); font-size: 13px; font-weight: 800; }

@media (max-width: 760px) {
  .cricclubs-league-form { grid-template-columns: 1fr; }
}

.academy-team-list { display: grid; gap: 8px; margin-top: 14px; }

.team-bulk-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 14px; }

.team-archive-league-filter { display: grid; gap: 4px; color: var(--muted); font-size: 0.78rem; }

.team-archive-league-filter select { min-width: 170px; }

.academy-team-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgb(255, 255, 255); }

.academy-team-row span, .academy-team-row label { display: grid; gap: 3px; }

.academy-team-row label { grid-template-columns: auto 1fr; align-items: center; cursor: pointer; }

.academy-team-row small { color: var(--muted); }

.player-merge-panel { display: grid; gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid rgb(230, 201, 196); border-radius: 10px; background: rgb(255, 248, 246); }

.player-merge-panel[hidden] { display: none; }

.player-merge-panel h4, .player-merge-panel p { margin: 0px; }

.approval-panel { display: grid; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgb(248, 250, 248); }

.approval-panel p { margin: 3px 0px 0px; }

.approval-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.approval-panel[data-status="approved"] { border-color: rgba(31, 107, 77, 0.45); background: rgb(238, 248, 242); }

.approval-panel[data-status="pending"] { border-color: rgba(217, 183, 76, 0.65); background: rgb(255, 250, 240); }

.approval-panel[data-status="changes_requested"] { border-color: rgba(168, 66, 60, 0.45); background: rgb(255, 244, 243); }

.pending-approvals-panel { margin: 16px 24px 0px; padding: 16px; border: 1px solid rgba(217, 183, 76, 0.7); border-radius: 9px; background: rgb(255, 250, 240); box-shadow: var(--soft-shadow); }

.app-shell:not([data-active-view="selection"]):not([data-active-view="approvals"]) .pending-approvals-panel { display: none; }

.changes-required-inbox { border-color: rgba(168, 66, 60, 0.55); background: rgb(255, 244, 243); }

.changes-required-inbox .balance-pill { color: var(--red); border-color: rgba(168, 66, 60, 0.3); background: rgb(255, 255, 255); }

.change-review-note { color: var(--red); font-weight: 700; }

.approval-history-list { display: grid; gap: 12px; }

.approval-history-card { display: grid; gap: 10px; padding: 14px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 4px solid var(--green); border-radius: 8px; background: rgb(255, 255, 255); }

.approval-history-card[data-status="pending"] { border-left-color: var(--gold); }

.approval-history-card[data-status="changes_requested"] { border-left-color: var(--red); }

.approval-history-card[data-status="draft"] { border-left-color: var(--muted); }

.approval-history-head { display: flex; justify-content: space-between; gap: 14px; }

.approval-history-meta { color: var(--muted); font-size: 13px; }

.approval-history-xi { display: flex; flex-wrap: wrap; gap: 6px; }

.approval-history-xi span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgb(248, 250, 248); font-size: 12px; }

.approval-history-note { margin: 0px; padding: 9px 10px; border-radius: 7px; background: rgb(245, 247, 243); }

.pending-approvals-heading, .pending-approval-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.pending-approvals-heading h3, .pending-approvals-heading p { margin: 0px; }

.pending-approvals-list { display: grid; gap: 8px; margin-top: 12px; }

.pending-approval-item { padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgb(255, 255, 255); }

.pending-approval-copy { display: grid; gap: 3px; }

.pending-approval-copy span { color: var(--muted); font-size: 13px; }

@media (max-width: 720px) {
  .pending-approvals-panel { margin: 12px; }
  .pending-approvals-heading, .pending-approval-item { align-items: stretch; flex-direction: column; }
}

.coach-access-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(180px, 1fr) 155px 170px minmax(165px, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgb(248, 250, 248); }

@media (max-width: 820px) {
  .profile-grid, .coach-create-form, .coach-access-row { grid-template-columns: 1fr; }
}

.sidebar { display: flex; flex-direction: column; gap: 24px; padding: 24px 18px; color: rgb(248, 251, 248); background: var(--green-deep); border-right: 1px solid rgba(255, 255, 255, 0.08); }

.sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.mobile-nav-toggle { display: none; color: rgb(255, 247, 207); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }

.logout-button { color: rgb(215, 232, 220); background: transparent; }

.brand-home { display: grid; gap: 4px; min-height: auto; padding: 0px; border: 0px; border-radius: 0px; color: inherit; background: transparent; text-align: left; }

.brand-home:hover h1, .brand-home:focus-visible h1 { color: rgb(255, 247, 207); }

.sidebar h1, .topbar h2, .panel h3, .schedule-form h3 { margin: 0px; letter-spacing: 0px; }

.sidebar h1 { font-size: 25px; line-height: 1.05; }

.sidebar small { display: block; margin-top: 8px; color: rgb(207, 224, 214); font-weight: 800; }

.eyebrow { margin: 0px 0px 6px; color: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; }

nav { display: grid; gap: 8px; }

.nav-button { width: 100%; justify-content: flex-start; text-align: left; color: rgb(236, 246, 239); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); }

.nav-button.active { color: rgb(21, 60, 44); background: rgb(244, 204, 101); border-color: rgb(244, 204, 101); font-weight: 800; }

.subnav { display: none; gap: 6px; padding: 0px 0px 8px 14px; }

.subnav.active { display: grid; }

.subnav-button { min-height: 32px; padding: 0px 10px; color: rgb(215, 232, 220); text-align: left; background: transparent; border-color: transparent; font-size: 13px; font-weight: 800; }

.subnav-button.active { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.14); }

.sidebar-bottom { display: grid; gap: 12px; margin-top: auto; }

.support-button { color: rgb(255, 247, 207); background: rgba(244, 204, 101, 0.12); border-color: rgba(244, 204, 101, 0.32); }

.support-button.active { color: rgb(21, 60, 44); background: rgb(244, 204, 101); border-color: rgb(244, 204, 101); }

.season-card { display: grid; gap: 6px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.06); }

.season-card strong { font-size: 24px; }

.season-card small { color: rgb(207, 224, 214); line-height: 1.35; }

main { min-width: 0px; padding: 22px 28px 28px; }

.topbar { display: grid; grid-template-columns: 1fr; align-items: start; gap: 12px; margin-bottom: 20px; }

.topbar h2 { font-size: 28px; }

.top-actions, .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.top-actions { justify-content: flex-start; padding: 12px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--soft-shadow); }

.app-shell[data-active-view="selection"] .top-actions { display: none; }

.app-shell[data-active-view="selection"] .top-actions.chooser-open { display: flex; }

.app-shell[data-active-view="approvals"] .top-actions, .app-shell[data-active-view="instructions"] .top-actions, .app-shell[data-active-view="profile"] .top-actions, .app-shell[data-active-view="academyAdmin"] .top-actions { display: none; }

.app-shell[data-active-view="squad"] .season-filter, .app-shell[data-active-view="squad"] .age-filter, .app-shell[data-active-view="squad"] .match-filter, .app-shell[data-active-view="schedule"] .match-filter { display: none; }

.top-actions select { flex: 0 0 auto; min-width: 0px; font-size: 15px; font-weight: 600; }

.top-actions > select:not([hidden]), .top-actions > button { align-self: flex-end; }

.selection-filter { display: grid; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }

.selection-filter[hidden] { display: none; }

.selection-filter select { width: 100%; text-transform: none; font-size: 15px; font-weight: 600; }

.league-filter { flex: 1 1 180px; min-width: 140px; }

.season-filter { flex: 0 1 120px; min-width: 105px; }

.age-filter { flex: 0 0 165px; min-width: 165px; }

.age-filter select { padding-right: 34px; }

.match-filter { flex: 2 1 340px; min-width: 280px; }

.top-actions button { padding-inline: 11px; }

.view { display: none; }

.view.active { display: block; }

.match-strip { min-width: 0px; }

.match-context-shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 14px 16px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--soft-shadow); }

.match-context-copy { display: grid; gap: 4px; min-width: 0px; }

.match-context-copy strong { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }

.match-context-copy span { color: var(--muted); font-size: 13px; }

.selection-steps { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; margin-bottom: 16px; padding: 8px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--soft-shadow); }

.selection-steps button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-color: transparent; background: transparent; color: var(--muted); }

.selection-steps button span { display: inline-grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgb(255, 255, 255); }

.selection-steps button.active { color: var(--green-strong); background: rgb(237, 245, 240); }

.selection-steps button.active span { color: rgb(255, 255, 255); background: var(--green); border-color: var(--green); }

.stat { min-height: 76px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--soft-shadow); }

.stat span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }

.stat strong { display: block; margin-top: 5px; font-size: 18px; }

.selection-grid { display: grid; grid-template-columns: minmax(480px, 1fr) minmax(440px, 500px); gap: 18px; align-items: start; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }

.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line); background: rgb(251, 252, 250); }

.segmented { display: flex; gap: 4px; padding: 3px; background: rgb(237, 243, 239); border-radius: 8px; }

.segmented button { min-height: 30px; border: 0px; background: transparent; font-size: 13px; }

.segmented button.active { background: rgb(255, 255, 255); box-shadow: rgba(35, 52, 42, 0.12) 0px 2px 8px; font-weight: 800; }

.table-wrap { overflow-x: auto; }

#selectionView .table-wrap { max-height: calc(-345px + 100vh); min-height: 260px; overflow: auto; }

table { width: 100%; border-collapse: collapse; }

th, td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }

th { color: var(--muted); font-size: 12px; letter-spacing: 0px; text-transform: uppercase; background: rgb(251, 252, 250); position: sticky; top: 0px; z-index: 1; }

tbody tr:hover { background: rgb(250, 252, 249); }

tr:last-child td { border-bottom: 0px; }

.name-cell { display: grid; gap: 3px; }

.name-cell small, .subtle { color: var(--muted); }

.quota { display: inline-grid; min-width: 54px; place-items: center; padding: 5px 8px; border-radius: 999px; color: rgb(23, 51, 33); background: rgb(229, 243, 234); font-weight: 800; }

.quota.met { background: rgb(238, 240, 242); color: rgb(93, 103, 112); }

.poll-select { min-width: 130px; }

.poll-import { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); background: rgb(251, 252, 250); }

.poll-import textarea, .export-panel textarea { grid-column: 1 / -1; }

.poll-import .subtle { grid-column: 1 / -1; }

.xi-panel { position: static; display: grid; grid-template-rows: auto auto auto minmax(360px, auto); max-height: none; min-height: 0px; }

.xi-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; color: var(--green-strong); background: rgb(245, 250, 247); border-bottom: 1px solid var(--line); }

.xi-summary.needs-player { color: rgb(138, 83, 0); background: rgb(255, 249, 236); }

.share-panel { margin-top: 18px; }

.share-grid { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr); gap: 16px; padding: 16px; }

.share-grid .approval-panel, .share-grid .export-panel { margin: 0px; border: 1px solid var(--line); border-radius: 8px; }

.selection-action-bar { position: sticky; bottom: 12px; z-index: 8; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; margin-top: 18px; padding: 12px; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); border-radius: 10px; box-shadow: rgba(23, 32, 27, 0.16) 0px 12px 32px; }

.selection-action-bar span { color: var(--muted); font-weight: 700; }

.selection-action-bar button { min-height: 44px; }

.balance-pill, .role-chip, .status-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0px 9px; border-radius: 999px; background: rgb(237, 243, 239); color: rgb(29, 75, 55); font-size: 12px; font-weight: 800; }

.xi-list { margin: 0px; padding: 8px 16px 14px 42px; min-height: 360px; overflow: visible; }

.xi-tools { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgb(251, 252, 250); }

.xi-list li { padding: 12px 0px; border-bottom: 1px solid var(--line); }

.xi-list li:last-child { border-bottom: 0px; }

.xi-player { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }

.xi-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

.icon-button { width: 32px; min-height: 32px; padding: 0px; font-weight: 900; }

.danger-button { min-height: 32px; padding: 0px 10px; color: rgb(255, 255, 255); background: var(--red); border-color: var(--red); font-size: 12px; font-weight: 800; }

.xi-panel .danger-button { color: var(--red); background: rgb(255, 247, 246); border-color: rgb(231, 187, 183); }

.export-panel { display: grid; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: rgb(251, 252, 250); }

.export-panel textarea { min-height: 52px; max-height: 76px; }

.export-actions { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 6px; }

.export-actions button, .export-actions .download-link { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding-inline: 8px; font-size: 12px; }

.download-link { color: var(--green); font-weight: 800; }

.xi-player strong { display: block; }

.xi-player small { color: var(--muted); line-height: 1.35; }

.score { color: var(--blue); font-weight: 900; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; padding: 12px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--soft-shadow); }

.toolbar input { min-width: 260px; }

.row-actions { display: grid; grid-template-columns: 1fr; gap: 6px; }

.row-actions button { min-height: 32px; padding: 0px 10px; }

.squad-layout { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(320px, 340px); gap: 16px; align-items: start; }

#squadView[data-subview="roster"] .squad-layout, #squadView[data-subview="add"] .squad-layout, #squadView[data-subview="tools"] .squad-layout { grid-template-columns: 1fr; }

#squadView[data-subview="roster"] .squad-sidebar, #squadView[data-subview="add"] .squad-table-panel, #squadView[data-subview="add"] .squad-tools, #squadView[data-subview="tools"] .toolbar, #squadView[data-subview="tools"] .squad-table-panel, #squadView[data-subview="tools"] .squad-editor { display: none; }

#squadView[data-subview="add"] .squad-sidebar, #squadView[data-subview="tools"] .squad-sidebar { position: static; width: min(620px, 100%); }

.squad-table-panel { min-width: 0px; padding: 0px; overflow: hidden; }

.squad-table-panel .table-wrap { max-height: calc(-180px + 100vh); overflow: auto; }

.squad-table-panel td { white-space: normal; }

.squad-table-panel th:last-child, .squad-table-panel td:last-child { width: 132px; }

.squad-table-panel .role-chip, .squad-table-panel .status-chip { max-width: 150px; white-space: normal; }

.played-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.squad-sidebar { display: grid; gap: 14px; position: sticky; top: 18px; }

.squad-editor, .squad-tools { padding: 16px; }

.player-lookup { display: grid; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }

.player-lookup h3 { margin: 0px; }

.lookup-results { display: grid; gap: 8px; min-height: 22px; }

.lookup-result { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 10px; align-items: center; padding: 10px; background: rgb(251, 252, 250); border: 1px solid var(--line); border-radius: 8px; }

.lookup-result strong, .lookup-result small { display: block; }

.lookup-result small { color: var(--muted); line-height: 1.35; }

.stats-toolbar input { flex: 1 1 320px; }

.app-shell[data-active-view="stats"] .match-filter, .app-shell[data-active-view="stats"] #recommendBtn, .app-shell[data-active-view="stats"] #saveBtn { display: none; }

.stats-dashboard { display: grid; gap: 16px; margin-bottom: 16px; }

.stat-kpis { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px; }

.stat-kpis article { display: grid; gap: 6px; padding: 16px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--soft-shadow); }

.stat-kpis span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }

.stat-kpis strong { font-size: clamp(24px, 4vw, 36px); line-height: 1; }

.stat-kpis small { color: var(--muted); }

.stats-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 12px 14px; color: rgb(96, 67, 19); background: rgb(255, 248, 232); border: 1px solid rgb(236, 211, 154); border-radius: 8px; font-weight: 700; }

.stats-notice[hidden] { display: none; }

.stats-notice button { flex: 0 0 auto; }

.leader-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; }

.leader-card { display: grid; gap: 12px; align-content: start; padding: 16px; }

.leader-card h3 { margin: 2px 0px 0px; font-size: 17px; }

.leader-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }

.leader-card-heading > button { flex: 0 0 auto; padding: 6px 8px; font-size: 12px; }

.leader-card-heading > button[hidden] { display: none; }

.leader-list { display: grid; margin: 0px; padding: 0px; list-style: none; }

.leader-list.is-expanded { max-height: 430px; padding-right: 4px; overflow-y: auto; }

.leader-list li { display: grid; grid-template-columns: 28px minmax(0px, 1fr) auto; gap: 10px; align-items: center; min-height: 54px; padding: 8px 0px; border-top: 1px solid var(--line); }

.leader-rank { display: grid; place-items: center; width: 26px; height: 26px; color: var(--green-deep); background: rgb(231, 242, 234); border-radius: 50%; font-size: 12px; font-weight: 900; }

.leader-name { min-width: 0px; }

.leader-name strong, .leader-name small { display: block; }

.leader-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.leader-name small { margin-top: 2px; color: var(--muted); }

.leader-value { color: var(--green-deep); font-size: 13px; white-space: nowrap; }

.leader-list .leader-empty { display: block; color: var(--muted); font-weight: 700; }

.stats-overview { min-width: 0px; }

.stats-table-panel { min-width: 0px; padding: 0px; overflow: hidden; }

.stats-table-panel .panel-heading { padding: 16px; margin-bottom: 0px; border-bottom: 1px solid var(--line); }

.stats-table-wrap { max-height: calc(-220px + 100vh); overflow: auto; }

.stats-table-panel td { white-space: normal; vertical-align: top; }

.stats-player-button, .leader-player-button { padding: 0px; color: inherit; background: transparent; border: 0px; box-shadow: none; text-align: left; }

.stats-player-button { font-weight: 900; text-decoration: underline rgb(169, 198, 181); text-underline-offset: 3px; }

.stats-player-button:hover, .leader-player-button:hover { color: var(--green-deep); background: transparent; transform: none; }

.player-stats-dialog { width: min(1040px, -32px + 100vw); max-height: calc(-32px + 100vh); padding: 0px; overflow-x: hidden; color: var(--ink); background: var(--panel, #ffffff); border: 1px solid var(--line); border-radius: 16px; box-shadow: rgba(18, 49, 37, 0.28) 0px 24px 80px; }

.player-stats-dialog.is-maximized { width: calc(-16px + 100vw); max-width: none; height: calc(-16px + 100vh); max-height: none; }

.player-stats-dialog::backdrop { background: rgba(13, 31, 24, 0.62); }

.player-stats-dialog-shell { display: grid; gap: 18px; min-width: 0px; padding: 22px; }

.player-stats-dialog.is-maximized .player-stats-dialog-shell { min-height: 100%; align-content: start; }

.player-stats-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }

.player-stats-dialog-heading > div:first-child, #playerStatsDialogBody, .player-stats-profile, .player-stats-profile > section { min-width: 0px; }

.player-stats-dialog-heading h2 { margin: 2px 0px 4px; }

.player-stats-dialog-actions { display: flex; flex: 0 0 auto; gap: 8px; }

.dialog-close-button { flex: 0 0 auto; }

.player-stats-profile { display: grid; gap: 16px; }

.player-cricclubs-sync { display: grid; grid-template-columns: minmax(190px, 1.3fr) repeat(3, minmax(120px, 0.7fr)) auto; gap: 10px; align-items: end; padding: 14px; background: rgb(238, 246, 241); border: 1px solid rgb(207, 225, 213); border-radius: 10px; }

.player-cricclubs-sync > div { display: grid; gap: 4px; }

.player-cricclubs-sync input { min-width: 0px; width: 100%; }

.player-cricclubs-sync #playerCricClubsSyncStatus { grid-column: 1 / -1; }

.player-cricclubs-records { display: grid; grid-template-columns: minmax(190px, 0.8fr) minmax(0px, 2fr); gap: 14px; align-items: start; padding: 14px; border: 1px solid rgb(215, 230, 220); border-radius: 10px; background: rgb(247, 251, 248); }

.player-cricclubs-records > div:first-child { display: grid; gap: 4px; }

.player-cricclubs-record-links { display: grid; gap: 8px; }

.player-cricclubs-record-links article { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 8px; align-items: center; }

.player-cricclubs-record-links a { display: inline-flex; justify-content: center; padding: 8px 10px; border: 1px solid rgb(184, 206, 192); border-radius: 8px; color: var(--green-900); background: rgb(255, 255, 255); font-weight: 700; text-decoration: none; }

.player-cricclubs-record-links a:hover { background: rgb(237, 246, 240); }

.player-stats-kpis { display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 10px; }

.player-stats-kpis article { display: grid; gap: 5px; min-width: 0px; padding: 13px; background: rgb(247, 250, 247); border: 1px solid var(--line); border-radius: 10px; }

.player-stats-kpis span, .player-stats-section-label { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }

.player-stats-kpis strong { font-size: 24px; line-height: 1.1; }

.player-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; }

.player-stats-card { display: grid; gap: 10px; align-content: start; padding: 16px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 10px; }

.player-stats-card h3 { margin: 0px; font-size: 17px; }

.player-stats-metric-list { display: grid; gap: 7px; margin: 0px; }

.player-stats-metric-list div { display: flex; justify-content: space-between; gap: 16px; padding-top: 7px; border-top: 1px solid var(--line); }

.player-stats-metric-list dt { color: var(--muted); }

.player-stats-metric-list dd { margin: 0px; font-weight: 900; text-align: right; }

.player-stats-note { margin: 0px; padding: 12px 14px; color: rgb(96, 67, 19); background: rgb(255, 248, 232); border: 1px solid rgb(236, 211, 154); border-radius: 8px; line-height: 1.45; }

.player-stats-positions { display: flex; flex-wrap: wrap; gap: 7px; }

.player-stats-positions span { padding: 5px 8px; color: var(--green-deep); background: rgb(231, 242, 234); border-radius: 999px; font-size: 12px; font-weight: 900; }

.player-stats-breakdown { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }

.player-stats-breakdown table { min-width: 780px; margin: 0px; }

.player-stats-breakdown th { position: sticky; top: 0px; z-index: 1; background: rgb(244, 247, 244); }

.player-stats-view-switcher { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 10px; background: rgb(244, 247, 244); border: 1px solid var(--line); border-radius: 10px; }

.player-stats-view-switcher > button.active { color: rgb(255, 255, 255); background: var(--green-deep); }

.player-stats-view-switcher label { display: grid; grid-template-columns: auto minmax(240px, 1fr); gap: 10px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }

.player-match-workspace { display: grid; gap: 14px; }

.player-match-context, .player-match-list-heading, .player-match-navigation { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.player-match-context { padding: 16px; color: rgb(255, 255, 255); background: linear-gradient(135deg, var(--green-deep), #2e7255); border-radius: 12px; }

.player-match-context h3, .player-match-context p, .player-match-list-heading h3 { margin: 3px 0px 0px; }

.player-match-context p { color: rgb(217, 238, 226); }

.player-match-context .player-stats-section-label { color: rgb(195, 223, 207); }

.match-status-badge { flex: 0 0 auto; padding: 6px 10px; color: rgb(22, 69, 47); background: rgb(225, 241, 231); border-radius: 999px; font-size: 12px; font-weight: 900; }

.match-status-badge.is-live { color: rgb(125, 49, 30); background: rgb(255, 240, 223); }

.match-status-badge.is-partial { color: rgb(96, 67, 19); background: rgb(255, 248, 232); }

.player-match-navigation { justify-content: flex-end; }

.player-match-navigation span { color: var(--muted); font-size: 12px; font-weight: 800; }

.player-match-context-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 10px; }

.player-match-context-grid article { display: grid; gap: 5px; padding: 12px; background: rgb(247, 250, 247); border: 1px solid var(--line); border-radius: 9px; }

.player-match-context-grid span { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }

.player-match-discipline-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; }

.player-match-comparison-table { overflow: auto; border: 1px solid var(--line); border-radius: 10px; }

.player-match-comparison-table table { min-width: 620px; margin: 0px; }

.player-match-comparison-table th { text-align: left; }

.match-comparison { color: var(--muted); font-weight: 800; }

.match-comparison.is-favorable { color: var(--green-deep); }

.player-match-comparison-note { margin: 8px 2px 0px; }

.player-match-list-heading > span { color: var(--muted); font-size: 12px; font-weight: 800; }

.player-match-list tr.is-selected td { background: rgb(238, 246, 241); }

.player-match-empty { display: grid; gap: 4px; padding: 16px; color: var(--muted); background: rgb(247, 250, 247); border: 1px dashed rgb(185, 203, 191); border-radius: 10px; }

.player-match-empty strong { color: var(--ink); }

.stat-stack { display: grid; gap: 4px; }

.stat-stack strong { font-weight: 900; }

.stat-stack small, .stats-columns { color: var(--muted); line-height: 1.4; }

.stats-import-panel { display: grid; gap: 12px; padding: 16px; }

.stats-import-panel h3 { margin: 0px; }

.pending-stats { display: grid; gap: 10px; padding: 16px; min-width: 0px; }

.pending-stat-list { display: grid; gap: 10px; max-height: calc(-210px + 100vh); overflow: auto; }

.stats-import-workspace { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0px, 1fr); gap: 16px; align-items: start; }

#statsView[data-subview="overview"] .stats-import-workspace, #statsView[data-subview="import"] .stats-overview { display: none; }

.pending-stat-row { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgb(251, 252, 250); }

.pending-stat-row strong, .pending-stat-row small { display: block; }

.pending-stat-row small { color: var(--muted); line-height: 1.35; }

.pending-stat-row input[type="search"] { width: 100%; min-width: 0px; background: rgb(255, 255, 255); }

.pending-player-selected { display: grid; gap: 3px; min-height: 42px; padding: 9px 10px; color: var(--muted); background: rgb(238, 246, 241); border: 1px solid rgb(207, 225, 213); border-radius: 8px; }

.pending-player-selected strong, .pending-player-selected small { display: block; }

.pending-player-selected strong { color: var(--green-deep); }

.pending-player-search-results { display: grid; gap: 6px; }

.pending-player-search-result { display: grid; gap: 3px; width: 100%; padding: 9px 10px; color: var(--ink); background: rgb(255, 255, 255); border: 1px solid var(--line); text-align: left; }

.pending-player-search-result:hover { color: var(--green-deep); background: rgb(242, 248, 244); }

.pending-player-search-result strong, .pending-player-search-result small { display: block; }

.pending-player-search-result small { color: var(--muted); }

.empty-state { display: grid; gap: 4px; padding: 18px; color: var(--muted); }

.empty-state strong { color: var(--ink); }

.squad-tools h3 { margin: 0px 0px 10px; }

.tool-drawer { border-top: 1px solid var(--line); }

.tool-drawer summary { display: flex; align-items: center; justify-content: space-between; min-height: 42px; cursor: pointer; color: var(--ink); font-weight: 900; }

.tool-drawer summary::marker { color: var(--green); }

.tool-drawer[open] { padding-bottom: 12px; }

.tool-drawer[open] summary { color: var(--green); }

.player-form, .bulk-form { display: grid; gap: 10px; }

.player-form { grid-template-columns: repeat(2, minmax(120px, 1fr)); }

.player-form select[multiple] { min-height: 92px; }

.player-form h3, .syntax-help, .player-form select[multiple], .player-form .subtle, .bulk-form .subtle, .bulk-form textarea { grid-column: 1 / -1; }

.player-form label { display: flex; align-items: center; gap: 6px; min-height: 38px; color: var(--muted); font-weight: 800; }

.syntax-help { margin: 0px; color: var(--muted); font-size: 13px; line-height: 1.4; }

.bulk-form textarea { min-height: 116px; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 12px; }

.schedule-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; padding: 0px; margin: 0px; }

.league-import, .league-rename { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; padding: 0px; margin: 0px; }

.schedule-file-form { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; padding: 0px; margin: 0px; }

.schedule-file-form h3, .schedule-file-form .syntax-help, .schedule-file-form .subtle { grid-column: 1 / -1; }

.league-import h3, .league-rename h3 { grid-column: 1 / -1; margin: 0px; }

.league-import .subtle, .league-rename .subtle { grid-column: 1 / -1; min-height: 20px; }

.schedule-form h3 { grid-column: 1 / -1; }

.schedule-layout { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(320px, 360px); gap: 16px; align-items: start; }

#scheduleView[data-subview="fixtures"] .schedule-layout, #scheduleView[data-subview="add"] .schedule-layout, #scheduleView[data-subview="tools"] .schedule-layout { grid-template-columns: 1fr; }

#scheduleView[data-subview="fixtures"] .schedule-sidebar, #scheduleView[data-subview="add"] .toolbar, #scheduleView[data-subview="add"] .schedule-main, #scheduleView[data-subview="add"] .schedule-tools, #scheduleView[data-subview="tools"] .toolbar, #scheduleView[data-subview="tools"] .schedule-main, #scheduleView[data-subview="tools"] .schedule-editor { display: none; }

#scheduleView[data-subview="add"] .schedule-sidebar, #scheduleView[data-subview="tools"] .schedule-sidebar { position: static; width: min(620px, 100%); }

.schedule-sidebar { display: grid; gap: 14px; position: sticky; top: 18px; }

.schedule-main { max-height: calc(-190px + 100vh); overflow: auto; padding-right: 4px; }

.schedule-editor, .schedule-tools { padding: 16px; }

.schedule-editor .schedule-form { grid-template-columns: 1fr; }

.schedule-tools h3 { margin: 0px 0px 10px; }

.schedule-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

.match-card { display: grid; gap: 8px; padding: 16px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--soft-shadow); }

.match-card a { color: var(--green); font-weight: 800; }

.league-schedule-group { display: grid; gap: 12px; min-width: 0; }
.league-color-green { --league-hue: 150; }
.league-color-blue { --league-hue: 215; }
.league-color-purple { --league-hue: 275; }
.league-color-amber { --league-hue: 38; }
.league-color-teal { --league-hue: 185; }
.league-color-rose { --league-hue: 340; }
.league-schedule-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 8px; background: hsl(var(--league-hue) 42% 92%); border-left: 5px solid hsl(var(--league-hue) 48% 36%); color: hsl(var(--league-hue) 40% 24%); }
.league-schedule-heading h3 { margin: 0; font-size: 17px; }
.league-schedule-heading span { font-size: 13px; white-space: nowrap; }
.league-match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; align-items: start; }
.league-match-card { min-width: 0; height: 228px; grid-template-rows: 28px 38px 46px 44px; align-content: start; border-top: 6px solid hsl(var(--league-hue) 48% 36%); background: hsl(var(--league-hue) 55% 92%); }
.league-match-card .role-chip { justify-self: start; background: hsl(var(--league-hue) 42% 90%); color: hsl(var(--league-hue) 40% 24%); }
.league-match-card .match-card-context, .league-match-card .match-card-opponent, .league-match-card .match-card-details { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.35; }
.league-match-card .match-card-context { color: hsl(var(--league-hue) 40% 24%); font-size: 13px; }
.league-match-card .match-card-opponent { font-size: 16px; }
.league-match-card .match-card-details { font-size: 13px; }

.scorecard-shell { display: grid; gap: 14px; }

.scorecard-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto auto 150px auto; gap: 10px; align-items: center; padding: 14px; }

.scorecard-toolbar .subtle { grid-column: 1 / -1; }

.scorecard-frame-panel { height: calc(-230px + 100vh); min-height: 460px; }

#scorecardFrame { width: 100%; height: 100%; border: 0px; background: rgb(255, 255, 255); }

.instructions-layout { max-width: 980px; }

.instructions-panel { overflow: visible; }

.instructions-content { display: grid; gap: 18px; padding: 20px 22px 24px; line-height: 1.55; }

.instructions-content h4 { margin: 8px 0px -8px; font-size: 17px; }

.instructions-content p, .instructions-content ol { margin: 0px; color: rgb(52, 68, 59); }

.instructions-content ol { padding-left: 22px; }

.instructions-content li + li { margin-top: 6px; }

@media (max-width: 1120px) {
  .selection-grid { grid-template-columns: 1fr; }
  .share-grid { grid-template-columns: 1fr; }
  .xi-panel { position: static; max-height: none; }
  .xi-list { min-height: 320px; max-height: none; }
  #selectionView .table-wrap { max-height: 560px; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0px; z-index: 15; display: grid; gap: 12px; padding: 14px 18px; }
  .sidebar-head { width: 100%; align-items: center; }
  .sidebar .brand-home h1 { font-size: 20px; }
  .sidebar .brand-home small { margin-top: 4px; }
  .mobile-nav-toggle { display: inline-flex; }
  .sidebar nav, .sidebar .sidebar-bottom { display: none; }
  .sidebar.nav-open nav, .sidebar.nav-open .sidebar-bottom { display: grid; }
  nav { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .season-card { margin-top: 0px; }
  .topbar { grid-template-columns: 1fr; display: grid; }
  .match-strip, .selection-grid, .squad-layout, .schedule-layout, .leader-grid, .stats-import-workspace, .league-import, .league-rename, .schedule-file-form, .schedule-form, .scorecard-toolbar { grid-template-columns: 1fr; }
  .player-stats-kpis { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .player-stats-grid { grid-template-columns: 1fr; }
  .player-match-discipline-grid { grid-template-columns: 1fr; }
  .player-match-context-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .player-cricclubs-sync { grid-template-columns: 1fr 1fr; }
  .player-cricclubs-sync > div, .player-cricclubs-sync #playerCricClubsSyncStatus { grid-column: 1 / -1; }
  .player-cricclubs-records { grid-template-columns: 1fr; }
  .squad-sidebar, .schedule-sidebar, .stats-import-panel { position: static; }
  .player-form { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .xi-panel { position: static; }
}

@media (max-width: 620px) {
  main { padding: 14px 14px 92px; }
  .sidebar { padding: 12px 14px; }
  .top-actions, .toolbar, .panel-heading { align-items: stretch; flex-direction: column; }
  .app-shell[data-active-view="selection"] .topbar { margin-bottom: 12px; }
  #selectionView { scroll-margin-top: 92px; }
  .app-shell[data-active-view="selection"] .top-actions.chooser-open { gap: 10px; }
  .top-actions .selection-filter { flex: 0 0 auto; min-width: 100%; }
  .top-actions select, .selection-filter select { width: 100%; height: 48px; min-height: 48px; }
  .match-context-shell { align-items: stretch; gap: 10px; padding: 12px; }
  .match-context-copy strong { font-size: 16px; white-space: normal; }
  #matchContextToggle { flex: 0 0 auto; min-height: 44px; }
  .selection-steps { gap: 3px; padding: 4px; }
  .selection-steps button { flex-direction: column; gap: 3px; min-height: 58px; padding: 5px; font-size: 11px; }
  .selection-steps button span { width: 24px; height: 24px; }
  .selection-step-panel:not(.active-step) { display: none; }
  .panel-heading { gap: 10px; }
  .panel-heading #recommendBtn { width: 100%; }
  .segmented { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .segmented button { min-height: 44px; padding-inline: 6px; }
  #selectionView .table-wrap { height: calc(-390px + 100vh); min-height: 340px; max-height: 520px; overflow: auto; overscroll-behavior: contain; }
  #selectionView table, #selectionView tbody { display: block; }
  #selectionView thead { display: none; }
  #selectionView tbody tr { display: grid; grid-template-columns: minmax(0px, 1fr) auto; padding: 12px; border-bottom: 1px solid var(--line); }
  #selectionView tbody td { padding: 2px 0px; border: 0px; white-space: normal; }
  #selectionView tbody td:nth-child(1), #selectionView tbody td:nth-child(2), #selectionView tbody td:nth-child(3) { grid-column: 1; }
  #selectionView tbody td:nth-child(4) { grid-area: 1 / 2 / span 3; align-self: center; padding-left: 10px; }
  #selectionView .poll-select { min-width: 118px; min-height: 44px; }
  #selectionView .role-chip, #selectionView .quota { min-height: 24px; padding-block: 2px; }
  .xi-summary { align-items: flex-start; flex-direction: column; }
  .xi-list { min-height: 0px; }
  .share-grid { padding: 12px; }
  .export-actions { grid-template-columns: 1fr 1fr; }
  .export-actions button, .export-actions .download-link, .approval-actions button { min-height: 44px; }
  .selection-action-bar { position: fixed; right: 0px; bottom: 0px; left: 0px; grid-template-columns: auto 1fr auto; margin: 0px; padding: 10px 14px; border-width: 1px 0px 0px; border-radius: 0px; }
  .selection-action-bar span { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .selection-action-bar #saveBtn { grid-column: 3; }
  .selection-policy-form, .selection-policy-preview ol { grid-template-columns: 1fr; }
  #matchSelect, .selection-filter, .xi-tools select, .toolbar input { min-width: 100%; width: 100%; }
  .stats-toolbar input { flex: 0 0 auto; }
  .xi-player { display: grid; }
  .xi-actions { flex-wrap: wrap; }
  .stat-kpis { grid-template-columns: 1fr; }
  .player-stats-dialog { width: calc(-16px + 100vw); max-height: calc(-16px + 100vh); }
  .player-stats-dialog-shell { padding: 16px; }
  .player-stats-dialog-heading { align-items: stretch; flex-direction: column; }
  .player-stats-dialog-actions { width: 100%; }
  .player-stats-dialog-actions button { flex: 1 1 0px; }
  .player-stats-kpis { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .player-stats-view-switcher, .player-match-context, .player-match-list-heading { align-items: stretch; flex-direction: column; }
  .player-stats-view-switcher label { grid-template-columns: 1fr; }
  .player-stats-view-switcher select { width: 100%; }
  .player-match-context-grid { grid-template-columns: 1fr; }
  .player-cricclubs-sync { grid-template-columns: 1fr; }
  .player-cricclubs-sync > div, .player-cricclubs-sync #playerCricClubsSyncStatus { grid-column: auto; }
  .player-cricclubs-record-links article { grid-template-columns: 1fr; }
  .stats-notice { align-items: stretch; flex-direction: column; }
  nav { width: 100%; grid-template-columns: 1fr; }
  .player-form { grid-template-columns: 1fr; }
}

html { background: var(--paper); scroll-behavior: smooth; }

body { min-width: 320px; background: radial-gradient(circle at 76% -8%, rgba(216, 232, 223, 0.65), transparent 30rem),
    var(--paper); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; }

button, input, select, textarea, .download-link { transition: border-color 160ms, background-color 160ms, color 160ms, box-shadow 160ms, transform 160ms; }

button, select, input, textarea { border-color: var(--line); border-radius: 12px; }

button { min-height: 42px; font-weight: 650; letter-spacing: -0.01em; }

button:not(:disabled):hover, .download-link:hover { border-color: rgb(204, 214, 208); box-shadow: rgba(20, 40, 31, 0.07) 0px 4px 14px; }

button:not(:disabled):active, .download-link:active { transform: scale(0.985); }

button.primary { border-color: var(--green); background: var(--green); box-shadow: rgba(22, 107, 79, 0.18) 0px 6px 18px; }

button.primary:not(:disabled):hover { border-color: var(--green-strong); background: var(--green-strong); box-shadow: rgba(22, 107, 79, 0.24) 0px 9px 24px; }

select, input { min-height: 44px; }

textarea { line-height: 1.45; }

button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: rgba(22, 107, 79, 0.2) solid 3px; outline-offset: 2px; }

.eyebrow { margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: 0.105em; }

.brand-mark { display: inline-grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 12px; color: rgb(255, 255, 255); background: linear-gradient(145deg, rgb(27, 123, 92), rgb(13, 75, 56)); box-shadow: rgba(255, 255, 255, 0.22) 0px 1px inset, rgba(3, 29, 20, 0.2) 0px 8px 22px; font-size: 13px; font-weight: 850; letter-spacing: -0.04em; }

.landing { padding: clamp(28px, 6vw, 84px); background: rgb(11, 59, 46); isolation: isolate; }

.landing::after { position: absolute; inset: 0px; z-index: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 72% 46%, transparent 0px, transparent 12rem, rgba(4, 26, 19, 0.11) 28rem, transparent 48rem), linear-gradient(90deg, rgba(4, 26, 19, 0.38) 0%, transparent 58%); }

#landingPitch { opacity: 0.72; filter: saturate(0.76) contrast(1.04); }

.landing-copy { z-index: 2; gap: 20px; max-width: 760px; }

.landing-brand, .auth-brand { display: flex; align-items: center; gap: 11px; }

.landing-brand { margin-bottom: clamp(20px, 4vh, 46px); }

.landing-brand .brand-mark { color: rgb(12, 75, 55); background: rgb(244, 248, 245); box-shadow: rgba(3, 29, 20, 0.2) 0px 10px 28px; }

.landing-brand strong { color: rgb(255, 255, 255); font-size: 18px; letter-spacing: -0.03em; }

.landing-copy .eyebrow { margin: 0px 0px -6px; color: rgb(185, 209, 198); opacity: 1; }

.landing-copy h1 { max-width: 760px; font-size: clamp(48px, 7.3vw, 94px); line-height: 0.96; letter-spacing: -0.055em; }

.landing-copy p:not(.eyebrow) { max-width: 580px; color: rgb(213, 227, 220); font-size: clamp(18px, 1.8vw, 23px); line-height: 1.42; letter-spacing: -0.018em; }

.landing-actions { margin-top: 8px; }

.landing-actions button.primary { min-height: 54px; padding: 0px 22px; border-color: rgb(244, 248, 245); border-radius: 16px; color: rgb(12, 75, 55); background: rgb(244, 248, 245); box-shadow: rgba(3, 29, 20, 0.24) 0px 12px 34px; font-size: 16px; }

.landing-actions button.primary:hover { border-color: rgb(255, 255, 255); background: rgb(255, 255, 255); box-shadow: rgba(3, 29, 20, 0.3) 0px 16px 40px; transform: translateY(-1px); }

.landing-actions button span { margin-left: 9px; font-size: 19px; }

.landing-ticker { right: clamp(24px, 5vw, 78px); bottom: clamp(24px, 5vw, 68px); z-index: 2; display: grid; justify-items: stretch; gap: 8px; width: min(250px, -48px + 100vw); }

.landing-ticker span { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-color: rgba(255, 255, 255, 0.15); border-radius: 14px; background: rgba(6, 42, 31, 0.3); backdrop-filter: blur(14px); font-size: 12px; font-weight: 650; }

.landing-ticker b { display: inline-grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border-radius: 8px; color: rgb(22, 77, 60); background: rgba(255, 255, 255, 0.9); font-size: 11px; }

.login-overlay { padding: 24px; background: rgba(8, 40, 30, 0.84); backdrop-filter: blur(18px) saturate(0.8); }

.login-dialog, .setup-dialog { width: min(470px, 100%); padding: 32px; border-color: rgba(255, 255, 255, 0.62); border-radius: 24px; box-shadow: rgba(3, 24, 17, 0.35) 0px 32px 90px; }

.login-dialog { gap: 12px; }

.auth-brand { margin-bottom: 10px; }

.auth-brand strong { font-size: 17px; letter-spacing: -0.03em; }

.login-dialog > .eyebrow { margin: 0px 0px -6px; }

.login-dialog h2 { font-size: 30px; line-height: 1.08; letter-spacing: -0.04em; }

.auth-helper { color: var(--muted); line-height: 1.45; margin: -4px 0px 7px !important; }

.auth-tabs { gap: 4px; margin: 4px 0px 3px; padding: 4px; border-radius: 14px; background: rgb(241, 244, 242); }

.auth-tabs button { min-height: 38px; border: 0px; border-radius: 10px; background: transparent; font-size: 13px; }

.auth-tabs button.active { color: var(--ink); background: rgb(255, 255, 255); box-shadow: rgba(20, 40, 31, 0.08) 0px 3px 12px; }

.auth-form { gap: 9px; }

.auth-form input, .auth-form select { min-height: 50px; padding-inline: 14px; background: rgb(251, 252, 251); }

.auth-form button.primary { min-height: 50px; margin-top: 3px; border-radius: 14px; }

.auth-status { margin-top: 3px; font-size: 13px; line-height: 1.45; }

.app-shell { grid-template-columns: 248px minmax(0px, 1fr); }

.sidebar { position: sticky; top: 0px; z-index: 14; gap: 10px; height: 100vh; padding: 24px 16px 18px; overflow-y: auto; color: rgb(245, 248, 246); border: 0px; background: radial-gradient(circle at 10% 2%, rgba(61, 132, 103, 0.18), transparent 16rem),
    var(--green-deep); }

.sidebar-head { margin-bottom: 22px; }

.brand-home { display: flex; align-items: center; gap: 11px; min-width: 0px; }

.brand-home .brand-mark { width: 38px; height: 38px; flex-basis: 38px; border: 1px solid rgba(255, 255, 255, 0.12); }

.brand-copy { display: grid; min-width: 0px; gap: 2px; }

.sidebar .brand-home h1 { font-size: 18px; line-height: 1; letter-spacing: -0.035em; }

.sidebar .brand-home small { overflow: hidden; margin: 0px; color: rgb(174, 191, 183); font-size: 11px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }

.brand-home:hover h1, .brand-home:focus-visible h1 { color: rgb(255, 255, 255); }

.nav-label { margin: 7px 10px 1px; color: rgb(127, 152, 141); font-size: 10px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }

.sidebar nav { gap: 3px; }

.nav-button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0px 11px; border: 0px; border-radius: 12px; color: rgb(200, 212, 207); background: transparent; font-size: 14px; font-weight: 590; }

.nav-button:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.055); box-shadow: none; }

.nav-button.active, .support-button.active { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.11); box-shadow: rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset; font-weight: 680; }

.nav-icon { display: inline-grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 8px; color: rgb(159, 179, 170); font-size: 15px; font-weight: 750; }

.nav-button.active .nav-icon { color: rgb(223, 241, 231); background: rgba(96, 176, 139, 0.16); }

.live-icon::before { width: 7px; height: 7px; border-radius: 50%; content: ""; background: rgb(112, 211, 159); box-shadow: rgba(112, 211, 159, 0.1) 0px 0px 0px 4px; }

.subnav { gap: 2px; padding: 2px 0px 5px 45px; }

.subnav-button { min-height: 32px; padding: 0px 9px; border-radius: 9px; color: rgb(130, 153, 142); font-size: 12px; font-weight: 580; }

.subnav-button.active { color: rgb(220, 231, 226); border-color: transparent; background: rgba(255, 255, 255, 0.07); }

.sidebar-bottom { gap: 3px; }

.support-button, .logout-button { color: rgb(174, 191, 183); border: 0px; background: transparent; }

.logout-button { margin-top: 2px; }

.season-card { gap: 4px; margin-top: 16px; padding: 14px; border-color: rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }

.season-card-label { color: rgb(141, 162, 151); font-size: 10px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; }

.season-card strong { color: rgb(243, 247, 245); font-size: 19px; letter-spacing: -0.03em; }

.season-card small { margin: 0px; color: rgb(135, 157, 146); font-size: 11px; font-weight: 500; }

.mobile-nav-toggle { min-height: 40px; gap: 7px; border: 0px; border-radius: 11px; color: rgb(237, 245, 241); background: rgba(255, 255, 255, 0.08); }

main { min-height: 100vh; padding: 34px clamp(24px, 3.4vw, 52px) 42px; }

main > * { width: min(1240px, 100%); margin-right: auto; margin-left: auto; }

.topbar { margin-bottom: 24px; }

.topbar .eyebrow { margin-bottom: 5px; }

.topbar h2 { font-size: clamp(29px, 3vw, 38px); line-height: 1; letter-spacing: -0.045em; }

.top-actions, .toolbar { border-color: var(--line); border-radius: 16px; box-shadow: var(--soft-shadow); }

.top-actions { padding: 14px; }

.panel, .match-context-shell, .selection-steps, .pending-approvals-panel { border-color: var(--line); border-radius: 18px; box-shadow: var(--soft-shadow); }

.match-context-shell { margin-bottom: 12px; padding: 17px 18px; }

.match-context-copy { gap: 5px; }

.match-context-copy strong { font-size: 18px; letter-spacing: -0.025em; }

.match-context-copy span { font-size: 13px; line-height: 1.35; }

#matchContextToggle { flex: 0 0 auto; padding: 0px 15px; color: var(--green-strong); border-color: rgb(220, 229, 223); background: rgb(248, 250, 249); }

.selection-steps { gap: 5px; margin-bottom: 18px; padding: 5px; background: rgba(255, 255, 255, 0.76); backdrop-filter: blur(14px); }

.selection-steps button { min-height: 48px; border-radius: 13px; font-size: 14px; font-weight: 620; }

.selection-steps button span { width: 25px; height: 25px; border-color: rgb(223, 229, 225); font-size: 12px; }

.selection-steps button.active { color: var(--green-strong); background: rgb(237, 246, 241); box-shadow: rgba(22, 107, 79, 0.04) 0px 0px 0px 1px inset; }

.selection-grid { display: block; }

#selectionView .selection-step-panel:not(.active-step) { display: none; }

#selectionView .selection-step-panel.active-step { display: block; animation: 180ms ease-out 0s 1 normal both running step-in; }

@keyframes step-in { 
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.panel-heading { padding: 19px 20px; background: rgb(255, 255, 255); }

.panel-heading .eyebrow { margin-bottom: 5px; }

.panel h3, .schedule-form h3 { font-size: 20px; letter-spacing: -0.025em; }

.segmented { gap: 2px; padding: 4px; border-radius: 12px; background: rgb(240, 243, 241); }

.segmented button { min-height: 34px; padding-inline: 13px; border-radius: 9px; color: var(--muted); font-size: 12px; }

.segmented button.active { color: var(--ink); box-shadow: rgba(20, 40, 31, 0.08) 0px 2px 7px; }

#selectionView .table-wrap { min-height: 300px; max-height: min(56vh, 620px); }

th, td { padding: 14px 18px; }

th { color: rgb(123, 134, 128); background: rgb(249, 250, 249); font-size: 10px; font-weight: 750; letter-spacing: 0.07em; }

tbody tr:hover { background: rgb(248, 251, 249); }

.name-cell strong { font-size: 14px; letter-spacing: -0.01em; }

.name-cell small { font-size: 12px; }

.quota, .balance-pill, .role-chip, .status-chip { border-radius: 999px; background: rgb(238, 245, 241); font-size: 11px; font-weight: 680; }

.poll-select { min-width: 140px; border-color: rgb(220, 228, 223); background: rgb(251, 252, 251); }

.poll-import { grid-template-columns: minmax(0px, 1fr) auto auto; padding: 16px 20px; background: rgb(250, 251, 250); }

.poll-import textarea { min-height: 74px; border-color: rgb(223, 229, 225); background: rgb(255, 255, 255); }

.xi-panel { grid-template-rows: auto auto auto auto; }

.xi-summary { padding: 15px 20px; color: var(--green-strong); background: rgb(245, 250, 247); }

.xi-tools { padding: 14px 20px; background: rgb(255, 255, 255); }

.xi-list { min-height: 330px; padding: 10px 22px 18px 48px; }

.xi-list li { padding: 14px 0px; }

.icon-button { border-radius: 9px; }

.share-panel { margin-top: 0px; }

.share-grid { gap: 18px; padding: 20px; }

.share-grid .approval-panel, .share-grid .export-panel { border-radius: 14px; }

.selection-action-bar { bottom: 18px; gap: 10px; margin-top: 18px; padding: 10px; border-color: rgba(217, 225, 220, 0.9); border-radius: 16px; background: rgba(255, 255, 255, 0.9); box-shadow: rgba(20, 40, 31, 0.15) 0px 18px 46px; backdrop-filter: blur(18px); }

.selection-action-bar span { padding-left: 4px; font-size: 13px; font-weight: 580; }

.selection-action-bar button { min-height: 46px; border-radius: 12px; }

.selection-action-bar button.primary { min-width: 150px; }

.toolbar { gap: 9px; padding: 13px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); }

.stat { border-radius: 15px; box-shadow: none; }

.stat strong { letter-spacing: -0.025em; }

.tool-drawer { border-radius: 13px; }

.download-link { border-radius: 10px; }

@media (max-width: 1120px) {
  .season-card { display: none; }
  .share-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0px; display: grid; height: auto; max-height: 100vh; padding: 12px 16px; overflow-y: auto; box-shadow: rgba(7, 31, 23, 0.18) 0px 8px 24px; }
  .sidebar-head { align-items: center; margin: 0px; }
  .brand-home .brand-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
  .sidebar .brand-home h1 { font-size: 17px; }
  .sidebar > .nav-label { display: none; }
  .sidebar.nav-open nav, .sidebar.nav-open .sidebar-bottom { display: grid; }
  .sidebar.nav-open nav { grid-template-columns: repeat(2, minmax(0px, 1fr)); padding-top: 8px; }
  .sidebar.nav-open .subnav { grid-column: 1 / -1; }
  main { padding-top: 26px; }
}

@media (max-width: 760px) {
  .landing-copy h1 { font-size: clamp(44px, 14vw, 68px); }
  .landing-ticker { display: none; }
  .login-dialog, .setup-dialog { padding: 24px; border-radius: 20px; }
  .auth-row { grid-template-columns: 1fr; }
  .player-stats-kpis { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}

@media (max-width: 620px) {
  main { padding: 20px 14px 104px; }
  .topbar { margin-bottom: 18px; }
  .topbar h2 { font-size: 30px; }
  .match-context-shell { display: grid; padding: 14px; border-radius: 16px; }
  #matchContextToggle { width: 100%; }
  .selection-steps { position: sticky; top: 70px; z-index: 9; border-radius: 15px; }
  .selection-steps button { min-height: 54px; padding: 4px; font-size: 10px; }
  .panel { border-radius: 16px; }
  .panel-heading { padding: 16px; }
  .segmented { width: 100%; }
  .segmented button { flex: 1 1 0px; padding-inline: 5px; }
  .poll-import { grid-template-columns: 1fr; padding: 14px 16px; }
  .poll-import textarea, .poll-import .subtle { grid-column: 1; }
  .selection-action-bar { position: fixed; right: 10px; bottom: 10px; left: 10px; grid-template-columns: auto minmax(0px, 1fr) auto; margin: 0px; padding: 8px; border-radius: 15px; }
  .selection-action-bar span { overflow: hidden; padding: 0px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .selection-action-bar button { min-height: 44px; padding-inline: 13px; }
  .selection-action-bar button.primary { min-width: 0px; }
  .share-grid { padding: 14px; }
  .export-actions { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}


/* Account and academy workspaces need a safe inset inside rounded cards. */
#profileView .profile-grid > .panel,
#academyAdminView .academy-admin-settings > .panel,
#academyAdminView .academy-admin-users > .panel {
  min-width: 0;
  padding: clamp(20px, 2.2vw, 28px);
}

#profileView .panel > .eyebrow,
#academyAdminView .panel > .eyebrow {
  margin: 0 0 6px;
}

#profileView .panel > h3,
#academyAdminView .panel > h3 {
  margin: 0;
}

#profileView .panel > .subtle,
#academyAdminView .panel > .subtle {
  margin: 10px 0 18px;
  line-height: 1.45;
}

#profileView .profile-form {
  margin-top: 18px;
}

#academySettingsForm {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

#academySettingsForm > label {
  min-width: 0;
}

#academySettingsForm > button {
  min-width: 180px;
}

#academySettingsStatus {
  grid-column: 1 / -1;
}

#cricClubsLeagueSettings {
  margin-top: 24px;
  padding-top: 22px;
}

#cricClubsLeagueForm > label,
#coachCreateForm > *,
#teamCreateForm > * {
  min-width: 0;
}

#coachCreateForm {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#coachCreateForm input[name="name"] {
  grid-column: 1 / 3;
}

#coachCreateForm input[name="email"] {
  grid-column: 3 / 5;
}

#coachCreateForm input[name="temporary_password"] {
  grid-column: 1 / 3;
}

#coachCreateForm select[name="team_ids"] {
  grid-column: 1 / 4;
  min-height: 88px;
}

#coachCreateForm > button {
  grid-column: 4;
  align-self: stretch;
}

#teamCreateForm {
  grid-template-columns: minmax(140px, 0.8fr) minmax(240px, 1.4fr) minmax(140px, 0.8fr) auto;
  gap: 12px;
}

#teamCreateForm > button {
  min-width: 190px;
}

#coachCreateStatus,
#teamCreateStatus {
  grid-column: 1 / -1;
}

.team-bulk-actions {
  padding-top: 4px;
}

@media (max-width: 1120px) {
  #coachCreateForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #coachCreateForm input[name="name"],
  #coachCreateForm input[name="email"],
  #coachCreateForm input[name="temporary_password"] {
    grid-column: auto;
  }

  #coachCreateForm select[name="team_ids"] {
    grid-column: 1;
  }

  #coachCreateForm > button {
    grid-column: 2;
  }

  #teamCreateForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #teamCreateForm > button {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  #profileView .profile-grid {
    grid-template-columns: 1fr;
  }

  #academySettingsForm,
  #coachCreateForm,
  #teamCreateForm {
    grid-template-columns: 1fr;
  }

  #academySettingsForm > button,
  #coachCreateForm input[name="name"],
  #coachCreateForm input[name="email"],
  #coachCreateForm input[name="temporary_password"],
  #coachCreateForm select[name="team_ids"],
  #coachCreateForm > button,
  #teamCreateForm > button {
    grid-column: 1;
    width: 100%;
    min-width: 0;
  }

  .cricclubs-league-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* SmartXI visual system */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ui-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 78% -8%, rgba(210, 228, 218, 0.62), transparent 31rem),
    var(--paper);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

body:has(.landing:not(.hidden)),
body:has(.login-overlay:not([hidden])) {
  overflow: hidden;
}

h1, h2, h3, h4, strong {
  text-wrap: balance;
}

button,
input,
select,
textarea,
.download-link {
  transition:
    color 160ms var(--ease-premium),
    background-color 160ms var(--ease-premium),
    border-color 160ms var(--ease-premium),
    box-shadow 160ms var(--ease-premium),
    transform 160ms var(--ease-premium),
    opacity 160ms var(--ease-premium);
}

button,
input,
select,
textarea {
  border-color: var(--line);
  border-radius: var(--radius-control);
}

button {
  min-height: 44px;
  padding-inline: 16px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  box-shadow: var(--control-shadow);
}

button:not(:disabled):hover,
.download-link:hover {
  border-color: var(--line-strong);
  box-shadow: 0 7px 20px rgba(20, 40, 31, 0.08);
}

button:not(:disabled):active,
.download-link:active {
  transform: scale(0.985);
}

button.primary {
  color: #ffffff;
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 8px 22px rgba(23, 105, 79, 0.2);
}

button.primary:not(:disabled):hover {
  border-color: var(--green-strong);
  background: var(--green-strong);
  box-shadow: 0 11px 28px rgba(23, 105, 79, 0.26);
  transform: translateY(-1px);
}

input,
select {
  min-height: 46px;
  padding-inline: 13px;
  background: #fbfcfb;
  box-shadow: inset 0 1px rgba(20, 40, 31, 0.015);
}

textarea {
  padding: 12px 13px;
  line-height: 1.5;
  background: #fbfcfb;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--line-strong);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(23, 105, 79, 0.46);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(23, 105, 79, 0.08);
  outline: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(23, 105, 79, 0.2);
  outline-offset: 2px;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
  opacity: 1;
}

.brand-mark {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 5px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: linear-gradient(145deg, #228064, #10533f);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 9px 24px rgba(3, 29, 20, 0.2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark .brand-bat {
  fill: currentColor;
  stroke: none;
  opacity: 0.9;
}

.brand-mark .brand-bat-handle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.brand-mark .brand-ball {
  fill: #d15a52;
  stroke: rgba(255, 255, 255, 0.78);
  stroke-width: 0.65;
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
  color: inherit;
  font-size: 18px;
  font-weight: 660;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}

.brand-wordmark strong {
  font-weight: 810;
}

.landing {
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(32px, 6vw, 84px);
  color: #f7faf8;
  background:
    radial-gradient(circle at 75% 30%, rgba(65, 144, 111, 0.22), transparent 25rem),
    linear-gradient(135deg, #082d22 0%, #0e4a38 56%, #0c3a2d 100%);
  isolation: isolate;
}

.landing::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent 5%, #000 70%, transparent 100%);
}

.landing::after {
  background: linear-gradient(90deg, rgba(4, 25, 19, 0.6) 0%, rgba(4, 25, 19, 0.12) 54%, transparent 76%);
}

.landing-copy {
  z-index: 3;
  gap: 22px;
  width: min(680px, 58vw);
  max-width: none;
}

.landing-brand,
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-brand {
  margin-bottom: clamp(24px, 4vh, 48px);
}

.landing-brand .brand-mark {
  color: var(--green-strong);
  border-color: rgba(255, 255, 255, 0.72);
  background: #f7faf8;
  box-shadow: 0 12px 32px rgba(3, 29, 20, 0.28);
}

.landing-brand .brand-wordmark {
  color: #ffffff;
  font-size: 19px;
}

.landing-copy .eyebrow {
  margin: 0 0 -8px;
  color: #b8d0c5;
}

.landing-copy h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(50px, 6.2vw, 84px);
  font-weight: 640;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.landing-actions {
  margin-top: 10px;
}

.landing-actions button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding-inline: 22px 18px;
  color: var(--green-strong);
  border-color: #f7faf8;
  border-radius: 15px;
  background: #f7faf8;
  box-shadow: 0 15px 38px rgba(3, 29, 20, 0.28);
  font-size: 15px;
}

.landing-actions button.primary:hover {
  color: #0a4332;
  border-color: #ffffff;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(3, 29, 20, 0.34);
}

.landing-visual {
  position: absolute;
  top: 50%;
  right: clamp(30px, 5vw, 84px);
  z-index: 1;
  width: min(46vw, 640px);
  transform: translateY(-53%);
  pointer-events: none;
}

.landing-visual svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.field-ring,
.field-pitch,
.field-crease,
.field-wicket,
.field-bat {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field-ring {
  stroke: rgba(231, 242, 236, 0.14);
  stroke-width: 1.5;
}

.field-ring-inner {
  stroke-dasharray: 5 13;
  transform-box: view-box;
  transform-origin: 370px 356px;
  animation: field-orbit 28s linear infinite;
}

.field-pitch {
  fill: rgba(239, 246, 241, 0.055);
  stroke: rgba(239, 246, 241, 0.27);
  stroke-width: 1.6;
}

.field-crease {
  stroke: rgba(239, 246, 241, 0.25);
  stroke-width: 1.4;
}

.field-wicket {
  stroke: rgba(247, 250, 248, 0.72);
  stroke-width: 2.7;
}

.field-bat-blade {
  stroke: rgba(218, 184, 102, 0.78);
  stroke-width: 12;
}

.field-bat-handle {
  stroke: rgba(239, 246, 241, 0.72);
  stroke-width: 4;
}

.field-ball {
  fill: #d15a52;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.24));
  transform-box: view-box;
  transform-origin: center;
  animation: ball-delivery 3.2s linear infinite alternate;
}

@keyframes field-orbit {
  to { transform: rotate(360deg); }
}

@keyframes ball-delivery {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-28px, -70px); }
  50% { transform: translate(-44px, -145px); }
  75% { transform: translate(-32px, -220px); }
  100% { transform: translate(0, -284px); }
}

.landing-ticker {
  right: clamp(26px, 5vw, 80px);
  bottom: clamp(22px, 4vw, 54px);
  z-index: 4;
  width: min(230px, calc(100vw - 52px));
  gap: 7px;
}

.landing-ticker span {
  padding: 9px 12px 9px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(5, 37, 28, 0.34);
  backdrop-filter: blur(14px);
  font-size: 11px;
  font-weight: 620;
}

.landing-ticker b {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
  border-radius: 7px;
  color: var(--green-strong);
  background: rgba(255, 255, 255, 0.92);
}

.login-overlay {
  background: rgba(6, 33, 25, 0.86);
  backdrop-filter: blur(20px) saturate(0.78);
}

.login-dialog,
.setup-dialog {
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-modal);
  box-shadow: 0 34px 96px rgba(3, 24, 17, 0.36);
}

.auth-brand .brand-wordmark {
  color: var(--ink);
}

.auth-tabs {
  border: 1px solid var(--line);
  background: #f1f4f2;
}

.auth-tabs button {
  box-shadow: none;
}

.auth-tabs button.active {
  box-shadow: 0 3px 12px rgba(20, 40, 31, 0.08);
}

.app-shell {
  grid-template-columns: 252px minmax(0, 1fr);
}

.sidebar {
  gap: 8px;
  padding: 22px 16px 18px;
  border-right: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(79, 155, 122, 0.16), transparent 17rem),
    var(--green-deep);
}

.sidebar-head {
  margin-bottom: 23px;
}

.brand-home {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.brand-home .brand-mark {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  padding: 4px;
}

.brand-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.sidebar .brand-home h1 {
  color: #f7faf8;
  font-size: 19px;
  letter-spacing: -0.045em;
}

.sidebar .brand-home small {
  margin: 0;
  color: #9eb6aa;
  font-size: 10px;
  font-weight: 540;
}

.nav-label {
  margin: 7px 11px 2px;
  color: #7f9c8e;
  font-size: 9px;
  font-weight: 740;
  letter-spacing: 0.15em;
}

.sidebar nav,
.sidebar-bottom {
  gap: 3px;
}

.nav-button {
  min-height: 45px;
  gap: 10px;
  padding-inline: 10px;
  color: #bed0c7;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 570;
}

.nav-button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

.nav-button.active,
.support-button.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.105);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
  font-weight: 660;
}

.nav-icon {
  display: inline-grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  color: #86a598;
  border-radius: 8px;
}

.nav-icon .ui-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.nav-button.active .nav-icon {
  color: #dff2e8;
  background: rgba(99, 181, 143, 0.15);
}

.live-icon::before {
  display: none;
}

.subnav {
  padding: 2px 0 5px 45px;
}

.subnav-button {
  min-height: 32px;
  color: #789487;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 560;
}

.subnav-button.active {
  color: #d9e7e0;
  background: rgba(255, 255, 255, 0.065);
}

.support-button,
.logout-button {
  color: #9eb5aa;
  background: transparent;
}

.season-card {
  margin-top: 16px;
  padding: 14px;
  border-color: rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.032);
}

.mobile-nav-toggle {
  gap: 7px;
  padding-inline: 12px;
  color: #edf5f1;
  border: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.mobile-nav-toggle .ui-icon {
  width: 18px;
  height: 18px;
}

.menu-close-icon {
  display: none;
}

.mobile-nav-toggle[aria-expanded="true"] .menu-open-icon {
  display: none;
}

.mobile-nav-toggle[aria-expanded="true"] .menu-close-icon {
  display: block;
}

main {
  padding: 36px clamp(24px, 3.5vw, 54px) 48px;
}

main > * {
  width: min(1240px, 100%);
}

.topbar {
  margin-bottom: 26px;
}

.topbar .eyebrow {
  margin-bottom: 6px;
}

.topbar h2 {
  font-size: clamp(30px, 3vw, 39px);
  font-weight: 640;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.top-actions,
.toolbar,
.match-context-shell,
.selection-steps,
.panel,
.pending-approvals-panel {
  border-color: var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--soft-shadow);
}

.top-actions {
  padding: 14px;
}

.panel {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--soft-shadow);
}

.panel-heading {
  padding: 18px 20px;
  border-bottom-color: var(--line);
  background: rgba(251, 252, 251, 0.82);
}

.panel-heading h3,
.panel > h3,
.schedule-form h3 {
  font-size: 20px;
  font-weight: 660;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.panel-heading .eyebrow {
  margin-bottom: 5px;
}

.match-context-shell {
  margin-bottom: 14px;
  padding: 18px 20px;
}

.match-context-copy strong {
  font-size: 18px;
  font-weight: 660;
}

.selection-steps {
  gap: 6px;
  padding: 7px;
}

.selection-steps button {
  border-radius: 12px;
  box-shadow: none;
}

.selection-steps button.active {
  color: var(--green-strong);
  background: var(--green-soft);
}

.selection-steps button span {
  border-color: var(--line-strong);
}

.stat {
  min-height: 80px;
  padding: 15px;
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
}

.stat span,
th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

th,
td {
  padding: 14px 16px;
}

th {
  background: #fafbfa;
}

tbody tr:hover {
  background: #fafcfb;
}

.segmented {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f0f4f1;
}

.segmented button {
  border-radius: 8px;
  box-shadow: none;
  font-weight: 600;
}

.segmented button.active {
  box-shadow: 0 3px 10px rgba(20, 40, 31, 0.08);
}

.quota,
.badge,
.status-pill {
  border-radius: 999px;
}

.poll-import,
.xi-summary {
  background: #fafcfa;
}

.selection-action-bar {
  border-color: var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 44px rgba(23, 32, 27, 0.14);
  backdrop-filter: blur(18px);
}

.tool-drawer,
.approval-panel,
.export-panel,
.share-grid .approval-panel,
.share-grid .export-panel,
.academy-team-row,
.coach-access-row,
.cricclubs-league-row {
  border-color: var(--line);
  border-radius: 14px;
}

.subtle,
.syntax-help,
.auth-helper {
  color: var(--muted);
  line-height: 1.48;
}

[role="status"]:not(:empty) {
  min-height: 20px;
}

button:disabled,
input:disabled,
select:disabled {
  color: #8e9892;
  background: #f5f7f5;
  opacity: 0.66;
}

@media (max-width: 1100px) {
  .landing-copy {
    width: min(650px, 66vw);
  }

  .landing-visual {
    right: -9vw;
    width: 54vw;
    opacity: 0.72;
  }
}

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

  .sidebar {
    padding: 13px 16px;
    border-radius: 0;
  }

  .sidebar-head {
    align-items: center;
    margin: 0;
  }

  .sidebar .brand-home h1 {
    font-size: 18px;
  }

  .sidebar.nav-open {
    padding-bottom: 16px;
    box-shadow: 0 18px 42px rgba(5, 28, 21, 0.24);
  }

  .sidebar.nav-open nav {
    gap: 4px;
  }

  .sidebar.nav-open .sidebar-bottom {
    padding-top: 4px;
  }

  main {
    padding-top: 28px;
  }
}

@media (max-width: 760px) {
  .landing {
    align-items: start;
    padding: 28px 24px 32px;
  }

  .landing-copy {
    gap: 20px;
    width: 100%;
    padding-top: 8vh;
  }

  .landing-brand {
    margin-bottom: 10vh;
  }

  .landing-copy h1 {
    max-width: 560px;
    font-size: clamp(46px, 13vw, 66px);
    line-height: 0.99;
  }

  .landing-visual {
    top: auto;
    right: -32vw;
    bottom: -17vh;
    width: 106vw;
    opacity: 0.28;
    transform: none;
  }

  .landing-ticker {
    display: grid;
    right: 24px;
    bottom: 26px;
    left: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto;
  }

  .landing-ticker span {
    justify-content: center;
    padding: 8px;
    text-align: center;
  }

  .landing-ticker b {
    display: none;
  }

  main {
    padding: 25px 15px 38px;
  }

  .topbar {
    margin-bottom: 20px;
  }

  .topbar h2 {
    font-size: 31px;
  }

  .panel,
  .match-context-shell,
  .selection-steps,
  .pending-approvals-panel {
    border-radius: 16px;
  }

  .panel-heading {
    padding: 17px;
  }

  .selection-action-bar {
    border-radius: 15px;
  }
}

@media (max-width: 560px) {
  .landing {
    padding-inline: 20px;
  }

  .landing-brand {
    margin-bottom: 9vh;
  }

  .landing-actions button.primary {
    width: 100%;
  }

  .landing-ticker {
    right: 20px;
    left: 20px;
    gap: 5px;
  }

  .landing-ticker span {
    min-width: 0;
    font-size: 10px;
    line-height: 1.25;
  }

  .brand-home .brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field-ring-inner,
  .field-ball {
    animation: none !important;
  }

  .field-ball {
    opacity: 0.9;
    transform: translate(-42px, -150px);
  }
}

/* Optional six-ball landing game. */
#playOverBtn { margin: 10px 0 0 8px; color: #fff; background: #ffffff16; border: 1px solid #ffffff55; min-height: 48px; }
#quickOver { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: clamp(16px, 4vw, 28px); border: 1px solid #c5dbd1; border-radius: 24px; color: #163b2e; background: #f5f9f6; box-shadow: 0 24px 90px #001e2870; }
#quickOver::backdrop { background: #031e19bb; }
.over-header, .over-score, .over-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.over-header h2 { font-size: clamp(21px, 4vw, 28px); line-height: 1.15; margin: 4px 0; }
#overInstructions, .over-note { color: #52695f; font-size: 14px; line-height: 1.5; }
.over-score { margin: 14px 0; font-size: 18px; }
.over-field { display: block; width: 100%; max-height: 34dvh; }
#overFeedback { min-height: 3em; margin: 14px 0; font-weight: 650; }
.over-controls button { min-height: 48px; flex: 1; }
.over-note { margin-bottom: 0; text-align: center; font-size: 12px; }
#quickOver button:focus-visible, #playOverBtn:focus-visible { outline: 3px solid #d89b21; outline-offset: 3px; }
#quickOver { width: min(920px, calc(100vw - 24px)); background: #102c25; color: #f1eee2; border-color: #587264; }
#quickOver .eyebrow { color: #ddc58c; }
#overInstructions, #quickOver .over-note { color: #b6c8bd; }
.over-stage { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid #ffffff18; }
.over-stage .over-field { width: 100%; max-height: none; aspect-ratio: 16 / 9; }
.over-live { position: absolute; top: 16px; left: 18px; color: #fff7e5; background: #12372cb3; padding: 7px 10px; border-radius: 5px; font-size: 10px; letter-spacing: .13em; }
.over-live b { color: #e8bb72; margin: 0 7px; }
#overRuns { font-size: 28px; }
#overBalls { font-size: 14px; color: #c1cfc5; }
#overFeedback { min-height: 1.5em; color: #f1d89c; }
#quickOver .over-controls .primary { background: #e9ce94; color: #15382d; border-color: #e9ce94; }
@media (max-width: 540px) { .over-header { align-items: flex-start; } .over-score { flex-wrap: wrap; } .over-live { top: 8px; left: 8px; font-size: 8px; padding: 4px 6px; } }

/* Annual season workspace */
.season-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:16px 0; }
.season-actions label { display:flex; align-items:center; gap:8px; }
.season-actions input[type=checkbox], .season-roster input[type=checkbox], .copy-team { width:auto; }
.season-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:16px; }
.season-roster { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; padding:14px 0; }
.season-roster label { display:flex; gap:8px; align-items:center; }
#seasonBody .panel { margin:16px 0; }
#seasonBody small { display:block; }
.season-sync-details { white-space:pre-wrap; overflow-wrap:anywhere; max-height:220px; overflow:auto; }
.progress-bars { display:grid; gap:12px; margin:24px 0; }
.progress-bars > div { display:grid; grid-template-columns:minmax(130px,1fr) 2fr 80px; gap:12px; align-items:center; }
.progress-bars meter { width:100%; height:24px; accent-color:var(--green,#167957); }
#seasonBody summary { cursor:pointer; padding:8px 0; }

.app-shell[data-active-view="seasons"] #managementFilters { display:none; }
#seasonsView > .panel > .season-actions, #seasonMessage, #seasonBody { margin-left:24px; margin-right:24px; }
.season-dialog { width:min(560px,92vw); border:0; border-radius:20px; padding:28px; }
.season-dialog::backdrop { background:rgba(10,35,28,.45); }
.season-dialog label { display:grid; gap:8px; margin:18px 0; }