:root { color-scheme: light; --ink:#17221d; --muted:#65736c; --line:#dce5df; --paper:#fff; --wash:#f3f7f4; --green:#176c4a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--wash); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.site-header { height:64px; background:var(--paper); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100% - 1080px)/2)); }
.brand { color:var(--ink); font-size:21px; font-weight:750; text-decoration:none; letter-spacing:-.03em; }
.menu { position:relative; }.menu summary { width:42px; height:42px; border-radius:9px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:10px; cursor:pointer; list-style:none; }.menu summary::-webkit-details-marker { display:none; }.menu summary:hover { background:var(--wash); }.menu summary span { height:2px; width:22px; background:var(--ink); border-radius:2px; }.menu-popover { position:absolute; z-index:10; right:0; top:48px; width:220px; padding:8px; background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 50px rgba(20,40,30,.16); }.menu-popover a,.menu-popover button { display:block; width:100%; padding:10px 11px; border:0; border-radius:7px; background:none; color:var(--ink); text-align:left; text-decoration:none; font:inherit; cursor:pointer; }.menu-popover a:hover,.menu-popover button:hover { background:var(--wash); }.menu-user { padding:8px 11px 12px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.container { max-width:1080px; margin:0 auto; padding:48px 24px; }
.page-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:28px; }
h1 { margin:2px 0 0; font-size:34px; letter-spacing:-.035em; } h2 { font-size:17px; margin:0 0 18px; }
.eyebrow { color:var(--green); font-size:12px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; margin:0; }
.muted,small { color:var(--muted); } small { display:block; margin-top:2px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; }
.church-list { display:grid; grid-template-columns:1fr; gap:12px; }
.workspace-card,.panel,.auth-card,.empty { background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 30px rgba(26,51,39,.04); }
.workspace-card { display:flex; align-items:center; gap:14px; padding:20px; color:inherit; text-decoration:none; }
.workspace-card:hover { border-color:#99bbaa; transform:translateY(-1px); }
.workspace-icon { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:#dff2e8; color:var(--green); font-weight:800; }
.arrow { margin-left:auto; color:var(--muted); font-size:20px; }
.add-church-card { border-style:dashed; background:#f9fcfa; }
.add-church-card .add-icon { font-size:25px; font-weight:500; }
.church-card { justify-content:space-between; }
.workspace-card-copy { min-width:0; }
.plan-summary { margin:7px 0 0; color:var(--muted); font-size:13px; font-weight:650; }
.summary-grid { display:grid; grid-template-columns:2fr 1fr; gap:18px; margin-bottom:18px; }
.panel { padding:24px; }.row { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-top:1px solid var(--line); }.row:first-of-type { border-top:0; }
.status { align-self:center; font-size:12px; padding:4px 9px; border-radius:999px; background:#edf1ee; white-space:nowrap; }.status.connected,.status.verified { color:#075d3c; background:#dff4e8; }
.metric { font-size:38px; font-weight:780; margin:0; }.back { color:var(--green); text-decoration:none; }.empty { padding:42px; text-align:center; }
.auth-card,.form-card { max-width:460px; margin:40px auto; padding:32px; background:var(--paper); border:1px solid var(--line); border-radius:14px; }.auth-card label,.form-card label,.inline-form label { display:block; font-weight:650; margin:16px 0 6px; }.auth-card input,.form-card input,.inline-form input,.inline-form select { width:100%; padding:11px 12px; border:1px solid #bbc8c0; border-radius:8px; font:inherit; }.primary { width:100%; margin-top:22px; padding:12px; border:0; border-radius:8px; color:white; background:var(--green); font-weight:700; cursor:pointer; }.alert,.flash { padding:10px 12px; border-radius:8px; background:#fff0ee; color:#8f251b; }.flash { margin-bottom:18px; }.flash.success { color:#075d3c; background:#dff4e8; }.flash.info { color:#40534a; background:#edf3ef; }.button { display:inline-block; border:0; border-radius:8px; padding:10px 14px; color:white; background:var(--green); text-decoration:none; font-weight:700; cursor:pointer; }.button.secondary { color:var(--green); background:#e3f1e9; }.button.disabled { color:#7a8580; background:#e9eeeb; cursor:not-allowed; }.button,.primary,.secondary,.text-button { transition:transform .08s ease,filter .15s ease,opacity .15s ease; }.button:not(.disabled):active,.primary:not(:disabled):active,.secondary:not(:disabled):active,.text-button:not(:disabled):active { transform:scale(.96); }.button.is-loading,.primary.is-loading,.secondary.is-loading,.text-button.is-loading { pointer-events:none; opacity:.78; cursor:wait; }.button.is-loading::after,.primary.is-loading::after,.secondary.is-loading::after,.text-button.is-loading::after { content:""; display:inline-block; width:12px; height:12px; margin-left:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:button-spin .65s linear infinite; }@keyframes button-spin { to { transform:rotate(360deg); } }.actions { display:flex; gap:14px; align-items:center; }.actions a { color:var(--green); text-decoration:none; }.settings-grid { display:grid; gap:18px; }.mapping { display:grid; grid-template-columns:1fr auto 1.4fr; gap:14px; padding:12px 0; border-top:1px solid var(--line); }.mapping:first-of-type { border-top:0; }.members { width:100%; max-width:none; }.inline-form { border-top:1px solid var(--line); margin-top:18px; padding-top:20px; }.inline-form h3 { font-size:15px; }.inline-form .button { margin-top:18px; }.definition-list div { display:grid; grid-template-columns:180px 1fr; padding:12px 0; border-top:1px solid var(--line); }.definition-list div:first-child { border-top:0; }.errorlist { color:#9b2c22; padding-left:18px; }
@media (max-width:700px) { .summary-grid { grid-template-columns:1fr; }.container { padding-top:28px; }.account-menu span { display:none; }.connection-row { align-items:flex-start; }.connection-row .button { min-width:88px; }.mapping-field { grid-template-columns:1fr; gap:8px; } }
.actions a.button { color:white; }
.actions a.button.secondary { color:var(--green); }
.connection-list { border-top:1px solid var(--line); }
.connection-row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; border-bottom:1px solid var(--line); }
.connection-row .button { min-width:104px; text-align:center; }
.section-action { margin-top:18px; }
.mapping-editor { max-width:760px; }
.mapping-field { display:grid; grid-template-columns:minmax(180px,1fr) minmax(260px,1.5fr); gap:24px; align-items:center; padding:16px 0; border-top:1px solid var(--line); }
.mapping-field select { width:100%; padding:11px 12px; border:1px solid #bbc8c0; border-radius:8px; background:white; font:inherit; }
.mapping-editor form > .button { margin-top:20px; }
.connection-buttons { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.text-action,.cancel-link { color:var(--green); text-decoration:none; font-weight:650; }
.confirmation-card { max-width:650px; }
.confirmation-card form { margin-top:22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.alert.caution { color:#684b00; background:#fff6d8; margin-top:20px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }.section-heading h2 { margin:0; }
.form-panel { max-width:560px; }.form-panel label { display:block; font-weight:650; margin:16px 0 6px; }.form-panel input { width:100%; padding:11px 12px; border:1px solid #bbc8c0; border-radius:8px; font:inherit; }.form-panel .button { margin-top:20px; }
.danger-zone { margin-top:18px; border-color:#e5b8ad; }
.danger-button { background:#9b2c22; }
.mapping-heading { align-items:flex-start; }.mapping-count { color:#466057; background:#edf3ef; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:700; white-space:nowrap; }.mapping-count.needs-attention { color:#7a4700; background:#fff1d2; }
.mapping-summary { display:flex; align-items:center; justify-content:space-between; gap:20px; }.mapping-summary h2 { margin-bottom:8px; }
.settings-billing-card { display:flex; align-items:center; justify-content:space-between; gap:20px; }.settings-billing-card h2 { margin-bottom:8px; }.settings-billing-card small { display:block; margin-top:3px; }
.queue-controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.dashboard-section { margin-bottom:18px; }
.toggle-form label { display:flex; align-items:center; gap:9px; cursor:pointer; font-weight:650; }.toggle-form input { position:absolute; opacity:0; pointer-events:none; }.toggle { width:42px; height:24px; border-radius:999px; background:#aeb9b3; padding:3px; transition:.15s; }.toggle::after { content:""; display:block; width:18px; height:18px; border-radius:50%; background:white; transition:.15s; }.toggle-form input:checked + .toggle { background:var(--green); }.toggle-form input:checked + .toggle::after { transform:translateX(18px); }.toggle-form input:focus-visible + .toggle { outline:3px solid #9acbb5; outline-offset:2px; }
.auth-links { display:flex; flex-direction:column; gap:8px; margin-top:18px; }.auth-links a { color:var(--green); font-weight:650; text-decoration:none; }.stacked-actions { display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:22px; }.stacked-actions .button { text-align:center; }.member-row { align-items:center; }.member-actions { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }.member-role-row { display:flex; align-items:center; gap:8px; }.member-actions select { padding:9px 10px; border:1px solid #bbc8c0; border-radius:8px; background:white; font:inherit; }.member-remove-row { display:flex; justify-content:flex-end; width:100%; }.text-button { padding:8px 0; border:0; background:none; font:inherit; font-weight:650; cursor:pointer; }.danger-text { color:#9b2c22; }
.password-requirements { margin:18px 0; padding:14px 16px; border-radius:9px; background:#edf3ef; color:#40534a; }.password-requirements ul { margin:7px 0 0; padding-left:20px; }.password-requirements li { margin:3px 0; }
.status-link { align-self:center; text-decoration:none; }.status.reconciled { color:#735400; background:#fff3cf; }.status.posting { color:#24558a; background:#e4f0fc; }.status.unknown,.status.rejected { color:#8f251b; background:#fff0ee; }.needs-review { color:#8f251b; font-weight:700; }.workflow-history { margin-top:18px; }.activity-list { padding-top:10px; padding-bottom:10px; }.activity-row { display:grid; grid-template-columns:12px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line); }.activity-row:first-of-type { border-top:0; }.activity-marker { width:9px; height:9px; margin-top:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px #dff2e8; }
.transaction-row { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line); }.transaction-row:first-of-type { border-top:0; }.transaction-main { display:flex; min-width:0; flex-direction:column; gap:4px; }.transaction-main small { display:block; }.status.ready_manual { color:#24558a; background:#e4f0fc; }.status.awaiting_payout,.status.refunded,.status.action_required,.status.partially_processed { color:#735400; background:#fff3cf; }.status.posted_manual,.status.matched_payout,.status.posted_payout { color:#075d3c; background:#dff4e8; }
.inline-flash { display:inline-block; max-width:620px; padding:7px 11px; border-radius:8px; font-size:13px; font-weight:650; line-height:1.35; transition:opacity .2s ease,transform .2s ease; }.inline-flash.is-dismissing { opacity:0; transform:translateY(-3px); }.inline-flash.success { color:#075d3c; background:#dff4e8; }.inline-flash.info { color:#40534a; background:#edf3ef; }.inline-flash.error { color:#8f251b; background:#fff0ee; }.mapping-summary .inline-flash { margin-top:8px; }
.context-heading { display:grid; grid-template-columns:1fr auto 1fr; }.context-heading h2 { grid-column:1; }.context-heading .inline-flash { grid-column:2; text-align:center; }
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:18px; }.pricing-card { display:flex; flex-direction:column; align-items:flex-start; }.pricing-card.featured { border-color:#8ab8a1; }.pricing-card.current { box-shadow:0 0 0 2px #8ab8a1 inset; }.plan-price { font-size:25px; font-weight:780; margin:0 0 8px; }.pricing-card .button,.pricing-card .status { margin-top:auto; }.usage-panel { margin-bottom:18px; }.usage-panel .metric small { display:inline; font-size:14px; font-weight:500; }.usage-track { height:9px; overflow:hidden; border-radius:999px; background:#e5ece8; }.usage-track span { display:block; height:100%; border-radius:inherit; background:var(--green); }
.plan-selector { min-width:0; margin:0; padding:0; border:0; }.plan-option { position:relative; display:flex; }.plan-radio { position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }.plan-option .pricing-card { width:100%; cursor:pointer; transition:border-color .15s ease,box-shadow .15s ease,transform .08s ease; }.plan-option .pricing-card:hover { border-color:#8ab8a1; transform:translateY(-1px); }.plan-radio:focus-visible + .pricing-card { outline:3px solid #9acbb5; outline-offset:3px; }.plan-radio:checked + .pricing-card { border-color:var(--green); box-shadow:0 0 0 2px var(--green) inset; background:#f8fcfa; }.plan-name { font-size:17px; font-weight:700; margin-bottom:18px; }.plan-selection { margin-top:auto; padding:8px 12px; border-radius:8px; color:var(--green); background:#e3f1e9; font-weight:700; }.plan-radio:checked + .pricing-card .plan-selection { color:white; background:var(--green); font-size:0; }.plan-radio:checked + .pricing-card .plan-selection::after { content:"✓ Selected"; font-size:15px; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.row-main { min-width:0; }.row-action { display:flex; align-items:center; flex:0 0 auto; }.context-warning { display:block; width:max-content; max-width:100%; margin-top:7px; padding:5px 9px; border-radius:7px; font-size:12px; font-weight:700; }.context-warning.warning { color:#735400; background:#fff3cf; }.context-warning.danger { color:#8f251b; background:#fff0ee; }.context-alert { margin-top:14px; padding:14px 16px; border-radius:9px; }.context-alert.warning { color:#684b00; background:#fff6d8; }.context-alert.danger { color:#8f251b; background:#fff0ee; }.context-alert p { margin:6px 0 12px; }.context-alert form { margin:0; }.button.warning-button { color:#7a4700; background:#fff1d2; }.post-disabled { margin-top:16px; }
@media (max-width:700px) { .context-heading { grid-template-columns:1fr; }.context-heading h2,.context-heading .inline-flash { grid-column:1; }.context-heading .inline-flash { margin-top:8px; } }
@media (max-width:700px) { .batch-row { align-items:flex-start; flex-direction:column; }.row-action { width:100%; }.row-action .button,.row-action form { width:100%; }.row-action .button { text-align:center; } }
@media (max-width:700px) { .member-row { align-items:flex-start; flex-direction:column; }.member-actions { align-items:flex-start; } }
@media (max-width:700px) { .church-card { align-items:center; }.church-card .arrow { margin-left:auto; } }
@media (max-width:700px) { .settings-billing-card { align-items:flex-start; flex-direction:column; }.settings-billing-card .button { width:100%; text-align:center; } }
.billing-summary-row,.payment-verification,.billing-church-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 0; border-top:1px solid var(--line); }.billing-total { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; border-top:2px solid var(--line); font-size:17px; }.payment-verification { margin-top:4px; }.billing-card > .button { margin-top:12px; }.billing-church-row { margin-top:14px; }.billing-schedule { margin-bottom:18px; }.billing-schedule form { margin-top:20px; }.cancellation-note { max-width:720px; margin-bottom:0; }
.form-panel label.checkbox-row { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.form-panel .checkbox-row input[type="checkbox"] { flex:0 0 auto; width:18px; height:18px; margin:3px 0 0; padding:0; }
.form-panel .checkbox-row > span { flex:1; min-width:0; }
.payout-transactions > summary { cursor:pointer; font-size:18px; font-weight:700; }
.payout-transactions[open] > summary { margin-bottom:16px; }