/* V27.5.74.47 — canonical Create Fan + Sign In page layout. */

.auth-page-panel {
    padding: 16px 18px 18px;
}

.auth-page-panel .content-panel-header {
    margin-bottom: 6px;
}

.auth-signin-title {
    margin: 0;
    color: #f8fafc;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: clamp(27px, 5.5vw, 38px);
    font-weight: 950;
    line-height: 1;
    letter-spacing: .015em;
    text-shadow: 1px 1px 0 #020617, 0 0 12px rgba(96,165,250,.18);
}

.auth-signin-page .account-form label {
    margin-top: 11px;
    margin-bottom: 5px;
    color: #dbeafe;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .015em;
}

.auth-signin-page .account-form input[type=text],
.auth-signin-page .account-form input[type=password] {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    font-weight: 650;
}

.auth-signin-page .auth-email-check-actions {
    margin-top: 9px;
}

.auth-signin-page .auth-password-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-top: 9px;
}

.auth-signin-page .auth-password-actions .submit-button,
.auth-signin-page .auth-password-actions .auth-lost-password-button {
    min-height: 42px;
    padding: 8px 9px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.05;
}

.auth-signin-page .auth-create-fan-button {
    min-height: 43px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    font-weight: 900;
}

.auth-signin-page .auth-bottom-copy {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 12.5px;
}

@media (max-width: 460px) {
    .auth-page-panel { padding: 13px 13px 16px; }
    .auth-signin-page .auth-password-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
    .auth-signin-page .auth-password-actions .submit-button,
    .auth-signin-page .auth-password-actions .auth-lost-password-button { font-size: 12.5px; padding-left: 6px; padding-right: 6px; }
}

.content-panel-header h1.fan-create-title {
    margin: 0;
    font-size: clamp(25px, 4.5vw, 38px);
    line-height: 1.05;
}

.fan-create-form {
    max-width: 620px;
}

.fan-create-form label {
    margin-top: 10px;
}


.fan-username-field-wrap{position:relative}
.fan-username-field-wrap #username{width:100%;padding-right:78px}
.fan-name-chevrons{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:flex;gap:4px;align-items:center}
.fan-name-chevron{width:31px;height:31px;padding:0;border:1px solid #8a6a12;border-radius:7px;background:#facc15;color:#111827;font-size:25px;font-weight:1000;line-height:27px;cursor:pointer}
.fan-name-chevron:hover:not(:disabled){background:#fde047}
.fan-name-chevron:disabled{background:#57534e;color:#a8a29e;border-color:#57534e;cursor:default;opacity:.72}

/* Generated username selection: high-contrast yellow with black text. */
#username::selection {
    background: #ffd400;
    color: #000;
}

#username::-moz-selection {
    background: #ffd400;
    color: #000;
}

.fan-email-status {
    margin: 5px 0 2px;
    color: #ff6262;
    font-size: 0.86rem;
    font-weight: 800;
}

.fan-inline-link {
    border: 0;
    padding: 0;
    background: transparent;
    color: #ff8a8a;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.fan-help-note {
    margin-top: 5px;
    color: #aeb7c1;
    font-size: 0.82rem;
    line-height: 1.35;
}

.fan-field-with-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 7px;
    align-items: center;
}

.fan-field-with-actions input {
    min-width: 0;
}

.fan-field-with-actions:has(#password) {
    grid-template-columns: minmax(0, 1fr) auto;
}

.fan-name-action-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    margin-top: 6px;
}

.fan-name-action-row .fan-small-action {
    width: auto;
    min-width: 112px;
}

.fan-name-inline-help {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.22;
}

.fan-small-action {
    min-height: 38px;
    padding: 7px 10px;
    white-space: nowrap;
    font-size: 0.82rem;
}

.fan-password-requirements {
    display: flex;
    gap: 8px 12px;
    flex-wrap: wrap;
    margin-top: 7px;
    color: #9da7b1;
    font-size: 0.76rem;
}

.fan-password-requirements .ok {
    color: #8bdc9b;
}

.fan-password-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.fan-password-label-row > label:first-child {
    margin: 0 !important;
}

.fan-show-password {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    color: #cbd5e1 !important;
    font-size: 0.78rem;
    font-weight: 700 !important;
    white-space: nowrap;
}

.fan-show-password input {
    width: auto;
    margin: 0;
}

.fan-create-submit {
    margin-top: 12px;
}

.fan-create-submit-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fan-create-submit-row #submit-button {
    flex: 0 0 auto;
    min-width: 130px;
}

.fan-create-submit-row #submit-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.fan-terms-consent {
    margin: 0 !important;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #c7d0dc;
    font-size: 0.9rem;
    line-height: 1.3;
    font-weight: 700 !important;
    cursor: pointer;
}

.fan-terms-consent input {
    width: 19px;
    height: 19px;
    margin: 1px 0 0 0;
    flex: 0 0 auto;
}

.fan-consent-stack {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fan-create-legal-links {
    margin-top: 6px;
    padding-left: 26px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9fb0c4;
    font-size: 0.9rem;
    line-height: 1.2;
    font-weight: 800;
}

.fan-create-legal-links a {
    color: #93c5fd;
    text-decoration: underline;
    cursor: pointer;
}


@media (max-width: 620px) {
    .fan-field-with-actions,
    .fan-field-with-actions:has(#password) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .fan-name-action-row {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 7px;
    }

    .fan-name-action-row .fan-small-action {
        min-width: 0;
        padding-left: 6px;
        padding-right: 6px;
        font-size: 0.72rem;
    }

    .fan-name-inline-help {
        font-size: 0.68rem;
        line-height: 1.18;
    }

    .fan-create-submit-row {
        align-items: flex-start;
        gap: 9px;
    }

    .fan-create-submit-row #submit-button {
        min-width: 112px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .content-panel-header h1.fan-create-title {
        font-size: 22px;
    }

    .fan-terms-consent,
    .fan-create-legal-links {
        font-size: 0.84rem;
    }

    .fan-show-password {
        font-size: 0.72rem;
    }
}