*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:28px 16px;background:#101a2b;color:#1b283b;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif}.card{width:min(460px,100%);padding:clamp(26px,4vw,44px);background:#fff;border-radius:18px;box-shadow:0 20px 55px #0003}h1{font-size:clamp(26px,3vw,34px);letter-spacing:.02em;margin:0 0 5px}.card>p{font-size:14px;color:#5c6a7d;margin:9px 0 24px}label{display:block;margin:18px 0;font-size:14px;font-weight:700}input{display:block;width:100%;min-height:50px;padding:12px 14px;margin-top:9px;border:1px solid #c7cfd8;border-radius:8px;font:inherit;background:white;color:#152238}input:focus-visible,button:focus-visible{outline:3px solid #65a5ff;outline-offset:2px}button{background:#d32e49;color:white;border:0;padding:15px 20px;width:100%;font:700 15px system-ui,sans-serif;border-radius:8px;cursor:pointer;margin-top:8px}button:hover{background:#b91f3c}.err{color:#bd2036!important;font-size:13px!important}.card .login-note{font-size:12px;color:#647287;margin-top:22px;line-height:1.7}@media(max-width:480px){.card{padding:28px 22px}}

.login-success{margin:12px 0;padding:12px 14px;border:1px solid #86efac;border-radius:8px;background:#ecfdf3;color:#166534;font-size:13px;line-height:1.6}

/* Jr. Athlete brand logo */
.login-brand{text-align:center;margin:0 0 16px}
.login-logo{display:block;width:100%;max-width:280px;height:auto;margin:0 auto;object-fit:contain}


/* Password visibility toggle */
.password-field {
    position: relative;
    margin-bottom: 14px;
}
.password-field input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding-right: 76px;
}
.password-field .password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: auto;
    min-width: 54px;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.password-field .password-toggle:hover {
    background: #e2e8f0;
}
.password-field .password-toggle:focus-visible {
    outline: 2px solid #d7284d;
    outline-offset: 2px;
}

/* Password eye icon adjustment */
.password-field input {
    height: 42px;
    min-height: 42px;
    padding: 0 48px 0 12px;
    line-height: normal;
}
.password-field button.password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #64748b;
    cursor: pointer;
}
.password-field button.password-toggle:hover {
    background: #dbe5f3;
    color: #d7284d;
}
.password-toggle svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.password-toggle .eye-closed {
    display: none;
}
.password-toggle[aria-pressed="true"] .eye-open {
    display: none;
}
.password-toggle[aria-pressed="true"] .eye-closed {
    display: block;
}


/* Ver.0.6.9.4 login heading + alignment */
.login-head{
    margin: 0 0 24px;
    text-align: left;
}
.login-head h1{
    margin: 0 0 8px;
    font-size: clamp(30px, 3.2vw, 38px);
    line-height: 1.2;
    letter-spacing: .01em;
}
.login-lead{
    margin: 0;
    color: #5c6a7d;
    font-size: 14px;
    line-height: 1.7;
}
@media(max-width:480px){
    .login-head h1{
        font-size: 30px;
    }
}


/* JA AUTH ALIGNMENT v0.6.9.5 */
.login-brand {
    text-align: center;
}

.login-head {
    text-align: center;
    margin: 0 0 24px;
}

.login-head h1 {
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.3;
    text-align: center;
    margin: 0 0 10px;
}

.login-head .login-lead {
    font-size: 14px;
    line-height: 1.75;
    color: #64748b;
    text-align: center;
    margin: 0;
}

.card form,
.card form label {
    text-align: left;
}