@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --ink: #172238;
    --muted: #697386;
    --line: #e6e9ee;
    --canvas: #f5f6f8;
    --red: #9e1b32;
    --red-dark: #761328;
    --blue: #2866c7;
    --gold: #bd8b24;
    font-family: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: inherit; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* The shell fills the viewport and never scrolls itself; the sidebar and the content each scroll on
   their own. With one shared scrollbar, a board member - who reaches almost every module, so has the
   longest nav - had to scroll the whole page to reach the bottom of the menu, and lost the menu
   entirely while reading down a long members table. */
.platform-shell { height: 100vh; display: flex; overflow: hidden; }
.sidebar { width: 260px; flex: 0 0 260px; height: 100vh; overflow: hidden; background: #fff; border-right: 1px solid var(--line); padding: 30px 18px 20px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 12px 34px; }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; color: #fff; background: var(--red); font-family: 'Bebas Neue', sans-serif; font-size: 26px; border-radius: 8px; }
.brand strong { display: block; letter-spacing: .02em; font-size: 18px; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.tenant-switcher { margin: 0 8px 30px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; }
.tenant-switcher strong { display: block; font-size: 12px; line-height: 1.45; margin: 6px 0 10px; }
.eyebrow { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; }
.tenant-status { color: #4c8460; font-size: 11px; font-weight: 600; }
.tenant-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #4caa6d; }
/* Only the menu scrolls, so the brand stays at the top and the account footer at the bottom where
   they are looked for. min-height:0 is what lets a flex child shrink far enough to scroll at all -
   without it the nav simply pushes the footer off the end. */
.primary-nav { display: grid; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; }
.primary-nav a { color: #687285; display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 13px; font-weight: 600; border-radius: 7px; }
.primary-nav a span { width: 17px; color: #94a0b1; font-size: 18px; text-align: center; }
.primary-nav a:hover, .primary-nav a.active { color: var(--red); background: #fbf1f3; }
.primary-nav a.active span { color: var(--red); }
.sidebar-footer { margin-top: auto; display: grid; gap: 6px; padding: 20px 14px 0; border-top: 1px solid var(--line); }
.sidebar-footer a { color: var(--muted); font-size: 12px; padding: 6px 0; }
/* min-width:0 keeps a wide table from forcing the whole flex row wider than the viewport, which
   would put a horizontal scrollbar on the shell instead of on the table that caused it. */
.content-shell { width: 100%; min-width: 0; height: 100vh; overflow-y: auto; }
.topbar { min-height: 102px; padding: 24px 48px; background: #fff; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.topbar h1 { margin: 6px 0 0; font-size: 23px; letter-spacing: -.02em; }
.topbar-actions { display: flex; gap: 12px; align-items: center; }
.icon-button, .profile-button { border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; }
.icon-button { width: 38px; height: 38px; border-radius: 50%; font-size: 23px; }
.profile-button { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; }
.welcome-row, .metric-grid, .dashboard-grid, .lower-grid { max-width: 1380px; margin-left: auto; margin-right: auto; }
.welcome-row { padding: 40px 48px 26px; display: flex; justify-content: space-between; align-items: end; gap: 25px; }
.welcome-row h2 { max-width: 620px; margin: 8px 0 10px; font-family: 'Bebas Neue', sans-serif; font-size: 42px; font-weight: 400; letter-spacing: .02em; line-height: .98; }
.accent { color: var(--red); }
.lede { max-width: 690px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.primary-button { border: 0; padding: 13px 17px; color: #fff; background: var(--red); border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 5px 12px #9e1b3229; }
.primary-button:hover { background: var(--red-dark); }
.metric-grid { padding: 0 48px 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card { min-height: 135px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.metric-card strong { display: block; margin: 10px 0 10px; font-size: 28px; letter-spacing: -.04em; }
.metric-label { color: var(--muted); font-size: 11px; font-weight: 600; }
.metric-trend { font-size: 11px; font-weight: 700; }
.metric-trend em { color: var(--muted); font-style: normal; font-weight: 400; }
.metric-trend.positive { color: #3b8a5a; }.metric-trend.warning { color: #bd7c24; }.metric-trend.light { color: #f4bec7; }.dark-card { color: #fff; background: var(--ink); border-color: var(--ink); }.dark-card .metric-label, .dark-card .metric-trend em { color: #abb6ca; }
.dashboard-grid, .lower-grid { padding: 0 48px 26px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
.lower-grid { grid-template-columns: 1.35fr 1fr; }
.panel { padding: 23px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.panel-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 20px; }
.panel-heading h3 { margin: 6px 0 0; font-size: 18px; letter-spacing: -.02em; }
.panel-heading a { color: var(--blue); font-size: 11px; font-weight: 700; white-space: nowrap; }
.activity-list { display: grid; }
.activity-item { min-height: 60px; display: flex; gap: 12px; align-items: center; border-top: 1px solid #f0f1f4; }
.activity-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; }.activity-icon.red { color: #9e1b32; background: #f9e9ec; }.activity-icon.blue { color: #2866c7; background: #eaf1fc; }.activity-icon.gold { color: #9d701a; background: #fcf3df; }.activity-icon.gray { color: #657083; background: #eef0f3; }
.activity-item div { min-width: 0; flex: 1; }.activity-item strong, .activity-item small { display: block; }.activity-item strong { font-size: 12px; }.activity-item small { margin-top: 3px; color: var(--muted); font-size: 11px; }.activity-item time { color: var(--muted); font-size: 10px; }
.action-list { display: grid; gap: 8px; }.action-list a { min-height: 56px; padding: 9px 10px; display: flex; align-items: center; gap: 12px; border: 1px solid #edf0f3; border-radius: 6px; }.action-list a:hover { border-color: #d7dce5; background: #fbfcfd; }.action-symbol { width: 31px; height: 31px; display: grid; place-items: center; color: var(--red); background: #fbf0f2; border-radius: 5px; font-size: 18px; }.action-list span:nth-child(2) { flex: 1; }.action-list strong, .action-list small { display: block; }.action-list strong { font-size: 12px; }.action-list small { color: var(--muted); margin-top: 2px; font-size: 10px; }.action-list b { color: #a1a9b6; font-size: 20px; font-weight: 400; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 11px; } th { color: var(--muted); text-align: left; font-size: 10px; font-weight: 600; padding: 0 10px 10px 0; } td { padding: 13px 10px 13px 0; border-top: 1px solid #f0f1f4; white-space: nowrap; } td strong { font-size: 11px; }.level { display: inline-block; padding: 4px 7px; border-radius: 4px; font-size: 9px; font-weight: 700; }.gold-level { color: #8f681a; background: #fbf2db; }.silver-level { color: #6a7280; background: #eff1f4; }.platinum-level { color: #496d91; background: #eaf1f8; }
.event-item { display: flex; align-items: center; gap: 13px; min-height: 62px; border-top: 1px solid #f0f1f4; }.event-item time { width: 35px; text-align: center; color: var(--red); }.event-item time strong, .event-item time span { display: block; }.event-item time strong { font-size: 20px; }.event-item time span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.event-item div { min-width: 0; }.event-item div strong, .event-item div small { display: block; }.event-item div strong { font-size: 12px; }.event-item div small { color: var(--muted); margin-top: 4px; font-size: 10px; }

@media (max-width: 1050px) { .sidebar { width: 215px; flex-basis: 215px; }.topbar, .welcome-row, .metric-grid, .dashboard-grid, .lower-grid { padding-left: 26px; padding-right: 26px; }.metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .platform-shell { display: block; height: auto; overflow: visible; }.sidebar { width: 100%; height: auto; min-height: auto; overflow: visible; padding: 15px; border-right: 0; border-bottom: 1px solid var(--line); }.content-shell { height: auto; overflow: visible; }.brand { padding: 0 4px 15px; }.tenant-switcher, .sidebar-footer { display: none; }.primary-nav { display: flex; flex: none; overflow-x: auto; overflow-y: hidden; gap: 3px; }.primary-nav a { padding: 8px 10px; white-space: nowrap; font-size: 11px; }.primary-nav a span { display: none; }.topbar { min-height: 82px; padding: 18px 20px; }.topbar h1 { font-size: 18px; }.welcome-row { padding: 28px 20px 22px; display: block; }.welcome-row h2 { font-size: 36px; }.primary-button { margin-top: 18px; }.metric-grid, .dashboard-grid, .lower-grid { padding-left: 20px; padding-right: 20px; grid-template-columns: 1fr; }.metric-card { min-height: 115px; }.panel { padding: 18px; } }

.module-page { max-width: 1380px; margin: 0 auto; padding: 40px 48px 54px; }
.module-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 30px; }
.module-heading h2 { margin: 7px 0 8px; font-family: 'Bebas Neue', sans-serif; font-size: 47px; line-height: .95; font-weight: 400; letter-spacing: .02em; }
.module-heading p:not(.eyebrow) { max-width: 670px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.filter-bar { display: flex; gap: 10px; margin-bottom: 18px; }
.filter-bar input, .filter-bar select { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; }
.filter-bar input { min-width: 280px; flex: 1; }.filter-bar select { min-width: 150px; }
.module-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.module-stats > div { padding: 17px 18px; background: #fff; border: 1px solid var(--line); border-radius: 7px; }.module-stats span, .module-stats strong { display: block; }.module-stats span { color: var(--muted); font-size: 11px; }.module-stats strong { margin-top: 8px; font-size: 24px; letter-spacing: -.03em; }
.module-table table { min-width: 680px; }.module-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }.module-table td { height: 62px; }
.status { display: inline-block; padding: 5px 8px; border-radius: 4px; font-size: 9px; font-weight: 700; }.active-status { color: #3b8055; background: #eaf6ee; }.pending-status { color: #a66b1e; background: #fcf1dc; }.renewal-status { color: #a8474d; background: #fae9eb; }.board-status { color: #5e6a7e; background: #eef1f5; }
.status.green { color: #23663c; background: #e4f4e9; }.status.yellow { color: #7a5a0a; background: #fff1c7; }.status.red { color: #8a2831; background: #f9e2e5; }.status.grey { color: #5e6a7e; background: #eef1f5; }
.table-action { border: 0; padding: 5px 8px; color: var(--blue); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }.empty-state { padding: 28px 0; color: var(--muted); text-align: center; }
.sport-tags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 210px; }.sport-tags a, .muted-value { padding: 4px 6px; border-radius: 4px; color: var(--blue); background: #edf3fd; font-size: 9px; font-weight: 700; }.muted-value { color: var(--muted); background: #f0f1f4; }.sport-picker { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; }.sport-picker legend { padding: 0 5px; color: var(--muted); font-size: 11px; font-weight: 600; }.sport-choice-grid,.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.sport-choice-grid label,.choice-grid label { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 11px; font-weight: 500; }.sport-choice-grid input,.choice-grid input { accent-color: var(--red); }
.sport-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.sport-card { min-height: 150px; padding: 23px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 8px; }.sport-card:hover { border-color: var(--red); box-shadow: 0 6px 18px #17223812; }.sport-card .eyebrow { color: var(--red); }.sport-card h3 { margin: 12px 0; font-size: 20px; }.sport-card > span:last-child { color: var(--muted); font-size: 11px; }.sport-card b { float: right; color: var(--red); font-size: 20px; font-weight: 400; }.back-link { display: inline-block; margin-bottom: 15px; color: var(--blue); font-size: 11px; font-weight: 700; }
.settings-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }.settings-card { min-height: 300px; }.settings-form, .color-settings { display: grid; gap: 16px; }.settings-form { grid-template-columns: 1fr 1fr; }.settings-form label, .color-settings label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 600; }.settings-form input, .color-row input:last-child { height: 40px; width: 100%; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }.settings-actions { display: flex; align-items: center; gap: 12px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }.save-confirmation { color: #3b8055; font-size: 11px; font-weight: 700; }.color-row { display: flex; gap: 8px; }.color-row input[type=color] { width: 42px; height: 40px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }.brand-preview { min-height: 86px; margin-top: 25px; padding: 18px; display: flex; align-items: center; gap: 12px; color: #fff; background: var(--preview-secondary); border-left: 6px solid var(--preview-primary); border-radius: 6px; }.brand-preview-mark { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: var(--preview-primary); border-radius: 6px; font-family: 'Bebas Neue', sans-serif; font-size: 24px; }.brand-preview strong, .brand-preview small { display: block; }.brand-preview strong { font-size: 12px; }.brand-preview small { margin-top: 4px; color: #cbd3df; font-size: 9px; }
.role-guide { margin-top: 14px; }.role-guide h3 { margin: 7px 0 18px; font-size: 18px; }.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.role-grid div { padding: 14px; border: 1px solid var(--line); border-radius: 6px; }.role-grid strong, .role-grid small { display: block; }.role-grid strong { font-size: 12px; }.role-grid small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.payment-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.payment-card { min-height: 300px; }.payment-card.live-payment { border-top: 4px solid var(--red); }.payment-card.test-payment { border-top: 4px solid var(--blue); }.payment-form { display: grid; gap: 15px; }.payment-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 600; }.payment-form input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }.payment-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }.toggle-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 600; }.toggle-label input { accent-color: var(--red); }.security-note { max-width: 800px; margin-top: 14px; }.security-note h3 { margin: 7px 0; font-size: 16px; }.security-note p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.news-list { padding-bottom: 8px; }.news-row { min-height: 120px; padding: 18px 0; display: flex; align-items: start; gap: 16px; border-top: 1px solid #f0f1f4; }.news-date { width: 42px; flex: 0 0 42px; padding: 8px 0; text-align: center; color: var(--red); background: #fbf0f2; border-radius: 5px; }.news-date strong, .news-date span { display: block; }.news-date strong { font-size: 22px; line-height: .95; }.news-date span { margin-top: 6px; font-size: 9px; font-weight: 700; letter-spacing: .1em; }.news-copy { flex: 1; min-width: 0; }.news-meta { display: flex; gap: 6px; flex-wrap: wrap; }.news-meta span { padding: 4px 6px; color: var(--blue); background: #edf3fd; border-radius: 4px; font-size: 9px; font-weight: 700; }.news-copy h3 { margin: 8px 0 5px; font-size: 15px; }.news-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: #17223885; overflow-y: auto; }
/* The member form is thirty-one fields. Without a height limit the panel grew past the viewport and
   the backdrop centred it, so the heading and the save button were both clipped off-screen with no
   way to scroll to them. The panel now stops at the viewport and scrolls its own content. */
.modal-panel { width: min(760px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 27px; background: #fff; border-radius: 8px; box-shadow: 0 18px 60px #1722384d; }.modal-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 25px; }.modal-heading h3 { margin: 6px 0 0; font-size: 22px; }.modal-close { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 26px; line-height: 1; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 600; }.form-grid input, .form-grid select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }.form-grid .full-field { grid-column: 1 / -1; }/* Pinned to the bottom of the scrolling panel: on a long form the save button would otherwise sit
   below thirty fields, and the one control somebody always needs is the one they had to hunt for.
   The negative margins let it span the panel's padding so the rule reaches both edges. */
.modal-actions { position: sticky; bottom: -27px; z-index: 1; display: flex; justify-content: end; gap: 10px; margin: 25px -27px -27px; padding: 20px 27px; background: #fff; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }.secondary-button { border: 1px solid var(--line); padding: 12px 16px; color: var(--muted); background: #fff; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.compact-grid { padding: 0; grid-template-columns: repeat(2, 1fr); }.simple-list { display: grid; }.simple-list > div { min-height: 63px; padding: 12px 0; border-top: 1px solid #f0f1f4; position: relative; }.simple-list strong, .simple-list small { display: block; }.simple-list strong { font-size: 12px; }.simple-list small { color: var(--muted); margin-top: 5px; font-size: 10px; }.simple-list span { position: absolute; top: 15px; right: 0; padding: 4px 7px; color: var(--blue); background: #edf3fd; border-radius: 4px; font-size: 9px; font-weight: 700; }.simple-list .needs-help { color: #a8474d; background: #fae9eb; }.simple-list .covered { color: #3b8055; background: #eaf6ee; }
.meeting-feature { min-height: 180px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; background: var(--ink); color: #fff; border-color: var(--ink); }.meeting-feature .eyebrow { color: #d3dceb; }.meeting-feature h3 { margin: 8px 0; font-size: 23px; }.meeting-feature p:not(.eyebrow) { color: #b6c1d2; font-size: 12px; line-height: 1.7; }.meeting-feature .primary-button { box-shadow: none; }.meeting-actions { display: flex; align-items: center; gap: 17px; flex-wrap: wrap; }.meeting-actions a { color: #f1c2ca; font-size: 11px; font-weight: 700; }.meeting-qr { flex: 0 0 92px; display: grid; gap: 6px; justify-items: center; }.meeting-qr img { width: 84px; height: 84px; padding: 5px; background: #fff; border-radius: 6px; }.meeting-qr small { color: #d3dceb; font-size: 9px; }.meeting-date { width: 100px; height: 100px; display: grid; place-content: center; text-align: center; color: var(--ink); background: #fff; border-radius: 8px; }.meeting-date strong { font-size: 41px; line-height: .9; }.meeting-date span { margin-top: 7px; color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .15em; }
@media (max-width: 760px) { .module-page { padding: 28px 20px 40px; }.module-heading { display: block; }.module-heading h2 { font-size: 40px; }.module-heading .primary-button { margin-top: 18px; }.filter-bar { display: grid; grid-template-columns: 1fr; }.filter-bar input, .filter-bar select { width: 100%; min-width: 0; }.module-stats { grid-template-columns: repeat(2, 1fr); }.compact-grid { display: grid; grid-template-columns: 1fr; }.meeting-feature { align-items: start; gap: 15px; }.meeting-qr { flex-basis: 72px; }.meeting-qr img { width: 68px; height: 68px; }.meeting-date { width: 76px; height: 76px; flex: 0 0 76px; }.meeting-date strong { font-size: 30px; } }
@media (max-width: 760px) { .sport-card-grid { grid-template-columns: 1fr; }.sport-choice-grid,.choice-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .settings-grid { grid-template-columns: 1fr; }.settings-form { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .role-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .payment-mode-grid { grid-template-columns: 1fr; }.payment-actions { align-items: start; flex-direction: column; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; }.form-grid .full-field { grid-column: auto; } }

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.form-grid textarea { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; resize: vertical; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 7px 0; }.form-grid input[type=checkbox] { width: 14px; height: 14px; padding: 0; }
.public-site-loading { min-height: 100vh; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.public-site { min-height: 100vh; color: var(--public-secondary); background: #fff; }
.public-header { min-height: 78px; padding: 18px clamp(20px, 5vw, 70px); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #eceef2; }
.public-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }.public-brand img { width: 45px; height: 45px; object-fit: contain; }.public-brand-mark, .public-hero-mark { display: grid; place-items: center; color: #fff; background: var(--public-primary); font-weight: 800; }.public-brand-mark { width: 45px; height: 45px; border-radius: 8px; }.public-brand strong, .public-brand small { display: block; }.public-brand strong { font-size: 12px; }.public-brand small { margin-top: 4px; color: #667085; font-size: 10px; }
.public-header nav { display: flex; align-items: center; gap: 20px; }.public-header nav a { color: #667085; font-size: 11px; font-weight: 700; text-decoration: none; }.public-header nav a:hover { color: var(--public-primary); }.public-nav-button, .public-cta { padding: 11px 14px; color: #fff !important; background: var(--public-primary); border-radius: 5px; }
.public-hero { min-height: 460px; padding: 70px clamp(20px, 9vw, 150px); display: flex; align-items: center; justify-content: space-between; gap: 40px; color: #fff; background: var(--public-secondary); }.public-hero h1 { margin: 12px 0 18px; font-size: clamp(52px, 8vw, 104px); line-height: .9; letter-spacing: -.03em; }.public-hero p:not(.eyebrow) { max-width: 450px; color: #c8d0dc; font-size: 15px; line-height: 1.7; }.public-hero .eyebrow { color: #f0c5cb; }.public-cta { display: inline-block; margin-top: 18px; text-decoration: none; }.public-hero-mark { width: 220px; height: 220px; color: var(--public-secondary); background: #fff; border-radius: 50%; font-size: 92px; }
.public-section { padding: 72px clamp(20px, 9vw, 150px); }.public-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }.public-section-heading h2 { margin: 8px 0 0; font-size: 34px; }.public-section-heading a { color: var(--public-primary); font-size: 11px; font-weight: 700; }.public-news-grid, .public-event-grid, .public-sport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.public-news-card, .public-event-card, .public-sport-grid a { padding: 22px; border: 1px solid #e9ebef; border-radius: 6px; }.public-news-card h3, .public-event-card h3 { margin: 12px 0 8px; font-size: 18px; }.public-news-card > p:not(.eyebrow) { color: #667085; font-size: 12px; line-height: 1.65; }.public-news-card time { display: block; margin-top: 18px; color: #9299a6; font-size: 10px; }.public-band { background: #f7f8fa; }.public-event-card { display: flex; align-items: center; gap: 15px; }.public-event-card time { width: 48px; flex: 0 0 48px; padding: 9px 0; text-align: center; color: var(--public-primary); background: #fff; border-radius: 5px; }.public-event-card time strong, .public-event-card time span { display: block; }.public-event-card time strong { font-size: 22px; }.public-event-card time span { margin-top: 3px; font-size: 9px; font-weight: 700; }.public-event-card p { margin: 0; color: #667085; font-size: 11px; }.public-sport-grid a { display: flex; flex-direction: column; gap: 10px; color: var(--public-secondary); text-decoration: none; }.public-sport-grid a span, .public-sport-grid a b { color: var(--public-primary); font-size: 10px; font-weight: 700; }.public-sport-grid a strong { font-size: 18px; }.public-sponsor-band { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; color: #fff; background: var(--public-primary); }.public-sponsor-band h2 { margin: 8px 0; font-size: 34px; }.public-sponsor-band p:not(.eyebrow) { color: #f4dce0; font-size: 13px; line-height: 1.6; }.public-sponsor-list { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 10px; }.public-sponsor-list span { padding: 14px; border: 1px solid #ffffff55; color: #fff; font-size: 12px; }.public-footer { padding: 25px clamp(20px, 9vw, 150px); display: flex; justify-content: space-between; gap: 20px; color: #667085; font-size: 11px; }.public-footer strong { color: var(--public-secondary); }.public-footer a { color: var(--public-primary); font-weight: 700; }
@media (max-width: 760px) { .public-header { align-items: start; flex-direction: column; }.public-header nav { flex-wrap: wrap; gap: 12px; }.public-hero { min-height: auto; padding-top: 55px; padding-bottom: 55px; }.public-hero-mark { width: 120px; height: 120px; font-size: 50px; }.public-news-grid, .public-event-grid, .public-sport-grid, .public-sponsor-band { grid-template-columns: 1fr; }.public-sponsor-list { margin-top: 10px; }.public-footer { flex-wrap: wrap; } }
.sponsor-spotlight { margin-bottom: 18px; }
.sponsor-rotator { position: relative; min-height: 130px; overflow: hidden; background: var(--ink); border-radius: 6px; }
.sponsor-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 22px 26px; color: #fff; opacity: 0; animation: sponsor-fade var(--slide-duration) infinite; animation-delay: var(--slide-delay); }
.sponsor-slide .eyebrow { color: #f0c5cb; }
.sponsor-slide strong { margin-top: 9px; font-size: 24px; }
.sponsor-slide small { margin-top: 5px; color: #c8d0dc; font-size: 11px; }
@keyframes sponsor-fade { 0%, 12% { opacity: 0; transform: translateY(8px); } 18%, 42% { opacity: 1; transform: translateY(0); } 48%, 100% { opacity: 0; transform: translateY(-8px); } }
.dashboard-news-grid { align-items: start; }
.compact-stats { margin: 0; grid-template-columns: 1fr 1fr; }
.sponsor-level-list { display: grid; max-width: 420px; margin-top: 25px; gap: 8px; }.sponsor-level-list span { padding: 13px 15px; color: var(--public-secondary); border-left: 3px solid var(--public-primary); background: #f7f8fa; font-size: 12px; font-weight: 700; }
.sponsor-level-list span small { display: block; margin-top: 5px; color: #667085; font-size: 10px; font-weight: 500; line-height: 1.5; }
.public-sponsor-list img { display: block; width: 38px; height: 28px; margin-bottom: 8px; object-fit: contain; background: #fff; }
.report-bars { display: grid; gap: 14px; }.report-bar-row { display: grid; grid-template-columns: 90px 1fr 75px; align-items: center; gap: 12px; font-size: 11px; }.report-bar-row > div { height: 9px; overflow: hidden; background: #edf0f4; border-radius: 5px; }.report-bar-row i { display: block; height: 100%; background: var(--red); border-radius: 5px; }.report-bar-row strong { text-align: right; font-size: 11px; }
.role-chip { padding: 7px 9px; color: var(--red); background: #f8e9ec; border-radius: 5px; font-size: 10px; font-weight: 700; }
.auth-status-message { padding: 40px; color: var(--muted); }
.access-denied { max-width: 580px; margin: 70px auto; padding: 36px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 6px; }.access-denied h2 { margin: 10px 0; font-size: 28px; }.access-denied p:not(.eyebrow) { margin-bottom: 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.public-sport-hero { padding: 70px clamp(20px, 9vw, 150px); color: #fff; background-color: var(--public-secondary); background-image: linear-gradient(90deg, var(--public-secondary) 0%, color-mix(in srgb, var(--public-secondary) 78%, transparent) 52%, color-mix(in srgb, var(--public-secondary) 25%, transparent) 100%), var(--sport-hero-image); background-position: center; background-size: cover; }
.public-sport-hero a { color: #d7a3ab; font-size: 11px; font-weight: 700; text-decoration: none; }
.public-sport-hero .eyebrow { margin-top: 42px; color: #f0c5cb; }
.public-sport-hero h1 { margin: 10px 0 14px; font-size: clamp(48px, 7vw, 86px); line-height: .95; }
.public-sport-hero p:not(.eyebrow) { max-width: 520px; color: #c8d0dc; font-size: 14px; line-height: 1.7; }
.public-sponsor-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.public-sponsor-cards article { padding: 24px; border: 1px solid #e9ebef; border-top: 3px solid var(--public-primary); border-radius: 6px; }
.public-sponsor-cards h3 { margin: 12px 0 5px; font-size: 19px; }
.public-sponsor-cards p { margin: 0; color: #667085; font-size: 11px; }
.public-empty { padding: 30px; color: #667085; background: #f7f8fa; border-radius: 6px; font-size: 12px; }
.public-page-hero { padding: 62px clamp(20px, 9vw, 150px); color: #fff; background: var(--public-secondary); }.public-page-hero h1 { margin: 10px 0; font-size: clamp(48px, 7vw, 82px); line-height: .95; }.public-page-hero p:not(.eyebrow) { max-width: 500px; color: #c8d0dc; font-size: 14px; line-height: 1.7; }.public-page-hero .eyebrow { color: #f0c5cb; }.public-filter-bar { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; margin-bottom: 24px; }.public-filter-bar input, .public-filter-bar select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #e1e5eb; border-radius: 5px; color: var(--public-secondary); background: #fff; font: inherit; font-size: 11px; }.public-news-list { display: grid; gap: 0; }.public-news-row { display: flex; gap: 20px; padding: 25px 0; border-top: 1px solid #e9ebef; }.public-news-date { width: 54px; height: 58px; flex: 0 0 54px; display: grid; place-content: center; text-align: center; color: var(--public-primary); background: #f8e9ec; border-radius: 5px; }.public-news-date strong, .public-news-date span { display: block; }.public-news-date strong { font-size: 24px; }.public-news-date span { margin-top: 3px; font-size: 9px; font-weight: 700; }.public-news-row h2 { margin: 8px 0; font-size: 22px; }.public-news-row p:not(.eyebrow) { margin: 0; color: #667085; font-size: 12px; line-height: 1.65; }.public-nav-active { color: var(--public-primary) !important; }
.public-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }.public-text-link { color: #f0c5cb; font-size: 11px; font-weight: 700; text-decoration: none; }.membership-join-section { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; align-items: start; }.membership-join-copy h2 { margin: 10px 0; font-size: 38px; }.membership-join-copy > p:not(.eyebrow) { max-width: 460px; color: #667085; font-size: 14px; line-height: 1.7; }.membership-price { margin-top: 30px; color: var(--public-primary); font-size: 58px; font-weight: 800; line-height: 1; }.membership-price span { display: block; margin-top: 8px; color: #9299a6; font-size: 11px; font-weight: 600; }.membership-join-card h2 { margin: 0 0 24px; font-size: 24px; }.membership-submit { width: 100%; margin-top: 24px; }.checkout-note { display: block; margin-top: 12px; color: #9299a6; font-size: 10px; text-align: center; }.checkout-error { padding: 10px; color: #a8474d; background: #fae9eb; border-radius: 4px; font-size: 11px; }
@media (max-width: 760px) { .public-sponsor-cards { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .public-filter-bar { grid-template-columns: 1fr; }.public-news-row { gap: 12px; }.public-news-row h2 { font-size: 18px; } }
@media (max-width: 760px) { .membership-join-section { grid-template-columns: 1fr; gap: 30px; }.membership-join-copy h2 { font-size: 30px; } }
.ticket-wallet { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
.ticket-pass { padding: 20px; border: 1px solid #e9ebef; border-radius: 8px; background: #fff; text-align: center; }
.ticket-pass-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; text-align: left; }
.ticket-pass-head h2 { margin: 4px 0 0; font-size: 19px; }
.ticket-pass-code { margin: 18px auto 10px; max-width: 240px; }
.ticket-pass-code svg { width: 100%; height: auto; display: block; }
.ticket-pass-number { margin: 0; color: #5b677a; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.ticket-pass-used { opacity: .55; }
.ticket-pass-used .ticket-pass-code { filter: grayscale(1); }

/* Account pages: sign-in, password reset, two-factor, and the rest of the front door. */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #fff; color: var(--ink, #172238); }
.auth-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: 46px clamp(28px, 4vw, 60px); color: #fff; background: var(--public-secondary, #172238); }
.auth-brand .eyebrow { color: #f0c5cb; }
.auth-brand-name { margin: 10px 0 16px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.auth-brand-copy { max-width: 34ch; color: #c8d0dc; font-size: 14px; line-height: 1.7; }
.auth-brand-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: var(--public-primary, #9e1b32); color: #fff; font-size: 24px; font-weight: 800; text-decoration: none; }
.auth-brand-mark img { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; background: #fff; }
.auth-brand-foot { margin: 0; font-size: 12px; }
.auth-brand-foot a { color: #f0c5cb; font-weight: 700; text-decoration: none; }
.auth-brand-foot a:hover { color: #fff; text-decoration: underline; }
.auth-main { display: grid; place-items: center; padding: 46px clamp(20px, 4vw, 60px); background: #f7f8fa; }
.auth-card { width: 100%; max-width: 430px; padding: 34px; background: #fff; border: 1px solid #e9ebef; border-radius: 10px; }
.auth-card h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.auth-card > p:first-of-type, .auth-lead { margin: 10px 0 24px; color: #667085; font-size: 13px; line-height: 1.65; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: block; color: #5b677a; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
/* InputText renders a bare <input> unless a type is passed, so match on "not a checkbox" rather
   than on the type attribute - keyed to type="text" these fields render unstyled. */
.auth-form input:not([type="checkbox"]) { width: 100%; margin-top: 7px; padding: 12px 13px; color: var(--ink, #172238); border: 1px solid #d8dde5; border-radius: 6px; background: #fff; font: inherit; font-size: 14px; }
.auth-form input:not([type="checkbox"])::placeholder { color: #a7aeba; }
.auth-form input:focus { outline: none; border-color: var(--public-primary, #9e1b32); box-shadow: 0 0 0 3px rgba(158, 27, 50, .12); }
.auth-check { display: flex; align-items: center; gap: 9px; color: #5b677a; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.auth-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--public-primary, #9e1b32); }
.auth-submit { width: 100%; padding: 13px; color: #fff; background: var(--public-primary, #9e1b32); border: 0; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.auth-submit:hover { filter: brightness(1.08); }
.auth-secondary { display: block; width: 100%; padding: 12px; color: var(--ink, #172238); background: #fff; border: 1px solid #d8dde5; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.auth-secondary:hover { border-color: #b9c1cd; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: #9299a6; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e9ebef; }
.auth-links { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #e9ebef; display: grid; gap: 9px; font-size: 12px; }
.auth-links a { color: var(--public-primary, #9e1b32); font-weight: 700; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-alert { margin-bottom: 20px; padding: 12px 13px; border-radius: 6px; font-size: 12px; line-height: 1.6; }
.auth-alert-error { color: #a8474d; background: #fae9eb; }
.auth-alert-success { color: #256b4b; background: #e7f4ee; }
.auth-validation { color: #a8474d; font-size: 12px; }
.auth-validation ul { margin: 0; padding-left: 18px; }
.auth-note { margin: 18px 0 0; color: #9299a6; font-size: 11px; line-height: 1.6; }
@media (max-width: 860px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { gap: 18px; padding: 30px 22px; }
    .auth-brand-copy, .auth-brand-foot { display: none; }
    .auth-brand-name { margin: 8px 0 0; font-size: 26px; }
    .auth-main { padding: 26px 18px 46px; }
    .auth-card { padding: 24px; border: 0; border-radius: 0; background: transparent; }
}

/* Tabs used by the module workspaces (grants, events) - the markup was there, the styling was not. */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; border-bottom: 2px solid transparent; padding: 11px 14px; margin-bottom: -1px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--red); border-bottom-color: var(--red); }
.small-button { border: 1px solid var(--line); padding: 7px 11px; color: var(--ink); background: #fff; border-radius: 5px; font-size: 11px; font-weight: 700; cursor: pointer; }
.small-button:hover { border-color: #c9d0da; }
.danger-button { border: 1px solid #e7c6cb; padding: 12px 16px; color: #8a2831; background: #fdf4f5; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.danger-button:hover { color: #fff; background: #8a2831; border-color: #8a2831; }

/* Signed-in account settings: /Account/Manage. Same shell as the rest of the workspace. */
.account-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.account-nav a { padding: 11px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.account-nav a:hover { color: var(--ink); }
.account-nav a.active { color: var(--red); border-bottom-color: var(--red); }
.account-panel { max-width: 620px; }
.account-panel h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.02em; }
.account-panel > p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.account-panel .form-grid { grid-template-columns: 1fr; margin-top: 18px; }
.account-panel .form-grid input:disabled { color: var(--muted); background: #f7f8fa; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.account-hint { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.account-alert { margin-bottom: 20px; padding: 12px 13px; border-radius: 6px; font-size: 12px; line-height: 1.6; }
.account-alert-error { color: #8a2831; background: #f9e2e5; }
.account-alert-success { color: #23663c; background: #e4f4e9; }
.account-validation { color: #8a2831; font-size: 12px; }
.account-validation ul { margin: 0; padding-left: 18px; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.recovery-codes li { padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #fafbfc; font-family: ui-monospace, monospace; font-size: 13px; text-align: center; }
.qr-setup { display: flex; flex-wrap: wrap; gap: 26px; align-items: start; margin-top: 18px; }
.qr-setup img, .qr-setup svg, .qr-setup #qrCode { width: 190px; height: 190px; }

/* Anonymous pages that live in the workspace layout: an invite link, an error, a missing page. */
.guest-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); }
.guest-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px clamp(20px, 4vw, 48px); background: #fff; border-bottom: 1px solid var(--line); }
.guest-topbar .brand { padding: 0; }
.guest-body { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 40px clamp(20px, 4vw, 48px) 60px; }

/* Event photo galleries: the committee's grid on /events/{id} and the public one on /site/events/{id}. */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }
.photo-tile { margin: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.photo-tile > a { display: block; }
.photo-tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #eef0f3; }
.photo-tile figcaption { display: grid; gap: 5px; padding: 12px; }
.photo-tile figcaption strong { font-size: 12px; line-height: 1.45; }
.photo-tile figcaption small { color: var(--muted); font-size: 10px; }
.photo-tile figcaption .status { justify-self: start; }
.photo-tile-private img { opacity: .82; }
.photo-preview { display: block; width: 100%; max-height: 320px; margin-bottom: 18px; object-fit: contain; border-radius: 6px; background: #eef0f3; }
.public-news-thumb { flex: 0 0 132px; width: 132px; }
.public-news-thumb img { display: block; width: 132px; height: 99px; object-fit: cover; border-radius: 6px; background: #eef0f3; }
.public-news-row h2 a { color: inherit; }
.public-news-row h2 a:hover { color: var(--public-primary); }
@media (max-width: 760px) { .public-news-thumb { display: none; } }
.logo-preview { max-width: 200px; max-height: 90px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; object-fit: contain; }

/* Membership migration panel. The preflight summary and its warnings are the whole of the safety
   argument for an import, so they are laid out to be read rather than skimmed past. */
.button-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.checkbox-label { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.checkbox-label input[type=checkbox] { width: 14px; height: 14px; margin-top: 2px; flex: 0 0 14px; }
.panel-inset { margin-top: 18px; padding: 16px 18px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 7px; }
.import-summary { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.import-summary strong { color: var(--ink); }
.import-warnings { margin: 14px 0 0; padding: 12px 14px 12px 30px; color: #a66b1e; background: #fcf1dc; border-radius: 6px; font-size: 11px; line-height: 1.7; }
.success-message { margin-top: 12px; padding: 10px; color: #3b8055; background: #eaf6ee; border-radius: 4px; font-size: 11px; }
.error-message { margin-top: 12px; padding: 10px; color: #a8474d; background: #fae9eb; border-radius: 4px; font-size: 11px; }
.import-merges { margin-top: 14px; padding: 12px 14px; color: #8a4a2a; background: #fdf0e6; border-radius: 6px; font-size: 11px; line-height: 1.7; }
.import-merges > p { margin: 0 0 10px; }
.merge-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0d9c6; }
.merge-group:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.merge-group .eyebrow { margin: 0 0 4px; color: #8a4a2a; }
.merge-group ul { margin: 0; padding-left: 18px; }

/* Removing a sport. The note explains why the button is live or not before it is pressed, because
   "why is this disabled" is the question a greyed-out control always asks and rarely answers. */
/* The existing .danger-button styling stands; these only place it and give it a disabled state,
   since it is the first one that can be unavailable. */
.modal-actions .danger-button { margin-right: auto; }
.danger-button:disabled { color: #c9a6aa; background: #fff; border-color: var(--line); cursor: not-allowed; }
.danger-button:disabled:hover { color: #c9a6aa; background: #fff; border-color: var(--line); }
.removal-note { margin-top: 18px; padding: 12px 14px; color: var(--muted); background: #f7f9fc; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; line-height: 1.7; }
.removal-note p { margin: 0; }
.removal-note ul { margin: 8px 0 0; padding-left: 18px; }
.sport-card-hidden { opacity: .55; }
.field-hint { display: block; margin: 2px 0 4px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.6; }
.field-hint a { color: var(--blue); }
/* The invitation link, shown where the email would have gone. Only for a pending row: once somebody
   has accepted, the token is spent and printing it would be noise with a credential in it. */
.invite-link { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.invite-link input { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: #f7f9fc; font: inherit; font-size: 10px; }