/* SF-Asp Phase 3.1.1 — scoped login layout and existing settings styling. */
.sf-passkey-login[hidden], #sf-passkey-settings[hidden] { display: none !important; }
.sf-passkey-login { width: 100%; margin: 14px auto 20px; padding: 0; border: 0; background: transparent; text-align: center; }
.sf-passkey-primary { background: #185db6; border: 1px solid #185db6; border-radius: 9px; color: #fff; padding: 11px 18px; cursor: pointer; min-height: 44px; font: inherit; font-weight: 600; }
.sf-passkey-primary:hover { background: #124b94; }
.sf-passkey-secondary, .sf-passkey-danger { background: transparent; border: 1px solid currentColor; border-radius: 8px; padding: 8px 13px; cursor: pointer; min-height: 40px; font: inherit; }
.sf-passkey-secondary { color: #185db6; }
.sf-passkey-danger { color: #b32436; }
.sf-passkey-login button:disabled, .sf-passkey-panel button:disabled { opacity: .6; cursor: wait; }
.sf-passkey-note { font-size: .9em; line-height: 1.65; opacity: .85; margin: 11px 0; }
.sf-passkey-status { min-height: 1.2em; font-size: .93em; line-height: 1.6; margin: 10px 0 0; }
.sf-passkey-error { color: #b32436; font-weight: 600; }
.sf-passkey-panel { padding: 8px 0 18px; }
.sf-passkey-panel h3 { margin-top: 23px; }
.sf-passkey-list { display: grid; gap: 10px; }
.sf-passkey-entry { padding: 14px; display: flex; gap: 12px; justify-content: space-between; align-items: center; border: 1px solid #d1d5db; border-radius: 10px; }
.sf-passkey-details { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.sf-passkey-details small { opacity: .8; font-size: .8em; }
.sf-passkey-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
@media (max-width: 650px) { .sf-passkey-entry { align-items: flex-start; flex-direction: column; } .sf-passkey-actions { width: 100%; } }
.dark-mode .sf-passkey-login { background: transparent; border-color: transparent; }
.dark-mode .sf-passkey-secondary { color: #8fc8ff; }
.dark-mode .sf-passkey-danger, .dark-mode .sf-passkey-error { color: #ff9aa6; }
.dark-mode .sf-passkey-entry { border-color: #66758c; }

/* Phase 3.1.1: consistent login buttons (general user & admin). */
#loginForm .line-button,
#loginForm .google-button,
#loginForm .register-button,
#loginForm .sf-passkey-login .sf-passkey-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: min(100%, 320px);
    max-width: 320px;
    min-height: 54px;
    height: 54px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 600;
    text-align: center;
}
#loginForm .line-button img,
#loginForm .google-button img,
#loginForm .sf-passkey-login .sf-passkey-primary img {
    display: block;
    width: 24px;
    height: 24px;
    max-width: none;
    flex: 0 0 24px;
    object-fit: contain;
    margin: 0;
}
#loginForm .line-button span,
#loginForm .google-button span,
#loginForm .sf-passkey-login .sf-passkey-primary span {
    display: inline-block;
}
#loginForm .sf-passkey-login .sf-passkey-primary {
    margin-top: 0;
    margin-bottom: 0;
    background: #185db6;
    border-color: #185db6;
    color: #fff;
    cursor: pointer;
    transition: background-color .18s, border-color .18s, box-shadow .18s;
}
#loginForm .sf-passkey-login .sf-passkey-primary:hover:not(:disabled) {
    background: #124b94;
    border-color: #124b94;
}
#loginForm .sf-passkey-login .sf-passkey-primary:focus-visible {
    outline: 3px solid #7fb6ff;
    outline-offset: 3px;
}
#loginForm .sf-passkey-login .sf-passkey-status {
    min-height: 0;
    max-width: 320px;
    margin: 9px auto 0;
    overflow-wrap: anywhere;
}
#loginForm .sf-passkey-login .sf-passkey-status:empty {
    display: none;
}
#loginForm .sf-passkey-login[hidden] {
    display: none !important;
}
@media (max-width: 420px) {
    #loginForm .line-button,
    #loginForm .google-button,
    #loginForm .register-button,
    #loginForm .sf-passkey-login .sf-passkey-primary {
        font-size: 16px;
        width: 100%;
    }
}

/* Phase 3.2: consistent vertical spacing in the general login provider stack. */
#loginForm .sf-login-providers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
}
#loginForm .sf-login-providers > .sf-passkey-login,
#loginForm .sf-login-providers > #lineLoginForm {
    width: 100%;
    max-width: 320px;
    margin: 0;
    padding: 0;
}
#loginForm .sf-login-providers > .sf-passkey-login[hidden] { display: none !important; }
#loginForm .sf-login-providers > .google-button,
#loginForm .sf-login-providers > .register-button,
#loginForm .sf-login-providers > #lineLoginForm > .line-button,
#loginForm .sf-login-providers > .sf-passkey-login > .sf-passkey-primary {
    margin: 0 auto;
    width: 100%;
    max-width: 320px;
}
#loginForm .sf-login-providers #lineLoginForm > .small-text {
    margin: 10px auto 0;
    line-height: 1.5;
}
#loginForm .sf-login-providers > #lineLoginForm > #line-login-message {
    margin: 8px auto 0;
}
#loginForm .sf-login-providers > .google-button + #google-login-message {
    margin: 8px auto 0;
}
#loginForm .sf-login-providers > .sf-passkey-login .sf-passkey-status:empty { display: none; }