.wrap { max-width: 640px; margin: 0 auto; padding: 32px 24px 80px; }
        .crumb { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
        .crumb a { color: var(--text-muted); text-decoration: none; }
        .crumb a:hover { text-decoration: underline; }
        h1 { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
        .sub { color: var(--text-secondary); margin: 0 0 28px; }
        form { background: white; border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-12); padding: var(--space-20); }
        .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
        .field { margin-bottom: 16px; }
        .field label { display: block; font-size: 16px; line-height: 1.5; font-weight: 600; margin-bottom: 8px; color: var(--text-primary, #111); }
        .field input, .field select, .field textarea {
            width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #64748b;
            border-radius: 8px; background: var(--bg); color: var(--text-primary); font-size: 16px; line-height: 1.5; font-family: inherit; box-sizing: border-box;
        }
        .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent, #2563eb); }
        .field .hint { font-size: 16px; line-height: 1.5; color: var(--text-muted); margin-top: 4px; }
        .actions { display: flex; gap: 10px; margin-top: 24px; }
        .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; text-align: center; cursor: pointer; border: none; }
        .btn-primary { background: var(--accent, #2563eb); color: white; }
        .btn-secondary { background: white; color: var(--text-primary, #111); border: 1.5px solid var(--border, #e5e7eb); }
        .error { background: #fee2e2; border: 1.5px solid #fca5a5; color: #991b1b; padding: 12px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }

        @media (max-width: 375px) {
            .wrap { padding: 24px 12px 56px; }
            form { padding: 20px; }
            .row { grid-template-columns: 1fr; gap: 0; }
            .actions { flex-direction: column; }
            .actions .btn { width: 100%; }
        }

/* Keep the persistent alert available for async submission failures. */
.error:empty { margin: 0; padding: 0; border: 0; }
.required-marker { color: #b91c1c; }
.field input.sr-form-invalid[aria-invalid="true"],
.field select.sr-form-invalid[aria-invalid="true"] { border: 2px solid #dc3545; }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
#submit-btn.is-loading { gap: 8px; }
#submit-btn.is-loading::before { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: org-form-spin 0.8s linear infinite; }
@keyframes org-form-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #submit-btn.is-loading::before { animation: none; }
}

/* Keep known organization creation separate from a retryable logo upload. */
#org-form[hidden],
.org-logo-recovery[hidden],
.org-logo-recovery [hidden] { display: none; }
.org-logo-recovery { margin-top: 24px; }
.org-logo-recovery h2 { color: #111827; font-size: 24px; margin-bottom: 12px; scroll-margin-top: 88px; }
.org-logo-recovery p { color: #374151; line-height: 1.5; margin-bottom: 16px; }
.org-logo-recovery .error { color: #991b1b; }
.org-logo-recovery p:empty { margin: 0; }
.org-logo-recovery .sr-form-validation-error { min-height: 3em; margin: 8px 0 0; color: var(--color-red-800, #991b1b); font-size: 14px; line-height: 1.5; }
.org-logo-recovery .actions { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--space-12, 12px);  }
.org-logo-recovery .btn {   max-width: 100%;
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-10, 10px) var(--space-18, 18px);
    border-radius: var(--radius-8, 8px);
    font-family: inherit;
    font-size: var(--font-size-16, 16px);
    font-weight: 600;
    line-height: 1.5;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    background: var(--bg, #fff);
    border: 1px solid #64748b;
    color: var(--text-primary, #111827);
}
.org-logo-recovery .btn-primary {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-10, 10px) var(--space-18, 18px);
    border-radius: var(--radius-8, 8px);
    font-family: inherit;
    font-size: var(--font-size-16, 16px);
    font-weight: 600;
    line-height: 1.5;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    background: var(--accent, #2563eb);
    border: 1px solid var(--accent, #2563eb);
    color: var(--color-white, #fff);
}
.org-logo-recovery .btn-secondary { border-color: #6b7280;
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-10, 10px) var(--space-18, 18px);
    border-radius: var(--radius-8, 8px);
    font-family: inherit;
    font-size: var(--font-size-16, 16px);
    font-weight: 600;
    line-height: 1.5;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    background: var(--bg, #fff);
    border: 1px solid #64748b;
    color: var(--text-primary, #111827);
}
.org-logo-recovery .field input { min-width: 0; border: 2px solid #6b7280; }
.org-logo-recovery .field input.sr-form-invalid[aria-invalid="true"] { border: 2px solid #dc3545; }
.org-logo-recovery h2:focus,
.org-logo-recovery :is(a, button, input):focus-visible { outline: 3px solid var(--accent, #2563eb); outline-offset: var(--space-2, 2px); }
.org-logo-recovery [aria-disabled="true"] { cursor: wait; }
#org-logo-retry.is-loading { gap: 8px; }
#org-logo-retry.is-loading::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: org-form-spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    #org-logo-retry.is-loading::before { animation: none; }
}
@media (forced-colors: active) {
    .org-logo-recovery h2:focus,
    .org-logo-recovery :is(a, button, input):focus-visible { outline-color: Highlight; }
}

.org-logo-recovery .actions > :is(a, button) { width: 100%; min-width: 44px; max-width: 100%; box-sizing: border-box; align-self: stretch; margin: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) { .org-logo-recovery .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.org-logo-recovery .btn:not(:disabled):hover { background: var(--bg-muted, #f9fafb); color: var(--text-primary, #111827); filter: none; }

.org-logo-recovery .btn-primary:not(:disabled):hover { background: var(--color-blue-700, #1d4ed8); color: var(--color-white, #fff); filter: none; }

.org-logo-recovery .btn-secondary:not(:disabled):hover { background: var(--bg-muted, #f9fafb); color: var(--text-primary, #111827); filter: none; }

/* Canonical fields for this flow, with invalid borders kept distinct. */
.org-logo-recovery .field input {
    min-height: 44px;
    max-width: 100%;
    padding: var(--space-10, 10px) var(--space-12, 12px);
    border: 1px solid #64748b;
    border-radius: var(--radius-8, 8px);
    background: var(--bg, #fff);
    color: var(--text-primary, #111827);
    font-family: inherit;
    font-size: var(--font-size-16, 16px);
    line-height: 1.5;
    box-sizing: border-box;
}
.org-logo-recovery .field input[aria-invalid="true"] { border: 2px solid #dc3545; }

/* Canonical form action geometry, including the initial create action. */
#org-form .actions { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--space-12); }
#org-form .btn { padding: 10px 18px; border: 1px solid #64748b; border-radius: var(--radius-8); font: 600 16px/1.5 var(--font-family-sans); white-space: normal; overflow-wrap: anywhere; box-sizing: border-box; }
#org-form .btn-primary { border-color: var(--accent); }
#org-form .btn-primary:hover { background: var(--color-blue-700); }
#org-form .btn-secondary:hover { background: var(--bg-muted); }
#org-form .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#org-form .error { padding: 12px 16px; font-size: 16px; line-height: 1.5; }
#submit-btn.is-loading, #org-logo-retry.is-loading { position: relative; }
#submit-btn.is-loading::before, #org-logo-retry.is-loading::before { position: absolute; left: 1px; top: calc(50% - 8px); box-sizing: border-box; }
@media (min-width: 768px) { #org-form .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .row { grid-template-columns: minmax(0, 1fr); } }

#org-form .error:empty { margin: 0; padding: 0; border: 0; }