/* A unified Ant Design-inspired system for the existing HTML application.
   Green is the site's customized primary color; sizes follow the compact UI. */
:root {
  --reading-progress-gradient: linear-gradient(90deg,#ef4444 0%,#f97316 17%,#facc15 33%,#22c55e 50%,#3b82f6 67%,#6366f1 83%,#a855f7 100%);
  --ui-primary: #17634f;
  --ui-primary-hover: #25866b;
  --ui-text: #262626;
  --ui-secondary: #595959;
  --ui-border: #d9d9d9;
  --ui-divider: #f0f0f0;
  --ui-layout: #f5f5f5;
  --ui-surface: #fff;
  --ui-radius: 8px;
  --ui-shadow: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f;
  --ink: var(--ui-text);
  --muted: var(--ui-secondary);
  --line: var(--ui-divider);
  --page-gutter: clamp(24px, 5vw, 96px);
}
body { background: var(--ui-layout); color: var(--ui-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
body #reading-progress::-webkit-progress-value { background: var(--reading-progress-gradient) left top / 100vw 100% no-repeat; }
body #reading-progress::-moz-progress-bar { background: var(--reading-progress-gradient) left top / 100vw 100% no-repeat; }
body h1, body h2, body h3 { color: var(--ui-text); font-family: inherit; font-weight: 600; letter-spacing: 0; }
body h1 { font-size: 30px; line-height: 1.3; }
body h2 { font-size: 24px; line-height: 1.35; }
body h3 { font-size: 18px; line-height: 1.4; }
body small { font-size: 12px; }
body a { color: var(--ui-primary); }
body a:hover { color: var(--ui-primary-hover); }
body :is(button,a,summary):focus-visible { outline: 2px solid #17634f80; outline-offset: 2px; }
body .utility-bar > .site-width { min-height: 30px; font-size: 12px; }
body .utility-bar button { font-size: 12px; padding: 3px 0; }
body .site-header { background: #fff; border-bottom: 1px solid var(--ui-divider); }
body .masthead { min-height: 72px; gap: 16px; }
body .brand, body .footer-brand { font-family: inherit; font-size: 24px; font-weight: 600; letter-spacing: -.4px; }
body .brand small { color: var(--ui-secondary); }
body .member-greeting { font-size: 13px; }
body .navigation-bar, body .account-navigation { background: #fff; border-color: var(--ui-divider); box-shadow: 0 2px 4px #00000003; }
body .site-navigation { min-height: 46px; gap: 0; }
body .site-navigation > .nav-link, body .account-navigation .nav-link { background: transparent; color: var(--ui-secondary); font-weight: 400; border-bottom: 2px solid transparent; }
body .site-navigation > .nav-link:hover, body .account-navigation .nav-link:hover { background: #fafafa; color: var(--ui-primary); }
body .site-navigation > .nav-link.active, body .site-navigation > .nav-link.active:hover, body .account-navigation .nav-link.active, body .account-navigation .nav-link.active:hover { color: var(--ui-primary); background: transparent; border-bottom-color: var(--ui-primary); font-weight: 500; }
body .header-wallet { background: #fafafa; border-color: var(--ui-border); box-shadow: none; }
body main { padding-top: 24px; }
body .breadcrumb { color: #8c8c8c; gap: 8px; }
body .breadcrumb a { color: #595959; text-decoration: none; }
body .breadcrumb a:hover { color: var(--ui-primary); }
body .page-heading { gap: 16px; }
body .page-heading p { color: var(--ui-secondary); max-width: 800px; }
body :is(.eyebrow,.auth-eyebrow,.hero-tag) { font-size: 11px; font-weight: 600; letter-spacing: 1px; }
body :is(.panel,.fund-card,.security-card,.security-tips,.support-option,.support-post,.stat-card,.account-summary,.member-summary > div,.member-toolbar,.member-table-wrap,.notification-card,.giving-acknowledgements article) {
  background: var(--ui-surface); border: 1px solid var(--ui-divider); border-radius: var(--ui-radius); box-shadow: none;
}
body .panel { padding: 24px; }
body .section-intro { margin-bottom: 16px; }
body .section-intro h2 { font-size: 20px; }
body .two-grid, body .wallet-grid, body .fund-grid, body .giving-layout { gap: 24px; }
body .tabs { border-bottom: 1px solid var(--ui-divider); gap: 16px; }
body .tabs :is(a,button) { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--ui-secondary); padding: 8px 0; font-weight: 400; }
body .tabs :is(a,button):hover { color: var(--ui-primary); background: transparent; }
body .tabs :is(a,button).active { background: transparent; color: var(--ui-primary); border-bottom-color: var(--ui-primary); font-weight: 500; }
body .filter-row { gap: 8px; margin-bottom: 20px; }
body .filter-chip { border: 1px solid var(--ui-border); background: #fff; border-radius: 6px; padding: 4px 12px; min-height: 32px; font-size: 14px; }
body .filter-chip.active { background: linear-gradient(125deg,#f0f8f4,#e6f2ec); border-color: #92b8a6; color: var(--ui-primary); }
body .btn.outline, body .header-actions .btn.outline { color: var(--ui-text); background: #fff; border-color: var(--ui-border); box-shadow: 0 2px 0 #00000002; }
body .btn.outline:hover { color: var(--ui-primary); border-color: var(--ui-primary); background: #fff; }
body .btn.text { text-decoration: none; }
body .btn.danger { background: #fff; color: #cf1322; border-color: #ffccc7; }
body .btn.danger:hover { color: #ff4d4f; border-color: #ff4d4f; }
body .field > :is(span,label) { color: var(--ui-text); font-weight: 400; }
body .field input:read-only, body .field input:disabled { background: #f5f5f5; border-color: var(--ui-border); color: #595959; }
body .field :is(input,textarea)::placeholder { color: #8c8c8c; }
body input:is([type=checkbox],[type=radio]) { accent-color: var(--ui-primary); }
body .form-footer { gap: 12px; margin-top: 8px; }
body .form-error { color: #cf1322; font-size: 13px; }
body .badge { border: 1px solid transparent; font-weight: 400; }
body .badge.green { color: #237804; background: #f6ffed; border-color: #b7eb8f; }
body .badge.amber { color: #ad6800; background: #fffbe6; border-color: #ffe58f; }
body .badge.red { color: #a8071a; background: #fff1f0; border-color: #ffa39e; }
body .badge.neutral { color: #595959; background: #fafafa; border-color: #d9d9d9; }
body .badge.white { color: #262626; background: #fff; border-color: #f0f0f0; }
body .table-wrap, body .member-table-wrap { border-radius: 8px; border: 1px solid var(--ui-divider); overflow-x: auto; }
body table { background: #fff; font-size: 14px; }
body th { background: #fafafa; color: #262626; font-weight: 600; border-bottom: 1px solid var(--ui-divider); }
body td { color: #262626; border-bottom: 1px solid var(--ui-divider); }
body tbody tr:hover, body .member-table tr:hover { background: #fafafa; }
body td > small { font-size: 12px; color: #595959; }
body .admin-row { padding: 16px 0; border-color: var(--ui-divider); gap: 16px; }
body .admin-row strong { font-size: 14px; }
body .admin-row p { font-size: 13px; margin-top: 4px; }
body .row-actions { gap: 8px; }
body .list-pagination, body .member-pagination { font-size: 13px; border-color: var(--ui-divider); }
body .list-pagination > div { gap: 8px; }
body .empty, body .member-empty { padding: 40px 16px; color: #8c8c8c; background: #fff; border-radius: 8px; }
body .empty > .icon, body .member-empty > .icon { width: 32px; height: 32px; color: #bfbfbf; }
body .avatar { background: #f0f0f0; color: #595959; border: none; font-family: inherit; }
body .avatar.big { width: 48px; height: 48px; font-size: 20px; }
body :is(.account-summary,.member-detail-heading) > .avatar.big { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; min-width: 56px; flex: 0 0 56px; aspect-ratio: 1; border-radius: 50%; padding: 0; overflow: hidden; }
body :is(.account-summary,.member-detail-heading) > .avatar.big img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body .modal > #modal-title + .member-detail-heading { margin-top: 20px; }
body .panel.narrow:has(:is(form[data-form=settings],[data-action=export-account])) > h3 { margin: 0 0 8px; }
body .panel.narrow:has(:is(form[data-form=settings],[data-action=export-account])) > p { margin: 0 0 20px; }
body .panel.narrow:has([data-action=export-account]) { margin-top: 24px; }
body .member-photo-section { margin: 24px 0; }
body .member-document-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
body .member-document-grid figure { margin: 0; padding: 12px; border: 1px solid var(--ui-divider); border-radius: 8px; background: #fafbfa; }
body .member-document-grid figcaption { margin-bottom: 10px; font-size: 14px; font-weight: 600; }
body .member-document-grid img { display: block; width: 100%; height: 240px; object-fit: contain; border-radius: 4px; }
body .member-photo-section > p { margin: 12px 0 0; }
@media(max-width:600px) { body .member-document-grid { grid-template-columns: minmax(0,1fr); } }
body .balance-card { background: #fff; border: 1px solid var(--ui-divider); border-radius: 8px; color: #262626; padding: 24px; }
body .balance-card > strong { font-family: inherit; font-size: 36px; font-weight: 500; color: var(--ui-primary); }
body .balance-card :is(p,small), body .balance-bottom { color: #595959; border-color: var(--ui-divider); }
body .stat-card > strong { font-family: inherit; font-size: 28px; font-weight: 500; color: #262626; }
body .stat-top { font-size: 13px; font-weight: 400; }
body .token-list > span { padding: 2px 8px; font-size: 12px; border-radius: 4px; border: 1px solid var(--ui-border); background: #fafafa; }
body :is(.info-banner,.success-note,.security-success,.security-overview,.signup-verification) { border: 1px solid #c3dacb; border-radius: 8px; background: linear-gradient(125deg,#f6fbf8,#edf6f0); padding: 16px; }
body .info-banner strong, body .security-success strong { font-size: 14px; font-weight: 500; }
body .info-banner span, body .security-success span { font-size: 13px; line-height: 1.6; }
body .security-authenticator { border-top: 1px solid var(--ui-divider); }
body .security-hero-icon { width: 48px; height: 48px; border-radius: 8px; }
body .security-hero-icon .icon { width: 24px; height: 24px; }
body .security-status { padding: 6px 10px; font-size: 13px; }
body .security-card-heading { gap: 12px; margin-bottom: 16px; }
body .security-card-heading p, body .security-contact > p, body .security-tips ul { font-size: 13px; }
body .security-contact-row { padding: 12px 0; font-size: 14px; }
body .security-disclosure summary { font-size: 14px; padding: 12px 0; min-height: 40px; }
body .security-key-box { padding: 16px; background: #fafafa; border: 1px solid var(--ui-border); border-radius: 6px; }
body .security-key-box code { font-size: 14px; color: #262626; }
body .modal-overlay { background: #00000073; backdrop-filter: none; }
body .modal { border: none; box-shadow: var(--ui-shadow); padding: 24px; }
body .modal h2 { font-size: 20px; font-weight: 600; }
body .close-modal { border: 0; background: transparent; color: #8c8c8c; top: 12px; right: 12px; }
body .close-modal:hover { background: #f5f5f5; color: #262626; }
body .auth-layout { border: 1px solid var(--ui-divider); border-radius: 8px; background: #fff; box-shadow: none; }
body .auth-form-panel { background: #fff; border: 0; box-shadow: none; }
body .auth-form-panel h1 { font-family: inherit; font-size: 28px; color: #262626; letter-spacing: 0; }
body .auth-story-content h2 { font-family: inherit; font-size: clamp(28px,3vw,40px); letter-spacing: -.5px; color: #fff; }
body .auth-story-content p { font-size: 15px; line-height: 1.6; }
body .auth-story-content { padding: 32px; }
body .auth-journey { font-size: 12px; gap: 12px; }
body .auth-assurance { font-size: 12px; }
body .signup-verification h3 { font-size: 16px; }
body .signup-verification > p { font-size: 13px; color: #595959; }
body .signup-code .section-intro strong { font-size: 14px; font-weight: 500; }
body .notification-card { padding: 16px 20px; gap: 12px; }
body .notification-card.is-unread { background: #fff; border: 1px solid #c3dacb; }
body .notification-card h2 { font-size: 16px; font-weight: 600; color: #262626; }
body .notification-card p { font-size: 14px; color: #434343; }
body .notification-symbol { width: 32px; height: 32px; border-radius: 6px; }
body .notification-meta { font-size: 12px; margin-bottom: 6px; }
body .notification-read { font-weight: 400; text-decoration: none; }
body #toast { background: #fff; color: #262626; border: 1px solid var(--ui-divider); border-radius: 8px; box-shadow: var(--ui-shadow); padding: 10px 16px; font-size: 14px; }
body details { border-color: var(--ui-divider); }
body summary { font-size: 14px; font-weight: 500; }
body hr { border-color: var(--ui-divider); margin: 24px 0; }
body .hero { background: #fff; border: 1px solid var(--ui-divider); border-radius: 8px; min-height: 400px; }
body .hero-copy { padding: clamp(24px,3vw,48px); }
body .hero h1 { font-size: clamp(30px,3.4vw,46px); line-height: 1.2; letter-spacing: -.5px; margin-bottom: 16px; }
body .hero-description { font-size: 16px; line-height: 1.6; }
body .hero-visual { min-height: 400px; }
body .hero-actions { margin-top: 24px; gap: 8px; }
body .hero-reassurance { font-size: 13px; margin-top: 16px; }
body .hero-tag { margin-bottom: 16px; }
body .hero-caption { font-size: 14px; }
body .help-steps > article { padding: 20px; background: #fff; border: 1px solid var(--ui-divider); border-radius: 8px; }
body .step-number, body .how-steps span { width: 32px; height: 32px; font-family: inherit; font-size: 16px; border-radius: 50%; margin-bottom: 16px; }
body .help-steps h3, body .how-steps h3 { font-size: 18px; margin-bottom: 8px; }
body .help-steps p, body .how-steps p { font-size: 14px; line-height: 1.6; }
body .help-steps { gap: 24px; }
body .community-story { padding: 24px; background: #fff; border: 1px solid var(--ui-divider); border-radius: 8px; gap: 24px; }
body .story-quote blockquote { font-family: inherit; font-size: 18px; line-height: 1.6; }
body .fund-image { height: 180px; }
body .fund-body h3 { font-size: 20px; }
body .fund-bottom { margin: 16px 0; padding-top: 12px; }
body .fund-bottom strong { font-size: 18px; }
body .support-option { padding: 24px; }
body .support-option > .icon { width: 28px; height: 28px; }
body .support-option p { font-size: 14px; line-height: 1.6; }
body .gate-card { padding: 40px 24px; background: #fff; border: 1px solid var(--ui-divider); border-radius: 8px; }
body .gate-card h2 { font-size: 24px; }
body .gate-card p { font-size: 14px; }
body .giving-wallet { padding: 16px 0; gap: 8px; }
body .giving-wallet code { font-size: 13px; }
body .footer-invitation { padding-top: 28px; padding-bottom: 28px; }
body .footer-invitation h2 { color: #fff; font-family: inherit; font-size: 28px; }
body .footer-content { padding-top: 32px; padding-bottom: 32px; gap: 32px; }
body .footer-content h2 { font-family: inherit; font-size: 16px; font-weight: 600; }
body .footer-content :is(p,a,small) { font-size: 13px; line-height: 1.65; }
body .footer-explore nav a { min-height: 32px; padding: 4px 0; }
body .footer-bottom { font-size: 12px; padding-top: 16px; padding-bottom: 16px; }
@media (max-width: 700px) {
  body .member-table td { padding: 8px 0; }
  body .member-table tr { padding: 16px; }
}
@media (max-width: 600px) {
  body .hero { min-height: 0; }
  body .hero-visual { min-height: 240px; }
  body .hero-copy, body .auth-story-content { padding: 24px; }
  body .panel, body .security-card, body .support-option { padding: 16px; }
  body .page-heading h1, body .auth-form-panel h1 { font-size: 24px; }
  body .tabs { gap: 12px; }
  body .footer-invitation h2 { font-size: 24px; }
}

/* Shared layout rhythm and responsive composition. */
:root { --layout-gap: 24px; --ui-divider: #e8ece9; --ui-layout: #f5f7f6; }
body main > * { min-width: 0; }
body :is(.form-grid,.two-grid,.wallet-grid,.giving-layout,.security-layout,.member-details) > * { min-width: 0; }
body :is(.page-heading,.section-heading) { margin-top: 0; }
body .page-heading { padding: 8px 0; margin-bottom: 24px; align-items: flex-start; }
body .page-heading h1 { max-width: 26ch; }
body .page-heading p { max-width: 70ch; line-height: 1.65; }
body .page-heading > .btn { flex-shrink: 0; margin-top: 8px; }
body .section-heading { margin-bottom: 20px; }
body .section-heading > p { max-width: 68ch; margin-top: 8px; }
body .panel { border-color: #e2e8e4; box-shadow: 0 2px 8px #173e3005; }
body .panel > h2 { margin-bottom: 8px; }
body .panel > .muted { margin: 0 0 24px; max-width: 75ch; }
body .account-panel > form { max-width: 960px; }
body .account-panel .verification-list, body .account-panel .kyc-block { max-width: 960px; }
body .account-summary { padding: 20px 24px; }
body .account-summary > div { min-width: 0; }
body .account-summary p { overflow-wrap: anywhere; }
body .tabs { margin: 24px 0 20px; flex-wrap: nowrap; overflow-x: auto; gap: 24px; scrollbar-width: thin; }
body .tabs :is(a,button) { flex-shrink: 0; white-space: nowrap; }
body .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 20px; }
body .field { min-width: 0; margin-bottom: 20px; }
body .field > :is(span,label) { overflow-wrap: anywhere; }
body .field :is(input,select,textarea) { max-width: 100%; }
body .field textarea { min-height: 104px; }
body .field:has(textarea) { grid-column: 1 / -1; }
body .password-input button { top: 3px; bottom: 3px; right: 3px; min-width: 52px; min-height: 24px; }
body .password-input input { padding-right: 68px; }
body .form-footer { padding-top: 16px; border-top: 1px solid var(--ui-divider); margin-top: 4px; }
body .auth-layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); max-width: 1120px; align-items: start; overflow: clip; margin-top: 0; }
body .auth-form-panel { max-width: none; padding: clamp(24px,3vw,44px); border-radius: 0; }
body .auth-form-panel form { max-width: 600px; margin: 0 auto; }
body .auth-form-panel > :is(h1,p,.auth-eyebrow,.auth-journey,.auth-assurance) { max-width: 600px; margin-left: auto; margin-right: auto; }
body .auth-story { min-height: 0; height: 580px; border-radius: 0; }
body .auth-signin .auth-story { align-self: stretch; height: auto; min-height: 520px; }
body .auth-signup .auth-story, body .contact-layout .auth-story { min-height: 0; position: sticky; top: 72px; height: min(640px,calc(100dvh - 96px)); max-height: none; }
body .auth-photo { object-fit: cover; object-position: center; }
body .auth-story-content { padding: 32px; }
body .auth-story-content h2 { font-size: clamp(28px,2.5vw,38px); line-height: 1.2; margin: 16px 0; }
body .auth-story-content p { font-size: 14px; max-width: 42ch; }
body .auth-story-footer { padding-top: 20px; margin-top: 24px; font-size: 12px; }
body .auth-journey { padding: 12px 0; margin-top: 16px; margin-bottom: 24px; justify-content: space-between; gap: 8px; }
body .signup-verification { margin: 0 0 20px; padding: 16px; background: linear-gradient(130deg,#f7fbf8,#eff6f2); }
body .signup-code { margin: 0; padding: 0; border: 0; }
body .signup-code .section-intro { margin-bottom: 16px; gap: 8px; }
body .signup-code .field { margin-bottom: 12px; }
body .signup-code-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
body .signup-code-actions .btn { width: 100%; padding-left: 8px; padding-right: 8px; }
body .signup-code [role=status] { margin-top: 10px; font-size: 12px; line-height: 1.5; }
body .auth-form-panel .auth-switch { margin-top: 20px; padding-top: 16px; }
body .auth-assurance { margin-top: 20px; font-size: 12px; }
body .settings-section { padding: 24px 0 4px; border-top: 1px solid var(--ui-divider); }
body .settings-section h3 { margin-bottom: 20px; font-size: 16px; }
body form[data-form=admin-settings] { width: 100%; max-width: 1080px; margin-inline: auto; }
body form[data-form=admin-settings] > fieldset { margin-top: 20px; margin-bottom: 24px; }
body .giving-options .switch-row { margin-bottom: 0; align-items: center; }
body .giving-options .switch-row:last-child { border-bottom: 0; padding-bottom: 0; }
body .giving-options .muted { margin: 0 0 8px; max-width: 80ch; }
body .settings-save { padding: 20px 0 0; border-top: 1px solid var(--ui-divider); }
body .settings-section .field:has(input[name^=giving]) { grid-column: 1 / -1; }
body .wallet-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: stretch; }
body .balance-card { padding: 28px; }
body .balance-card > strong { display: block; margin: 12px 0; font-variant-numeric: tabular-nums; }
body .balance-bottom { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ui-divider); gap: 12px; }
body .giving-layout { grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); align-items: start; }
body .giving-wallet { align-items: stretch; }
body .giving-wallet .btn { align-self: flex-start; }
body .giving-wallet code { display: block; background: #f7f9f8; border: 1px solid var(--ui-divider); border-radius: 6px; padding: 12px; }
body .security-layout { grid-template-columns: minmax(0,1fr) minmax(260px,320px); }
body .security-overview { margin-bottom: 20px; }
body .security-protection { max-width: 250px; }
body .security-card-heading { flex-wrap: wrap; align-items: flex-start; }
body .security-card-heading > div { flex: 1; min-width: 180px; }
body .security-card-heading > .badge { margin-left: auto; }
body .security-tips ul { margin: 0; gap: 12px; }
body .member-toolbar { grid-template-columns: minmax(240px,2fr) repeat(4,minmax(120px,1fr)); }
body .member-toolbar .member-search { grid-column: auto; }
body .member-toolbar .field { margin: 0; }
body .member-toolbar input, body .member-toolbar select { min-height: var(--control-height); }
body .member-heading { gap: 16px; }
body .member-summary { gap: 16px; }
body .member-summary > div { padding: 20px; }
body .admin-row { flex-wrap: wrap; }
body .admin-row > div:first-child { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
body .admin-row .row-actions { flex-wrap: wrap; justify-content: flex-end; }
body .table-wrap { margin-top: 16px; }
body .table-wrap table { min-width: 640px; }
body .member-table { min-width: 840px; }
body .member-table th, body .member-table td { padding: 12px 16px; }
body .notifications-page { max-width: 980px; }
body .notifications-toolbar { padding: 20px; border: 1px solid var(--ui-divider); border-radius: 8px; background: #fff; margin-bottom: 20px; gap: 16px; }
body .notifications-summary strong { font-size: 16px; }
body .notifications-summary p { font-size: 13px; }
body .notifications-list { gap: 12px; }
body .notification-card { padding: 20px; }
body .notification-meta { align-items: flex-start; }
body .notification-copy { overflow-wrap: anywhere; }
body .hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
body .hero-visual { min-height: 420px; }
body .hero-copy { display: flex; flex-direction: column; justify-content: center; }
body .hero h1 { max-width: 18ch; }
body .hero-description { max-width: 52ch; }
body .home-section { margin-top: 48px; }
body .help-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
body .help-steps > article { padding: 24px; }
body .getting-started { padding-bottom: 32px; }
body .stats-grid { gap: 16px; }
body .fund-grid, body .fund-grid.three { grid-template-columns: repeat(auto-fill,minmax(min(100%,280px),1fr)); gap: 24px; }
body .fund-grid > .empty { grid-column: 1 / -1; }
body .fund-card { min-width: 0; }
body .fund-card { height: 100%; }
body .fund-body { padding: 24px; }
body .fund-body > .btn { margin-top: auto; }
body .community-story { align-items: start; }
body .faq-list { max-width: 1080px; }
body .faq-list details { background: #fff; border: 1px solid var(--ui-divider); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
body .faq-list summary { padding: 16px 20px; }
body .faq-answer { width: 100%; padding: 0 20px 20px; max-width: none; }
body .faq-answer p { max-width: 78ch; }
body .footer-content { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
body .footer-invitation { gap: 24px; }
body .footer-about p { max-width: 52ch; }
body .footer-bottom { flex-wrap: wrap; gap: 12px; }
body .modal { padding: 28px; width: 560px; }
body .modal.wide { width: 800px; }
body .modal .form-grid { gap: 0 16px; }
body .modal h2 { padding-right: 28px; }
body .modal > p { max-width: 65ch; }
@media(min-width:1600px) {
  body .account-panel > form, body form[data-form=admin-settings] { max-width: 1120px; }
  body .hero h1 { font-size: 48px; }
}
@media(max-width:1200px) {
  body .member-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .member-toolbar .member-search { grid-column: 1 / -1; }
  body .security-layout { grid-template-columns: minmax(0,1fr) 280px; }
  body .footer-content { gap: 24px; }
}
@media(max-width:960px) {
  body .auth-layout { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
  body .auth-form-panel { padding: 24px; }
  body .auth-story-content { padding: 24px; }
  body .auth-journey { font-size: 11px; }
  body .security-layout { grid-template-columns: 1fr; }
  body .security-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .security-protection { margin-left: 0; max-width: none; }
  body .giving-layout, body .wallet-grid { grid-template-columns: 1fr; }
  body .footer-content { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .footer-about { grid-column: 1 / -1; }
}
@media(max-width:760px) {
  body .auth-layout { grid-template-columns: 1fr; }
  body .auth-story, body .auth-signin .auth-story, body .auth-signup .auth-story, body .contact-layout .auth-story { position: relative; top: auto; min-height: 0; height: 260px; }
  body .auth-story-content h2 { font-size: 28px; margin: 8px 0; }
  body .auth-story-content p { max-width: 55ch; }
  body .auth-story-footer { display: none; }
  body .hero { grid-template-columns: 1fr; }
  body .hero-visual { min-height: 280px; }
  body .hero h1 { max-width: 24ch; }
  body .help-steps, body .two-grid, body .task-preview { grid-template-columns: 1fr; }
  body .help-steps > article { display: block; }
  body .community-story { grid-template-columns: 1fr; }
  body .page-heading { flex-wrap: wrap; }
  body .page-heading > .btn { margin-top: 0; }
  body .section-intro { flex-wrap: wrap; }
}
@media(max-width:700px) {
  body .member-table { min-width: 0; }
}
@media(max-width:600px) {
  body .form-grid, body .member-toolbar { grid-template-columns: 1fr; }
  body .member-toolbar .member-search { grid-column: auto; }
  body .security-sidebar { grid-template-columns: 1fr; }
  body .account-summary { padding: 16px; flex-wrap: wrap; gap: 12px; }
  body .account-summary h2 { font-size: 20px; }
  body .account-summary > .badge { margin-left: 60px; }
  body .auth-form-panel { padding: 24px 20px; }
  body .auth-journey { flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
  body .auth-form-panel .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; }
  body .form-footer { align-items: flex-start; }
  body .form-footer > .btn { width: 100%; }
  body .tabs { gap: 20px; }
  body .member-table { min-width: 0; }
  body .member-table td { padding: 8px 0; }
  body .admin-row .row-actions { justify-content: flex-start; width: 100%; }
  body .fund-body, body .balance-card { padding: 20px; }
  body .notifications-toolbar { flex-direction: column; align-items: stretch; padding: 16px; }
  body .notification-card { padding: 16px; }
  body .security-card-heading > .badge { margin-left: 48px; }
  body .footer-content { grid-template-columns: 1fr; gap: 24px; }
  body .footer-about { grid-column: auto; }
  body .footer-invitation { align-items: flex-start; }
  body .modal-overlay { padding: 12px; }
  body .modal { padding: 24px 20px; max-height: calc(100dvh - 24px); }
  body .settings-section { padding-top: 20px; }
}
@media(max-width:380px) {
  body .auth-form-panel .form-grid, body .signup-code-actions { grid-template-columns: 1fr; }
  body .header-actions { gap: 8px; }
  body .brand { font-size: 20px; }
}

body .signup-requirements-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
body .signup-requirements-grid .switch-row { padding: 12px 0; margin: 0; border: 0; min-width: 0; }
body .signup-requirements-grid .switch-row:last-child { padding-bottom: 12px; }
body .signup-requirements-grid .switch-row small { margin-top: 6px; }
@media(max-width:600px) { body .signup-requirements-grid { grid-template-columns: 1fr; gap: 0; } }

body .token-list { flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
body .token-list > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 3px 10px; line-height: 20px; color: var(--ui-text); }
body .token-list .icon { width: 14px; height: 14px; color: var(--ui-primary); }

/* Consistent section spacing, including empty lists and paginated tables. */
:root { --section-space: 32px; --heading-space: 16px; }
body main { padding-top: 32px; padding-bottom: 48px; }
body .section-intro { margin-top: var(--section-space); margin-bottom: var(--heading-space); }
body main > .section-intro:first-child,
body .page-heading + .section-intro,
body .panel > .section-intro:first-child,
body .signup-code > .section-intro { margin-top: 0; }
body .section-intro > :is(h2,h3,p) { margin-top: 0; margin-bottom: 0; }
body .section-intro + .table-wrap { margin-top: 0; }
body .section-intro + :is(.empty,.member-empty) { margin-top: 0; }
body .spaced { margin-top: var(--section-space); }
body .panel + .panel:not(.spaced) { margin-top: 24px; }
body .panel > :is(h2,h3) + :is(form,.form-grid,.giving-acknowledgements) { margin-top: 20px; }
body .panel > :is(p,.muted) + form { margin-top: 20px; }
body .panel > :last-child { margin-bottom: 0; }
body main > :last-child { margin-bottom: 0; }
body .home-section { margin-top: 48px; }
body .home-section > .section-heading { margin-top: 0; margin-bottom: 24px; }
body .giving-review .section-intro, body .signup-code .section-intro { margin-top: 0; }
body .settings-section h3 { margin-top: 0; margin-bottom: 20px; }
body .verification-list { margin-top: 24px; margin-bottom: 24px; }
body .kyc-block { margin-top: var(--section-space); }
@media(max-width:600px) {
  :root { --section-space: 24px; --heading-space: 12px; }
  body main { padding-top: 24px; padding-bottom: 32px; }
  body .home-section { margin-top: 32px; }
  body .home-section > .section-heading { margin-bottom: 20px; }
}

/* Site-wide type scale: readable copy, compact controls, clear hierarchy. */
:root {
  --font-body: 15px;
  --font-control: 14px;
  --font-caption: 13px;
  --font-heading: 28px;
  --font-section: 22px;
  --font-card: 18px;
}
body { font-size: var(--font-body); line-height: 1.6; }
body h1 { font-size: var(--font-heading); line-height: 1.3; }
body h2 { font-size: var(--font-section); line-height: 1.4; }
body h3 { font-size: var(--font-card); line-height: 1.45; }
body main p:not(.eyebrow):not(.form-error):not(.security-footnote),
body main .muted, body .faq-answer { font-size: var(--font-body); line-height: 1.6; }
body .faq-list summary { font-size: 16px; font-weight: 600; line-height: 1.5; min-height: 56px; }
body .faq-indicator { font-size: 20px; }
body .faq-answer p { font-size: var(--font-body); line-height: 1.6; }
body :is(.section-heading,.story-lead,.need-help,.task-hero,.gate-card,.account-summary,.security-overview,.security-contact) h2,
body .section-heading h2 { font-size: var(--font-section); line-height: 1.4; }
body :is(.section-intro,.panel) > h2 { font-size: 20px; }
body :is(.help-steps,.fund-body,.security-card-heading,.security-tips,.how-steps) h3 { font-size: var(--font-card); }
body .auth-form-panel h1 { font-size: var(--font-heading); line-height: 1.3; }
body .hero h1 { font-size: clamp(30px,3vw,42px); line-height: 1.2; }
body .auth-story-content h2 { font-size: clamp(26px,2.5vw,36px); line-height: 1.25; }
body .auth-story-content p { font-size: var(--font-body); }
body .modal h2 { font-size: 20px; line-height: 1.4; }
body :is(.btn,.text-btn,.nav-link,.field > span,.field > label,.check-label) { font-size: var(--font-control); }
body .field :is(input,select,textarea), body .search-input { font-size: var(--font-control); }
body :is(th,td), body .admin-row strong, body .verification-list strong, body .switch-row strong { font-size: var(--font-control); }
body .member-table :is(th,td) { font-size: var(--font-control); }
body .form-error, body .security-footnote, body .field small, body .switch-row small { font-size: var(--font-caption); line-height: 1.55; }
body .security-steps small, body .security-card-heading p, body .verification-list small { font-size: var(--font-caption); line-height: 1.55; }
body .notifications-summary strong, body .notification-card h2 { font-size: 16px; line-height: 1.5; }
body .notification-card p { font-size: var(--font-body); }
body .story-quote blockquote { font-size: 17px; line-height: 1.65; }
body .footer-invitation h2 { font-size: 26px; line-height: 1.35; }
body .footer-content h2 { font-size: 16px; }
body .footer-content :is(p,a,small) { font-size: 14px; line-height: 1.6; }
body .footer-bottom { font-size: var(--font-caption); }
@media(max-width:600px) {
  :root { --font-heading: 24px; --font-section: 20px; }
  body .page-heading h1, body .auth-form-panel h1 { font-size: var(--font-heading); }
  body .hero h1 { font-size: 30px; }
  body .auth-story-content h2 { font-size: 26px; }
  body .footer-invitation h2 { font-size: 22px; }
}
@media(max-width:600px), (pointer:coarse) {
  body .field :is(input,select,textarea), body .search-input { font-size: 16px; }
}

/* Footer: equal columns, clear branding, and quiet contact cards. */
body .site-footer { border-top: 1px solid #8cbaa43b; }
body .footer-content { gap: 32px; padding-top: 40px; padding-bottom: 40px; align-items: start; }
body .footer-content > div { min-width: 0; }
body .footer-content .footer-brand { color: #fff; font-size: 26px; font-weight: 650; letter-spacing: -.6px; line-height: 1.25; text-decoration: none; gap: 12px; }
body .footer-content .footer-brand:hover { color: #fff; text-decoration: none; }
body .footer-brand img { width: 44px; height: 44px; border-radius: 10px; padding: 6px; box-shadow: 0 4px 16px #00000012; }
body .footer-about p { color: #d7e6df; margin: 20px 0; max-width: 46ch; line-height: 1.75; }
body .footer-service-area { padding: 7px 10px; border: 1px solid #ffffff24; border-radius: 6px; background: #ffffff07; font-size: 12px; color: #e2eee8; }
body .footer-about small { color: #b5cfc2; font-size: 12px; margin-top: 16px; }
body .footer-content h2 { margin: 8px 0 20px; color: #fff; font-size: 16px; letter-spacing: 0; }
body .footer-explore nav { gap: 4px; }
body .footer-explore nav a { min-height: 38px; padding: 8px 12px; border-bottom: 0; border-radius: 6px; color: #d7e6df; transition: background .15s,color .15s; }
body .footer-explore nav a:hover { background: #ffffff0c; color: #fff; text-decoration: none; }
body .footer-explore nav .icon { width: 14px; height: 14px; opacity: .65; }
body .footer-connect > p { color: #c4dacf; line-height: 1.7; margin: 0; }
body .footer-connect .footer-contact-links { gap: 8px; margin-top: 20px; }
body .footer-contact-links a { padding: 10px 12px; min-height: 48px; gap: 12px; border-radius: 8px; border: 1px solid #ffffff18; background: #ffffff05; color: #f1f7f3; text-decoration: none; transition: background .15s,border-color .15s; }
body .footer-contact-links a:hover { background: #ffffff0e; border-color: #ffffff38; color: #fff; text-decoration: none; }
body .footer-contact-links a > .icon:first-child { width: 20px; height: 20px; color: #dcece3; }
body .footer-contact-links a > .icon:last-child { opacity: .6; }
body .footer-contact-links a span { font-size: 13px; font-weight: 500; line-height: 1.5; }
body .footer-bottom { border-top: 1px solid #ffffff18; color: #b5cfc2; padding-top: 20px; padding-bottom: 20px; }
@media(max-width:960px) { body .footer-content { gap: 28px; } }
@media(max-width:600px) {
  body .footer-content { padding-top: 28px; padding-bottom: 28px; gap: 28px; }
  body .footer-content .footer-brand { font-size: 24px; }
  body .footer-content h2 { margin-top: 0; margin-bottom: 14px; }
  body .footer-about p { max-width: none; }
}
@media(prefers-reduced-motion:reduce) { body .footer-explore nav a,body .footer-contact-links a { transition: none; } }

body .footer-content > div { padding-inline: clamp(24px,3vw,56px); }
@media(max-width:960px) { body .footer-content > div { padding-inline: 24px; } }
@media(max-width:600px) { body .footer-content > div { padding-inline: 8px; } }

body .footer-content > .footer-about { padding-inline-start: 0; }

body .footer-content > .footer-connect { padding-inline-end: 0; }

/* Center member workspaces and keep each form's heading aligned with its fields. */
body main.member-page { max-width: calc(1200px + 2 * var(--page-gutter)); margin-inline: auto; }
body .account-content { width: 100%; max-width: 960px; margin-inline: auto; }
body .account-content.is-security { max-width: 1120px; }
body .account-content > form { width: 100%; margin-inline: auto; }
body .account-content > h2 { margin: 0 0 8px; }
body .account-content > .muted { margin: 0 0 24px; }
body .account-content .verification-list, body .account-content .kyc-block { margin-inline: auto; }
body .notifications-page { margin-inline: auto; }
body .member-page .workflow-page, body .member-page .security-center { margin-inline: auto; }

@media(max-width:600px) { :root { --page-gutter: 20px; } }

@media(max-width:600px) { body .getting-started { padding-bottom: 24px; } }

/* Editorial photos add warmth without crowding account controls. */
body .step-photo { display: block; width: 100%; height: 160px; object-fit: cover; border-radius: 6px; margin-bottom: 20px; }
body .community-story { grid-template-columns: minmax(220px,.85fr) minmax(0,1fr) minmax(0,1.1fr); align-items: center; gap: 28px; }
body .story-photo { margin: 0; overflow: hidden; border-radius: 8px; background: #f5f7f6; }
body .story-photo img { display: block; width: 100%; height: 220px; object-fit: cover; }
body .story-photo figcaption { padding: 12px 14px; color: var(--ui-secondary); font-size: 12px; line-height: 1.5; }
body .content-photo { margin: 0 0 28px; border-radius: 8px; overflow: hidden; background: #f5f7f6; }
body .content-photo img { display: block; width: 100%; height: 240px; object-fit: cover; object-position: center; }
body .content-photo figcaption { padding: 12px 16px; font-size: 13px; color: var(--ui-secondary); }
body .giving-photo { display: block; width: 100%; height: 180px; object-fit: cover; border-radius: 6px; margin-bottom: 20px; }
@media(max-width:1000px) {
  body .community-story { grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr); }
  body .community-story > :last-child { grid-column: 1 / -1; }
}
@media(max-width:760px) {
  body .community-story { grid-template-columns: 1fr; gap: 24px; }
  body .community-story > :last-child { grid-column: auto; }
  body .step-photo { height: 190px; }
  body .story-photo img { height: 240px; }
}
@media(max-width:600px) { body .content-photo img { height: 190px; } }

/* Focus each crop on the subject that explains its section. */
body .auth-signin .auth-photo { object-position: 35% 50%; }
body .auth-signup .auth-photo { object-position: 50% 45%; }
body .contact-layout .auth-photo { object-position: 55% 40%; }
body .help-steps article:nth-child(1) .step-photo { object-position: 50% 40%; }
body .help-steps article:nth-child(2) .step-photo { object-position: 50% 55%; }
body .help-steps article:nth-child(3) .step-photo { object-position: 50% 50%; }
body .story-photo img { height: auto; aspect-ratio: 16 / 10; object-position: 50% 65%; }
body .content-photo img { object-position: 50% 35%; }
body .giving-photo { height: auto; aspect-ratio: 16 / 9; object-position: 50% 55%; }
@media(max-width:760px) {
  body .contact-layout .auth-photo { object-position: 50% 35%; }
  body .story-photo img { height: auto; aspect-ratio: 16 / 9; }
}

/* Extend the sign-up image to match the full form height on desktop. */
@media(min-width:761px) {
  body .auth-signup .auth-story { position: relative; top: auto; align-self: stretch; height: auto; min-height: 640px; max-height: none; }
}

/* Two complementary photos share the tall sign-up column. */
body .signup-image-stack { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0,1fr) minmax(0,1fr); gap: 4px; background: #173e30; }
body .signup-image-stack img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
body .signup-first-photo img { object-position: 50% 45%; }
body .signup-image-stack > img { object-position: 55% 70%; }
body .auth-signup .auth-story-shade { background: linear-gradient(180deg,#12372508 0%,#12372508 50%,#12372560 75%,#0d2c20eb 100%); }
@media(max-width:760px) {
  body .signup-image-stack { grid-template-rows: 1fr; gap: 0; }
  body .signup-first-photo { display: none; }
  body .signup-image-stack > img { object-position: 50% 65%; }
  body .auth-signup .auth-story-shade { background: linear-gradient(180deg,#12372520,#0d2c20dc); }
}

body .signup-first-photo { position: relative; min-height: 0; overflow: hidden; }
body .signup-first-message { position: absolute; inset: auto 0 0; padding: 56px 32px 28px; background: linear-gradient(180deg,transparent,#0d2c20e6); color: #fff; }
body .signup-first-message h2 { color: #fff; font-size: 30px; line-height: 1.25; margin: 12px 0; }
body main .signup-first-message p { color: #edf5ef; font-size: 14px; line-height: 1.6; max-width: 38ch; }
body .auth-signup .auth-story-shade { pointer-events: none; }
@media(max-width:960px) { body .signup-first-message { padding: 48px 24px 24px; } body .signup-first-message h2 { font-size: 26px; } }

/* Align footer column headers and balance the content below them. */
body .footer-content { align-items: stretch; padding-top: 44px; padding-bottom: 44px; }
body .footer-content > div { display: flex; flex-direction: column; }
body .footer-content .footer-brand { min-height: 44px; margin-bottom: 20px; }
body .footer-content h2 { display: flex; align-items: center; min-height: 44px; margin: 0 0 20px; font-size: 16px; font-weight: 600; }
body .footer-about p { margin: 0 0 14px; max-width: 48ch; line-height: 1.7; }
body .footer-about .footer-guidance { color: #bcd6c9; font-size: 13px; }
body .footer-service-area { align-self: flex-start; margin-top: 4px; margin-bottom: 16px; border-color: #a4c9b22e; }
body .footer-about small { margin-top: auto; padding-top: 8px; color: #adc7bb; }
body .footer-explore { border-left: 1px solid #ffffff12; }
body .footer-explore nav { gap: 4px; }
body .footer-explore nav a { padding: 10px 0; min-height: 42px; border-radius: 0; border-bottom: 1px solid #ffffff0d; }
body .footer-explore nav a:last-child { border-bottom: 0; }
body .footer-explore nav a:hover { background: transparent; color: #f2dbab; }
body .footer-connect > p { color: #cfe2d9; font-size: 14px; }
body .footer-contact-links a { background: #ffffff08; border-color: #b6d4c624; box-shadow: 0 2px 6px #00000005; padding: 12px 14px; }
body .footer-contact-links a > .icon:first-child { width: 20px; height: 20px; color: #e2f1e8; }
body .footer-contact-links a:hover { border-color: #bfdac34f; background: #ffffff10; }
body .footer-connect .footer-contact-links { margin-top: 20px; margin-bottom: 0; }
@media(max-width:960px) {
  body .footer-about small { margin-top: 0; }
  body .footer-explore { border-left: 0; }
}
@media(max-width:600px) {
  body .footer-content { padding-top: 32px; padding-bottom: 32px; }
  body .footer-content h2 { min-height: 28px; margin-bottom: 16px; }
  body .footer-explore,body .footer-connect { border-top: 1px solid #ffffff18; padding-top: 24px; }
}

@media(min-width:961px) { body .footer-connect { border-left: 1px solid #ffffff12; } }

/* Administrator funds: clear headers and aligned editing controls. */
body .admin-fund-card { padding: 20px; border: 1px solid var(--ui-divider); border-radius: 8px; background: #fff; margin-bottom: 16px; }
body .admin-fund-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
body .admin-fund-card header > div { min-width: 0; }
body .admin-fund-card h3 { margin: 0 0 6px; font-size: 17px; overflow-wrap: anywhere; }
body main .admin-fund-card header p { font-size: 14px; color: var(--ui-secondary); margin: 0; }
body .admin-fund-card header > .badge { flex-shrink: 0; }
body .admin-fund-controls { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ui-divider); }
body .admin-fund-card .fund-date-form { display: grid; grid-template-columns: minmax(180px,220px) auto; align-items: end; gap: 8px 12px; }
body .admin-fund-card .fund-date-form .field { margin: 0; }
body .admin-fund-card .fund-date-form input[type=date] { min-height: var(--control-height); }
body .admin-fund-card .form-error { grid-column: 1 / -1; font-size: 13px; }
body .admin-fund-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body .admin-fund-actions .btn { min-width: 80px; }
@media(max-width:600px) {
  body .admin-fund-card { padding: 16px; }
  body .admin-fund-card .fund-date-form { width: 100%; grid-template-columns: minmax(0,1fr) auto; }
  body .admin-fund-controls { align-items: stretch; }
  body .admin-fund-actions { width: 100%; }
  body .admin-fund-actions .btn { flex: 1; }
}

/* Cover choice and date extension remain independent list actions. */
body .admin-fund-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: end; }
body .fund-cover-editor { display: flex; align-items: flex-end; gap: 12px; min-width: 0; grid-column: 1 / -1; }
body .fund-cover-editor img { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ui-divider); flex-shrink: 0; }
body .fund-cover-editor .field { flex: 1; min-width: 0; margin: 0; }
body .fund-cover-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: end; }
body .fund-cover-form .fund-cover-editor { grid-column: auto; }
body .admin-fund-actions { grid-column: 1 / -1; justify-content: flex-end; }
@media(max-width:1000px) { body .admin-fund-controls { grid-template-columns: 1fr; } }
@media(max-width:600px) {
  body .fund-cover-form { grid-template-columns: 1fr; }
  body .fund-cover-form > .btn { justify-self: start; }
  body .fund-cover-editor img { width: 80px; height: 60px; }
  body .admin-fund-actions { justify-content: flex-start; }
}

body .admin-fund-card .fund-date-form { justify-self: start; }

/* Compact fund cards replace the full-width rows. */
body .admin-fund-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 20px; align-items: stretch; }
body .admin-fund-grid > .empty { grid-column: 1 / -1; }
body .admin-fund-grid .admin-fund-card { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 20px; }
body .admin-fund-grid .admin-fund-card header { min-height: 72px; }
body .admin-fund-grid .admin-fund-controls { grid-template-columns: minmax(0,1fr); gap: 20px; margin-top: 16px; flex: 1; }
body .admin-fund-grid .fund-date-form { width: 100%; justify-self: stretch; }
body .admin-fund-grid :is(.fund-date-form,.fund-cover-form) { grid-template-columns: 56px minmax(0,1fr) 130px; gap: 8px; align-items: center; }
body .admin-fund-grid .fund-date-form .field { display: contents; }
body .admin-fund-grid .fund-date-form .field > span { grid-column: 1; grid-row: 1; margin: 0; line-height: 1.3; }
body .admin-fund-grid .fund-date-form input[type=date] { grid-column: 2; grid-row: 1; min-width: 0; padding-inline: 6px; }
body .admin-fund-grid .fund-date-form > .btn { grid-column: 3; grid-row: 1; }
body .admin-fund-grid :is(.fund-date-form,.fund-cover-form) > .btn { width: 130px; }
body .admin-fund-grid .fund-cover-form > .btn { grid-column: 3; grid-row: 1; justify-self: stretch; padding-inline: 10px; }
body .admin-fund-grid .fund-cover-editor { display: contents; }
body .admin-fund-grid .fund-cover-editor .field { grid-column: 2; grid-row: 1; }
body .admin-fund-grid .fund-cover-editor .field > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body .admin-fund-grid .fund-cover-editor img { width: 56px; height: var(--control-height); grid-column: 1; grid-row: 1; }
body .admin-fund-grid .admin-fund-actions { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ui-divider); justify-content: stretch; }
body .admin-fund-grid .admin-fund-actions .btn { flex: 1; }
@media(min-width:1600px) { body .admin-fund-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { body .admin-fund-grid { grid-template-columns: 1fr; } body .admin-fund-grid .admin-fund-card { padding: 16px; } }

/* Keep member search and its reset action on the same row. */
body .member-toolbar { grid-template-columns: minmax(240px,1.5fr) repeat(4,minmax(110px,1fr)) auto; }
body .member-toolbar .member-search { grid-column: auto; }
body .member-toolbar > .btn { grid-column: auto; justify-self: stretch; min-height: var(--control-height); padding: 0 12px; white-space: nowrap; }
@media(max-width:1100px) {
  body .member-toolbar { grid-template-columns: minmax(0,1fr) auto; }
  body .member-toolbar .member-search { grid-column: 1; grid-row: 1; }
  body .member-toolbar > .btn { grid-column: 2; grid-row: 1; }
}
@media(max-width:600px) { body .member-toolbar > .field:not(.member-search) { grid-column: 1 / -1; } }

/* Administrator cards use the same inset as the platform settings panel. */
body .admin-panel { --admin-card-padding: 24px; --admin-content-width: 1440px; padding: var(--admin-card-padding); }
body .admin-panel > * { width: 100%; max-width: var(--admin-content-width); min-width: 0; margin-inline: auto; box-sizing: border-box; }
body .admin-panel > form[data-form=admin-settings], body .admin-panel > p, body .admin-panel > p.muted { max-width: var(--admin-content-width); margin-inline: auto; }
body .admin-panel p { overflow-wrap: anywhere; }
body .admin-panel :is(.admin-fund-card,.member-summary > div,.member-toolbar,.panel) { padding: var(--admin-card-padding); }
body .admin-panel .admin-fund-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr)); }
body main:has(.admin-panel) > .stats-grid .stat-card { padding: 24px; }
@media(max-width:600px) {
  body .admin-panel { --admin-card-padding: 20px; }
  body main:has(.admin-panel) > .stats-grid .stat-card { padding: 20px; }
}

body .admin-panel .row-actions .btn[data-moderate] { min-height: 32px; height: 32px; padding: 0 10px; gap: 6px; font-size: 13px; line-height: 20px; }
body .admin-panel .row-actions .btn[data-moderate] .icon { width: 14px; height: 14px; }
@media(max-width:600px) { body .admin-panel .row-actions .btn[data-moderate] { min-height: 40px; height: 40px; } }

body .admin-panel form[data-form=draw] { display: grid; grid-template-columns: minmax(180px,240px) minmax(180px,240px) max-content; align-items: end; gap: 16px; }
body .admin-panel form[data-form=draw] .form-grid { display: contents; }
body .admin-panel form[data-form=draw] .field { margin: 0; }
body .admin-panel form[data-form=draw] > .btn { margin: 0; }
body .admin-panel form[data-form=draw] + p.muted { margin-top: 16px; margin-bottom: 0; }
@media(max-width:760px) {
  body .admin-panel form[data-form=draw] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .admin-panel form[data-form=draw] > .btn { grid-column: 1 / -1; justify-self: start; }
}
@media(max-width:480px) { body .admin-panel form[data-form=draw] { grid-template-columns: minmax(0,1fr); } }

body :is(.list-pagination,.member-pagination) .btn { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; flex: 0 0 32px; }
body .pagination-mark { font-size: 20px; font-weight: 400; line-height: 1; }
body .list-pagination .btn .pagination-mark { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transform: translateY(-1px); }
@media(max-width:600px) { body :is(.list-pagination,.member-pagination) .btn { width: 40px; min-width: 40px; height: 40px; min-height: 40px; flex-basis: 40px; } }

body .faq-section > .section-heading p { text-align: center; margin-inline: auto; }
body .faq-layout { --faq-panel-height: 680px; display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.6fr); gap: 32px; align-items: stretch; }
body .faq-help-card { display: flex; flex-direction: column; height: var(--faq-panel-height); min-width: 0; overflow: hidden; border: 1px solid var(--ui-divider); border-radius: 12px; background: #fff; }
body .faq-help-card > img { display: block; width: 100%; height: 240px; min-height: 240px; flex: 1; object-fit: cover; }
body .faq-help-content { padding: 24px; }
body .faq-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 10px; color: var(--ui-primary); background: linear-gradient(130deg,#eef8f3,#dcefe4); }
body .faq-help-content h3 { margin: 0 0 10px; }
body .faq-help-content p { margin: 0 0 20px; color: var(--ui-secondary); }
body .faq-layout .faq-list { width: 100%; max-width: none; min-width: 0; height: var(--faq-panel-height); overflow-y: auto; overflow-x: hidden; padding-right: 12px; scrollbar-width: thin; scrollbar-color: #7caa98 #e4eee8; }
body .faq-layout .faq-list::-webkit-scrollbar { width: 8px; }
body .faq-layout .faq-list::-webkit-scrollbar-track { background: #e4eee8; border-radius: 8px; }
body .faq-layout .faq-list::-webkit-scrollbar-thumb { background: #7caa98; border-radius: 8px; }
body .faq-layout .faq-list:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 4px; }
body .faq-layout .faq-list details:last-child { margin-bottom: 0; }
body .fund-body > p { overflow-wrap: anywhere; white-space: normal; }
body .modal form[data-form=event] > .form-grid + .field { margin-top: 20px; }

body .fund-grid.fund-slider { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); overflow-x: auto; overflow-y: hidden; padding-bottom: 18px; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: auto; scrollbar-color: #7caa98 #e4eee8; }
body .fund-slider > .fund-card { scroll-snap-align: start; }
body .fund-slider:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 4px; }
body .fund-slider::-webkit-scrollbar { height: 10px; }
body .fund-slider::-webkit-scrollbar-track { border-radius: 8px; background: #e4eee8; }
body .fund-slider::-webkit-scrollbar-thumb { border-radius: 8px; background: #7caa98; border: 2px solid #e4eee8; }
body .fund-grid.fund-slider:has(> .empty) { grid-auto-columns: 100%; }
@media(max-width:1200px) { body .fund-grid.fund-slider { grid-auto-columns: calc((100% - 48px) / 3); } }
@media(max-width:960px) { body .fund-grid.fund-slider { grid-auto-columns: calc((100% - 24px) / 2); } }
@media(max-width:600px) { body .fund-grid.fund-slider { grid-auto-columns: min(320px,calc(100% - 24px)); gap: 16px; } }
@media(prefers-reduced-motion:reduce) { body .fund-grid.fund-slider { scroll-behavior: auto; } }

body .how-guide { max-width: 1440px; margin-inline: auto; }
body .how-guide-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 24px 0 32px; }
body .how-guide-hero h1 { margin: 12px 0 16px; font-size: clamp(30px,3vw,42px); }
body .how-guide-hero p { max-width: 48ch; font-size: 17px; }
body .how-guide figure { margin: 0; overflow: hidden; border: 1px solid var(--ui-divider); border-radius: 12px; background: #fff; }
body .how-guide-hero figure img { display: block; width: 100%; height: 300px; object-fit: cover; }
body .how-guide figcaption { padding: 12px 16px; color: var(--ui-secondary); font-size: 13px; }
body .how-hero-note { display: flex; gap: 10px; align-items: center; margin-top: 24px; color: var(--ui-primary); font-size: 14px; }
body .how-hero-note .icon { flex-shrink: 0; }
body .how-paths { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-bottom: 48px; }
body .how-path { display: flex; align-items: center; gap: 16px; padding: 24px; border: 1px solid #dbe8df; border-radius: 10px; text-decoration: none; background: linear-gradient(125deg,#fff,#eff7f2); color: var(--ui-text); }
body .how-path:hover { border-color: #8cb7a3; background: linear-gradient(125deg,#f9fcfa,#e7f3eb); }
body .how-path > .icon:first-child { width: 28px; height: 28px; flex-shrink: 0; color: var(--ui-primary); }
body .how-path > .icon:last-child { margin-left: auto; flex-shrink: 0; }
body .how-path h2 { margin: 0 0 6px; font-size: 20px; }
body .how-path p { margin: 0; color: var(--ui-secondary); font-size: 14px; }
body .how-guide-section { margin: 48px 0; scroll-margin-top: 140px; }
body .how-section-heading { margin-bottom: 24px; }
body .how-section-heading h2 { margin: 8px 0; }
body .how-section-heading p { margin: 0; color: var(--ui-secondary); }
body .how-guide-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,1fr); gap: 32px; align-items: start; }
body .how-guide-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
body .how-guide-steps li { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 16px; padding: 24px; background: #fff; border: 1px solid var(--ui-divider); border-radius: 10px; }
body .how-guide-number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ui-primary); background: linear-gradient(135deg,#eaf6ee,#d6eadf); font-weight: 600; }
body .how-step-title { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; }
body .how-step-title .icon { color: var(--ui-primary); flex-shrink: 0; width: 18px; height: 18px; }
body .how-step-title h3 { margin: 0; font-size: 18px; }
body .how-guide-steps p { margin: 0; color: var(--ui-secondary); }
body .how-next { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ui-divider); color: var(--ui-primary); font-size: 13px; line-height: 1.6; }
body .how-next .icon { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
body .how-guide-aside { display: grid; gap: 20px; }
body .how-aside-photo img { display: block; width: 100%; height: 210px; object-fit: cover; }
body .how-side-card { padding: 24px; border: 1px solid var(--ui-divider); border-radius: 10px; background: #fff; }
body .how-side-card h3 { margin: 0 0 16px; }
body .how-side-card p { margin: 0; color: var(--ui-secondary); }
body .how-checklist { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
body .how-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; }
body .how-checklist .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--ui-primary); }
body .how-small-note { display: block; color: var(--ui-secondary); font-size: 13px; line-height: 1.6; }
body .how-side-card p.how-small-note { margin-top: 20px; }
body .how-example { background: linear-gradient(130deg,#f6faf7,#e9f4ec); }
body .how-example-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0; }
body .how-example .how-small-note { margin-top: 12px; }
body .how-guide-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
body .how-guide-contact { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px; border: 1px solid #dbe8df; border-radius: 10px; background: linear-gradient(125deg,#f9fcfa,#e7f3eb); }
body .how-guide-contact > div { display: flex; gap: 16px; align-items: center; }
body .how-guide-contact > div > .icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--ui-primary); }
body .how-guide-contact h2 { margin: 0 0 8px; font-size: 20px; }
body .how-guide-contact p { margin: 0; color: var(--ui-secondary); }
body .how-guide-contact .btn { flex-shrink: 0; }
body .getting-started > .section-heading p { text-align: center; margin-inline: auto; }
body .getting-started .how-guide-layout { max-width: 1440px; margin-inline: auto; align-items: stretch; }
body .getting-started .how-guide-aside { grid-template-rows: minmax(0,1fr) auto; }
body .getting-started .how-aside-photo { display: flex; flex-direction: column; min-height: 0; margin: 0; overflow: hidden; border: 1px solid var(--ui-divider); border-radius: 12px; background: #fff; }
body .getting-started .how-aside-photo img { height: 0; min-height: 240px; flex: 1; object-position: 50% 40%; }
body .getting-started .how-aside-photo figcaption { padding: 12px 16px; color: var(--ui-secondary); font-size: 13px; }
body .getting-started .how-guide-actions { justify-content: center; margin-top: 28px; }
@media(max-width:960px) { body .getting-started .how-guide-aside { grid-template-rows: auto; } body .getting-started .how-aside-photo img { height: 240px; min-height: 0; flex: none; } }
@media(max-width:960px) { body .how-guide-hero { gap: 24px; } body .how-guide-layout { grid-template-columns: minmax(0,1fr); } body .how-guide-aside { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { body .how-guide-hero, body .how-paths, body .how-guide-aside { grid-template-columns: minmax(0,1fr); } body .how-guide-hero { padding-top: 8px; } body .how-guide-hero figure img { height: 220px; } body .how-guide-section { margin: 32px 0; } body .how-paths { margin-bottom: 32px; gap: 12px; } body .how-path, body .how-side-card { padding: 20px; } body .how-guide-steps li { padding: 20px; gap: 12px; grid-template-columns: 32px minmax(0,1fr); } body .how-guide-number { width: 32px; height: 32px; } body .how-guide-contact { flex-direction: column; align-items: stretch; padding: 20px; } }
@media(max-width:960px) { body .faq-layout { --faq-panel-height: clamp(360px,70dvh,680px); grid-template-columns: minmax(0,1fr); gap: 24px; } body .faq-help-card { height: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); } body .faq-help-card > img { height: 100%; min-height: 240px; } }
@media(max-width:600px) { body .faq-help-card { display: block; } body .faq-help-card > img { height: 200px; min-height: 0; } body .faq-help-content { padding: 20px; } }