/* Archivo, official condensed (75%) instances; SIL Open Font License in fonts/archivo-condensed/OFL.txt. */
@font-face { font-family: "Archivo Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-condensed/archivo-condensed-500.ttf") format("truetype"); }
@font-face { font-family: "Archivo Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/archivo-condensed/archivo-condensed-600.ttf") format("truetype"); }
@font-face { font-family: "Archivo Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/archivo-condensed/archivo-condensed-800.ttf") format("truetype"); }
:root {
    --ux-navy: #031B45;
    --ux-orange: #E8500A;
    --ux-petrol: #1A6B5A;
    --ux-grey: #6D6E71;
    --ux-text: #1C2333;
    --ux-bg: #F2F3F6;
    --ux-surface: #FFFFFF;
    --ux-border: #DCE4F2;
    --ux-danger: #D9362B;
    --ux-font: "Archivo Condensed", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font: 500 1rem/1.55 var(--ux-font); color: var(--ux-text); background: var(--ux-surface); }
a { color: var(--ux-navy); text-underline-offset: .2em; }
a:hover { color: var(--ux-orange); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ux-orange); outline-offset: 4px; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); min-height: 100svh; }
.auth-main { display: flex; flex-direction: column; min-width: 0; padding: 2.35rem clamp(1.5rem, 5vw, 5.5rem) 1.5rem; }
.auth-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin: 0 auto; max-width: 620px; }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; padding: .3rem 0; }
.brand img { width: 145px; height: auto; }
.brand-pro { color: var(--ux-navy); font-size: .74rem; font-weight: 800; letter-spacing: .1em; border-left: 1px solid var(--ux-border); padding-left: .7rem; }
.language-switch { display: inline-flex; align-items: center; color: #c0c5ce; gap: .15rem; }
.language-switch button { min-width: 44px; background: transparent; border: 0; padding: .6rem .45rem; color: var(--ux-grey); font-size: .84rem; min-height: 44px; }
.language-switch button[aria-pressed=true] { color: var(--ux-navy); font-weight: 800; }
.auth-content { width: 100%; max-width: 440px; margin: auto; padding: 3.5rem 0 2rem; }
.section-kicker { display: block; color: var(--ux-grey); font-size: .76rem; letter-spacing: .15em; font-weight: 600; margin-bottom: .9rem; }
.page-heading { margin-bottom: 2rem; }
.page-heading h1 { font-size: clamp(2rem, 2.8vw, 2.8rem); line-height: 1.12; font-weight: 800; letter-spacing: -.035em; color: var(--ux-navy); margin: 0 0 .85rem; }
.page-heading p { color: var(--ux-grey); line-height: 1.6; margin: 0; font-size: 1.02rem; }
.account-form { display: grid; gap: 1.25rem; }
.registration-code-panel { display: grid; gap: 1rem; }
.registration-code-panel p { margin: 0; }
.onboarding-section { margin-top: 1.5rem; }
.auth-layout-full-width { grid-template-columns: minmax(0, 1fr); }
.auth-layout-full-width .auth-header, .auth-layout-full-width .auth-content, .auth-layout-full-width .auth-footer { width: 100%; max-width: 1280px; }
.auth-layout-full-width .auth-content { margin: 0 auto; padding-top: 2.5rem; }
.application-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.application-page-heading .page-heading { min-width: 0; margin-bottom: 0; }
.application-refresh { flex: 0 0 auto; }
.application-refresh .ux-button { width: auto; min-height: 44px; }
.application-refresh svg { flex: 0 0 20px; }
.application-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.application-information, .application-files { min-width: 0; }
.application-files > .onboarding-section:first-child { margin-top: 0; }
.application-session-actions { display: flex; justify-content: flex-end; }
.application-session-actions .ux-button { width: auto; }
@media (max-width: 860px) { .application-columns { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) { .application-page-heading { gap: .75rem; } .application-refresh .ux-button { padding: .65rem .75rem; gap: .4rem; } }
.onboarding-documents, .onboarding-choices { display: grid; gap: 1.25rem; }
.onboarding-choice, .onboarding-document { min-width: 0; border: 1px solid var(--ux-border); border-radius: 14px; padding: 1.25rem; overflow-wrap: anywhere; }
.onboarding-choice h2, .onboarding-document h2 { font-size: 1.3rem; line-height: 1.25; margin: 0 0 .75rem; color: var(--ux-navy); }
.onboarding-choice p { color: var(--ux-grey); }
.onboarding-pdf { display: block; width: 100%; height: 520px; border: 1px solid var(--ux-border); border-radius: 8px; }
.onboarding-confirm { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.5; }
.onboarding-confirm input { flex: 0 0 auto; width: 20px; height: 20px; margin: .2rem 0 0; accent-color: var(--ux-navy); }
.onboarding-details { display: grid; gap: 1rem; margin: 1rem 0; }
.onboarding-details dt { font-weight: 600; color: var(--ux-grey); }
.onboarding-details dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
.onboarding-preserve { white-space: pre-wrap; overflow-wrap: anywhere; }
.application-document-guidance, .application-document-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; }
.application-document-guidance h3 { font-size: 1.05rem; margin: 0 0 .4rem; color: var(--ux-navy); }
.application-document-guidance p { margin: 0; }
.application-document-list li { min-width: 0; display: grid; gap: .6rem; padding: 1rem 0; border-bottom: 1px solid var(--ux-border); }
.application-document-list strong { overflow-wrap: anywhere; }
.application-document-list p { margin: .25rem 0 0; font-size: .9rem; }
.application-document-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.application-document-actions .ux-button { width: auto; min-height: 42px; padding: .5rem .9rem; }
.application-document-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
@media (max-width: 575px) { .onboarding-pdf { height: 360px; } .onboarding-choice, .onboarding-document { padding: 1rem; } }
.field { min-width: 0; }
.field:has(input[required],select[required]) > label::after { content: " *"; color: var(--ux-orange); }
.field select.form-control { width: 100%; font-family: inherit; }
.field label { font-weight: 600; color: var(--ux-navy); margin-bottom: .5rem; font-size: .96rem; }
.form-field-title { color: var(--ux-navy); font-size: .96rem; font-weight: 600; line-height: 1.35; }
.form-field-hint { color: var(--ux-grey); font-size: .81rem; line-height: 1.5; display: block; margin-top: .4rem; }
.form-control { min-height: 50px; border: 1px solid var(--ux-border); border-radius: 10px; background: #fff; color: var(--ux-text); padding: .7rem .9rem; font-size: 1rem; }
.form-control:hover { border-color: #a7b5c9; }
.form-control:focus { border-color: var(--ux-navy); box-shadow: 0 0 0 3px rgba(3,27,69,.10); color: var(--ux-text); }
.form-control.input-validation-error { border-color: var(--ux-danger); }
.password-input { position: relative; }
.password-input .form-control { padding-right: 5rem; }
.password-toggle { position: absolute; top: 1px; right: 3px; height: calc(100% - 2px); min-width: 64px; color: var(--ux-grey); background: transparent; border: 0; font-size: .84rem; padding: .3rem .6rem; border-radius: 8px; }
.password-toggle:hover { color: var(--ux-navy); }
.form-options { display: flex; justify-content: space-between; gap: .8rem; align-items: center; margin: .1rem 0 .25rem; font-size: .9rem; }
.form-options a { font-weight: 600; white-space: nowrap; }
.remember { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.form-check-input { float: none; flex: 0 0 auto; margin: 0; width: 18px; height: 18px; border-color: #a7b5c9; cursor: pointer; }
.form-check-input:checked { background-color: var(--ux-navy); border-color: var(--ux-navy); }
.form-check-input:focus { border-color: var(--ux-navy); box-shadow: 0 0 0 3px rgba(3,27,69,.10); }
.ux-button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; min-height: 48px; border: 1px solid transparent; border-radius: 10px; padding: .7rem 1.1rem; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .16s, border-color .16s, box-shadow .16s, transform .16s; text-align: center; cursor: pointer; }
.ux-button-primary { background: var(--ux-orange); border-color: var(--ux-orange); color: #fff; box-shadow: 0 3px 9px rgba(232,80,10,.16); }
.ux-button-primary:hover { background: #C94306; border-color: #C94306; box-shadow: 0 5px 13px rgba(232,80,10,.22); color: #fff; transform: translateY(-1px); }
.ux-button-primary span:last-child[aria-hidden] { margin-left: auto; font-size: 1.3rem; }
.ux-button-primary span:first-child { margin-left: auto; }
.ux-button-outline { color: var(--ux-navy); background: #fff; border-color: #b7c7dc; }
.ux-button-outline:hover { border-color: var(--ux-navy); background: #eef3f9; color: var(--ux-navy); }
.ux-button:focus-visible { outline: 3px solid var(--ux-navy); outline-offset: 3px; }
.ux-button-compact { width: auto; min-height: 42px; padding: .55rem .9rem; font-size: .92rem; white-space: normal; }
.ux-button:disabled { cursor: wait; opacity: .7; }
.auth-divider { display: flex; align-items: center; gap: 1rem; color: #89909b; margin: 1.8rem 0 1.1rem; font-size: .68rem; letter-spacing: .1em; }
.auth-divider span:first-child, .auth-divider span:last-child { flex: 1; height: 1px; background: var(--ux-border); }
.register-prompt p { color: var(--ux-grey); font-size: .95rem; text-align: center; margin-bottom: .7rem; }
.staff-note { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1.6rem; padding: 1rem 1.1rem; border-radius: 10px; background: var(--ux-bg); color: var(--ux-grey); font-size: .87rem; }
.staff-note p { margin: 0; }
.note-symbol { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #8994a4; width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; font-size: .7rem; margin-top: .16rem; }
.auth-footer { width: 100%; margin: auto auto 0; max-width: 620px; color: var(--ux-grey); font-size: .76rem; padding-top: 1.6rem; }
.auth-aside { overflow: hidden; position: sticky; top: 0; align-self: start; height: 100svh; min-height: 680px; display: flex; flex-direction: column; padding: clamp(3rem, 6vw, 6.5rem) clamp(2rem, 4.8vw, 5rem) 2.5rem; color: #fff; background: var(--ux-navy); }
.auth-aside::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 90% 70%, rgba(26,107,90,.25), transparent 60%); }
.aside-copy, .aside-footer { position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: .7rem; font-size: .71rem; letter-spacing: .14em; color: #b8c4d7; font-weight: 600; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ux-orange); flex: 0 0 auto; }
.aside-copy h2 { white-space: pre-line; font-size: clamp(2.8rem, 4.3vw, 4.8rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; margin: 1.7rem 0 1.25rem; }
.aside-copy p { color: #b8c4d7; font-size: 1.06rem; max-width: 340px; line-height: 1.6; }
.court-art { position: relative; height: 330px; min-height: 240px; flex: 1; margin: 1.5rem -1.5rem 1.8rem; }
.court-outline { position: absolute; width: 72%; max-width: 300px; height: 112%; left: 17%; top: 5%; border: 1px solid #355073; border-radius: 7px; transform: perspective(600px) rotateX(40deg) rotateZ(-24deg); opacity: .7; }
.court-outline::before { content: ""; position: absolute; inset: 12px; border: 1px solid #355073; border-radius: 3px; }
.court-line { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #355073; }
.court-circle { position: absolute; left: 32%; top: 37%; width: 36%; height: 26%; border: 1px solid #46607e; border-radius: 50%; }
.court-area { position: absolute; left: 27%; width: 46%; height: 23%; border: 1px solid #355073; }
.court-area-top { top: 12px; border-radius: 0 0 80% 80%; }
.court-area-bottom { bottom: 12px; border-radius: 80% 80% 0 0; }
.court-ball { position: absolute; width: 35px; height: 35px; top: 28%; right: 20%; background: var(--ux-orange); border-radius: 50%; box-shadow: 0 12px 35px #020b1d88; }
.court-ball::after { content: ""; position: absolute; border-left: 1px solid #ffffff50; border-right: 1px solid #ffffff50; border-radius: 50%; width: 20px; height: 100%; left: 7px; transform: rotate(28deg); }
.court-caption { position: absolute; bottom: 10%; left: 2%; display: flex; align-items: center; gap: .85rem; background: #183253; border: 1px solid #3c5370; box-shadow: 0 20px 40px #020b1d40; border-radius: 14px; padding: 1rem 1.2rem; transform: rotate(-3deg); }
.caption-icon { width: 34px; height: 34px; background: var(--ux-petrol); display: grid; place-items: center; border-radius: 10px; color: #fff; }
.court-caption strong, .court-caption div>span { display: block; }
.court-caption strong { font-size: .95rem; font-weight: 600; }
.court-caption div>span { color: #b8c4d7; font-size: .78rem; margin-top: .1rem; }
.aside-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .78rem; color: #b8c4d7; }
.small-mark { letter-spacing: .15em; font-size: .65rem; color: #7e91ac; }
.back-link { display: inline-flex; gap: .7rem; align-items: center; width: fit-content; max-width: 100%; padding: .4rem .85rem .4rem .4rem; border: 1px solid #b7c7dc; border-radius: 999px; background: #fff; color: var(--ux-navy); font-size: .95rem; font-weight: 600; margin-bottom: 1.4rem; min-height: 44px; text-decoration: none; box-shadow: 0 2px 7px rgba(3,27,69,.06); overflow-wrap: anywhere; }
.back-link:hover { background: #eef3f9; border-color: var(--ux-navy); color: var(--ux-navy); }
.back-link:focus-visible { outline: 3px solid var(--ux-orange); outline-offset: 3px; }
.back-link>span { border: 0; background: var(--ux-navy); color: #fff; display: grid; place-items: center; border-radius: 50%; width: 32px; height: 32px; flex: 0 0 32px; font-size: 1.2rem; line-height: 1; }
.application-back-link { padding: .75rem 1.25rem; border-color: var(--ux-navy); border-radius: 6px; background: var(--ux-navy); color: #fff; box-shadow: none; }
.application-back-link:hover { background: #0c315e; border-color: #0c315e; color: #fff; }
.registration-back-link { padding: .4rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: .5rem; }
.registration-back-link:hover { background: transparent; color: var(--ux-orange); }
.registration-back-link svg { flex: 0 0 20px; }
.registration-phone-input { flex-wrap: nowrap; }
.registration-phone-input .form-select { flex: 0 0 92px; width: 92px; min-width: 0; border-color: var(--ux-border); border-radius: 10px 0 0 10px; color: var(--ux-navy); font: inherit; }
.registration-phone-input .form-control { min-width: 0; }
.auth-layout-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
.auth-layout-wide .auth-content { max-width: 600px; padding-top: 2.6rem; }
.auth-layout-wide .auth-aside { padding-left: clamp(2rem, 4vw, 4rem); padding-right: clamp(2rem, 4vw, 4rem); }
.auth-layout-wide .page-heading h1 { max-width: 470px; }
.register-form { gap: 1.7rem; }
.register-form fieldset { min-width: 0; padding: 0 0 1.5rem; border: 0; border-bottom: 1px solid var(--ux-border); }
.register-form legend { display: flex; align-items: center; gap: .65rem; font-weight: 600; font-size: 1.17rem; color: var(--ux-navy); margin-bottom: .45rem; }
.step-number { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; font-size: .72rem; background: #E6EBF4; color: var(--ux-navy); }
.section-note { font-size: .91rem; color: var(--ux-grey); margin-bottom: 1.25rem; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.2rem 1rem; }
.field-full { grid-column: 1/-1; }
.optional { color: var(--ux-grey); font-size: .78rem; }
.field-hint { color: var(--ux-grey); font-size: .81rem; line-height: 1.5; display: block; margin-top: .4rem; }
.field-error { display: block; color: var(--ux-danger); font-size: .85rem; margin-top: .35rem; }
.field-validation-valid { display: none; }
.register-form .staff-note { margin-top: -.5rem; }
.signin-prompt { font-size: .93rem; color: var(--ux-grey); text-align: center; margin: 1.5rem 0 0; }
.signin-prompt a { font-weight: 600; margin-left: .3rem; }
.ux-message { display: flex; gap: .75rem; color: var(--ux-navy); background: #E6EBF4; border-radius: 10px; padding: 1rem; margin-bottom: 1.5rem; font-size: .95rem; }
.ux-message p { margin: 0; }
.ux-message-success { background: #E7F4EF; color: var(--ux-petrol); }
.validation-summary-valid { display: none; }
.validation-summary-errors { background: #FBE9E7; color: #a8221a; padding: 1rem 1.1rem; margin-bottom: 1.5rem; border: 1px solid #f1cac5; border-radius: 10px; font-size: .93rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }
.validation-summary-errors li+li { margin-top: .35rem; }
.back-form { margin-top: 1.5rem; }
.text-link { background: transparent; border: 0; color: var(--ux-navy); text-decoration: underline; padding: .5rem; }
.club-summary { padding: 1.5rem; border: 1px solid var(--ux-border); border-radius: 14px; background: #fff; }
.club-summary p { margin-bottom: .4rem; }
.verification { display: inline-flex; background: #FFF0E6; color: #973708; font-size: .73rem; letter-spacing: .07em; border-radius: 5px; padding: .35rem .65rem; margin-bottom: 1rem; }
.verification.is-verified { background: #E7F4EF; color: var(--ux-petrol); }
.ux-skip { position: fixed; top: -100px; left: 1rem; z-index: 10; padding: .7rem 1rem; background: #fff; color: var(--ux-navy); }
.ux-skip:focus { top: 1rem; }
@media (min-width: 1600px) { .auth-content { max-width: 480px; } }
@media (max-width: 1100px) {
    .auth-main { padding-left: 2rem; padding-right: 2rem; }
    .auth-aside { padding-left: 2rem; padding-right: 2rem; }
    .aside-footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 991px) {
    .auth-layout, .auth-layout-wide { grid-template-columns: minmax(0,1fr); }
    .auth-aside { display: none; }
    .auth-main { min-height: 100svh; padding: 1.3rem 2rem 1rem; }
    .auth-content { padding-top: 3.5rem; padding-bottom: 2rem; }
    .auth-header, .auth-footer { max-width: 600px; }
    .page-heading h1 { font-size: 2.6rem; }
}
@media (max-width: 575px) {
    .auth-main { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); padding-bottom: max(1rem,env(safe-area-inset-bottom)); }
    .auth-header { gap: .5rem; }
    .brand { gap: .55rem; }
    .brand img { width: 132px; }
    .brand-pro { padding-left: .55rem; font-size: .68rem; }
    .auth-content { padding-top: 2.8rem; }
    .page-heading h1 { font-size: 2.35rem; }
    .page-heading p { font-size: .98rem; }
    .form-options { font-size: .84rem; gap: .55rem; flex-wrap: wrap; }
    .form-grid { grid-template-columns: minmax(0,1fr); }
    .auth-footer { font-size: .72rem; }
    .auth-layout-wide .auth-content { padding-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

a, a:hover, a:focus, a:active { text-decoration: none !important; }

/* Application status and documents. Keep the shared header and full-width layout. */
.application-page { background: #f3f5fa; }
.application-page .auth-content { padding-top: 2rem; }
.application-page .page-heading h1 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.2; letter-spacing: -.01em; margin-bottom: .35rem; }
.application-page .page-heading p { font-size: 1rem; color: #627695; }
.application-page .application-page-heading { align-items: center; margin-bottom: 1.25rem; }
.application-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.application-page .onboarding-choice { background: #fff; border-color: #d5dfef; border-radius: 12px; padding: 1.25rem; }
.application-page .onboarding-choice h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.application-hero { background: var(--ux-navy); color: #fff; border-radius: 14px; padding: 1.5rem; margin-bottom: 1.5rem; }
.application-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; }
.application-club-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.application-club-identity > div:last-child { min-width: 0; }
.application-club-symbol { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; background: #fff; color: var(--ux-navy); border-radius: 13px; }
.application-club-symbol .application-icon { width: 29px; height: 29px; }
.application-eyebrow { display: block; color: #d2def1; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .25rem; }
.application-hero h2 { font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.2; margin: 0 0 .35rem; color: #fff; overflow-wrap: anywhere; }
.application-club-identity p { margin: 0; color: #e5edfa; font-size: .95rem; overflow-wrap: anywhere; }
.application-status { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.application-status .application-icon { width: 16px; height: 16px; flex-basis: 16px; }
.application-status-pending { background: #fff2dd; color: #865400; }
.application-status-review { background: #e9f1ff; color: #205bb0; }
.application-status-approved { background: #e4f5ec; color: #176a49; }
.application-status-rejected { background: #ffedf0; color: #a2253a; }
.application-hero-message { margin: 1.15rem 0 0; color: #e7eefb; line-height: 1.6; }
.application-hero-actions { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.application-hero-actions .application-back-link { width: auto; padding: .7rem 1.15rem; background: #fff; border-color: #fff; color: var(--ux-navy); border-radius: 8px; }
.application-hero-actions .application-back-link:hover { background: #e9eff8; border-color: #e9eff8; color: var(--ux-navy); }
.application-hero-actions .application-back-link:focus-visible { outline-color: var(--ux-orange); }
.application-information, .application-files { display: grid; gap: 1.25rem; }
.application-page .application-files > .onboarding-section { margin-top: 0; }
.application-card-heading { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.application-page .application-card-heading h2 { min-width: 0; margin: 0; }
.application-card-heading .application-status { font-size: .76rem; padding: .25rem .6rem; }
.application-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.application-timeline li { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; }
.application-step-symbol { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; background: #edf1f7; color: #8192ab; border-radius: 50%; }
.application-step-symbol .application-icon { width: 17px; height: 17px; }
.is-complete .application-step-symbol { background: #e4f5ec; color: #187451; }
.is-rejected .application-step-symbol { background: #ffedf0; color: #b32d44; }
.application-timeline h3 { color: var(--ux-navy); font-size: 1rem; margin: .1rem 0 .25rem; }
.application-timeline time, .application-timeline li > div > span { color: #627695; font-size: .9rem; }
.application-info .onboarding-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; margin-bottom: 0; }
.application-info .onboarding-details div { min-width: 0; }
.application-info dt { font-weight: 500; font-size: .88rem; color: #627695; }
.application-info dd { color: var(--ux-navy); font-weight: 600; font-size: 1rem; }
.application-guidance summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none; min-height: 28px; }
.application-guidance summary::-webkit-details-marker { display: none; }
.application-page .application-guidance summary h2 { margin: 0; }
.application-guidance[open] summary > .application-icon { transform: rotate(180deg); }
.application-guidance-hint { display: block; margin: .7rem 0 0; font-size: .9rem; color: #627695; font-weight: 500; line-height: 1.5; }
.application-page .application-guidance .application-document-guidance { margin-bottom: 0; }
.application-page .application-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; gap: .75rem; min-height: 190px; padding: 1.5rem 1rem; border: 1px dashed #c4d2e8; border-radius: 10px; background: #f3f5fa; text-align: center; cursor: pointer; margin: 0; }
.application-page .field > label.application-dropzone::after { content: none; }
.application-dropzone > .application-icon { width: 30px; height: 30px; }
.application-dropzone strong { font-weight: 600; font-size: 1.05rem; }
.application-drop-types { color: #627695; font-size: .9rem; font-weight: 500; }
.application-file-picker { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: .3rem .85rem; border: 1px solid #bbc9dd; border-radius: 6px; background: #fff; color: var(--ux-navy); font-size: .9rem; }
.application-page .application-dropzone:hover, .application-page .application-dropzone.is-dragging { border-color: var(--ux-navy); background: #e9eff8; }
.application-dropzone:focus-within { outline: 3px solid var(--ux-orange); outline-offset: 3px; }
.application-file-input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.application-selected-file { max-width: 100%; overflow-wrap: anywhere; font-size: .9rem; }
.application-selected-file:empty { display: none; }
.application-page .application-upload-button { background: var(--ux-navy); border-color: var(--ux-navy); box-shadow: none; border-radius: 8px; }
.application-page .application-upload-button:hover { background: #0c315e; border-color: #0c315e; }
.application-page .application-upload-note { color: #627695; font-size: .85rem; margin: -.5rem 0 0; }
.application-file-count { flex: 0 0 auto; background: #edf1f6; border-radius: 6px; padding: .2rem .5rem; color: #445470; font-size: .8rem; }
.application-page .application-document-list { margin: 0; max-height: 38rem; overflow-y: auto; scrollbar-gutter: stable; }
.application-page .application-document-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .85rem; align-items: start; }
.application-file-symbol { display: grid; place-items: center; background: #edf2fa; color: var(--ux-navy); width: 42px; height: 42px; border-radius: 9px; }
.application-file-content { min-width: 0; overflow-wrap: anywhere; }
.application-file-content > strong { color: var(--ux-navy); font-weight: 600; }
.application-page .application-file-content > p { color: #627695; font-size: .86rem; margin: .35rem 0 .65rem; }
.application-page .application-document-actions { gap: .6rem; }
.application-page .application-document-actions .ux-button { min-height: 36px; padding: .4rem .7rem; border-radius: 6px; font-size: .9rem; gap: .4rem; }
.application-document-actions .application-icon { width: 15px; height: 15px; flex-basis: 15px; }
.application-page .application-delete-link { color: #b52d42; border-color: #efc5cc; }
.application-page .application-delete-link:hover { background: #fff0f2; border-color: #b52d42; }
.application-page .application-session-actions { gap: .75rem; margin-top: 1.75rem; flex-wrap: wrap; }
.application-page .application-session-actions .ux-button, .application-page .application-refresh .ux-button { min-height: 40px; border-radius: 7px; padding: .5rem .85rem; font-size: .95rem; background: #fff; }
.application-page .application-session-actions form { margin: 0; }
.application-support-disabled { opacity: .5; cursor: default; }
@media (max-width: 575px) {
    .application-page .application-page-heading { align-items: flex-start; }
    .application-page .page-heading h1 { font-size: 1.6rem; }
    .application-hero { padding: 1.1rem; }
    .application-hero-top { flex-wrap: wrap; gap: 1rem; }
    .application-club-identity { gap: .75rem; }
    .application-club-symbol { width: 50px; height: 50px; flex-basis: 50px; }
    .application-hero-top > .application-status { margin-left: auto; }
    .application-page .onboarding-choice { padding: 1rem; }
    .application-info .onboarding-details { gap: 1rem; }
    .application-page .application-document-list li { grid-template-columns: 32px minmax(0, 1fr); gap: .6rem; }
    .application-file-symbol { width: 32px; height: 36px; }
    .application-page .application-dropzone { min-height: 180px; }
}