.signin-page {
    min-height: calc(100vh-6rem);
    background: var(--color-abyss-alt);
    padding: var(--space-xl)0
}
.signin-shell {
    max-width: 31rem;
    margin: auto
}
.signin-brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-md)
}
.signin-brand.brand {
    color: var(--color-text-on-dark)
}
.signin-card {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .25)
}
.signin-heading {
    text-align: center
}
.signin-heading h1 {
    font-size: 1.7rem;
    margin: .45rem 0
}
.signin-heading > p:last-child {
    font-size: .82rem;
    color: var(--color-text-soft)
}
.sso-stack {
    display: grid;
    gap: .55rem;
    margin-top: var(--space-md)
}
.sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100% ;
    padding: .75rem 1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-text);
    font-weight: 600;
}
.sso-btn:hover {
    border-color: var(--color-secondary);
    background: var(--color-surface-sunken)
}
.sso-btn svg {
    width: 1rem;
    height: 1rem
}
.signin-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: var(--space-md)0;
    color: var(--color-text-faint);
    font-size: .72rem
}
.signin-divider::before, .signin-divider::after {
    content: "";
    height: 1px;
    background: var(--color-border);
    flex: 1
}
.signin-form {
    display: grid;
    gap: .85rem
}
.signin-field {
    display: grid;
    gap: .4rem
}
.signin-field label {
    font-size: .8rem;
    font-weight: 600
}
.password-field {
    position: relative
}
.password-field.input {
    padding-right: 4.2rem
}
.password-toggle {
    position: absolute;
    right: .5rem;
    top: 50 %;
    transform: translateY(-50 % );
    border: 0;
    background: transparent;
    color: var(--color-secondary);
    font-size: .72rem;
    font-weight: 600
}
.signin-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    font-size: .75rem
}
.remember-me {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--color-text-soft)
}
.remember-me input {
    accent-color: var(--color-secondary)
}
.signin-link {
    color: var(--color-secondary);
    font-weight: 600
}
.signin-submit {
    width: 100 % ;
    margin-top: .2rem
}
.signin-register {
    text-align: center;
    margin-top: var(--space-md);
    font-size: .78rem;
    color: var(--color-text-soft)
}
.signin-register a {
    color: var(--color-secondary);
    font-weight: 600
}
.signin-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-size: .72rem;
    color: var(--color-text-faint)
}
.signin-security svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-secondary)
}
.signin-ecosystem {
    margin-top: .75rem;
    padding: .75rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: center
}
.signin-ecosystem strong, .signin-ecosystem span {
    display: block
}
.signin-ecosystem strong {
    font-size: .72rem
}
.signin-ecosystem span {
    margin-top: .2rem;
    font-size: .65rem;
    color: var(--color-text-faint)
}