/* Brand direction: joylife.co — deep teal, warm ivory, citrus accents. */
.jl-login{--jl-green:#07574e;--jl-ink:#163e38;--jl-muted:#68736f;--jl-line:#d9dfd9;--jl-citrus:#d4d83d;box-sizing:border-box;background:#f2f2e9;padding:48px 28px;margin:80px 0 0;font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;color:var(--jl-ink)}
.jl-login *{box-sizing:border-box}
.jl-login__shell{display:grid;grid-template-columns:1fr 1fr;max-width:1080px;margin:auto;background:#fff;border:1px solid #e3e6de;border-radius:8px;overflow:hidden;box-shadow:0 18px 60px #1b423810}
.jl-login__brand{background:var(--jl-green);padding:36px 42px 24px;position:relative;display:flex;flex-direction:column;color:#fff}
.jl-login__logo{align-self:flex-start;background:#f2f2e9;padding:13px 18px;display:inline-flex;border-radius:2px}
.jl-login__logo img{width:176px;height:auto;display:block}
.jl-login .jl-login__eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;margin:0 0 14px;line-height:1.5}
.jl-login__story{margin:36px 0 24px}
.jl-login__story .jl-login__eyebrow{color:#d4d83d}
.jl-login__story h2{color:#fff;font-size:34px;font-weight:500;line-height:1.55;letter-spacing:.06em;margin:0 0 14px}
.jl-login__story h2 span{color:#e5e7c5}
.jl-login__story>p:last-child{color:#deebe5;font-size:14px;line-height:1.9;max-width:340px;margin:0}
.jl-login__visual{position:relative;margin-top:auto}
.jl-login__visual>img{display:block;width:100%;height:200px;object-fit:cover;object-position:center 56%;border-radius:2px}
.jl-login__seal{position:absolute;right:15px;top:-28px;width:82px;height:82px;border-radius:50%;background:var(--jl-citrus);color:#244d3d;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;letter-spacing:.1em;transform:rotate(9deg);border:5px solid var(--jl-green);line-height:1.7}
.jl-login__seal strong{font-size:12px;letter-spacing:0}
.jl-login__signature{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.12em;margin:20px 0 0;color:#e5e7c5}
.jl-login__signature span{font-size:23px;color:var(--jl-citrus)}
.jl-login__content{padding:44px 48px 28px;min-width:0}
.jl-login__intro{margin-bottom:28px}
.jl-login__intro .jl-login__eyebrow{color:var(--jl-green);letter-spacing:.16em}
.jl-login__intro h1{font-size:32px;letter-spacing:.07em;line-height:1.4;font-weight:600;color:var(--jl-ink);margin:0 0 10px}
.jl-login__intro>p:last-child{color:var(--jl-muted);line-height:1.8;font-size:14px;margin:0}
.jl-login__field{margin-bottom:20px}
.jl-login__field label{display:block;color:var(--jl-ink);font-size:14px;font-weight:600;margin:0 0 8px}
.jl-login__field input{width:100%;height:52px;padding:12px 14px;border:1px solid var(--jl-line);border-radius:4px;background:#fcfdfb;color:#163e38;font:inherit;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.jl-login__field input:focus{border-color:var(--jl-green);box-shadow:0 0 0 3px #07574e18;background:white}
.jl-login__field input.input-validation-error{border-color:#b4443c}
.jl-login__field small{display:block;color:var(--jl-muted);font-size:12px;line-height:1.6;margin-top:7px}
.jl-login__field .field-validation-error{display:block;font-size:13px;line-height:1.6;margin-top:6px}
.jl-login__label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.jl-login a{color:var(--jl-green);text-underline-offset:4px}
.jl-login a:hover{text-decoration:underline}
.jl-login__label-row a{font-size:13px;text-decoration:underline}
.jl-login__password{position:relative}
.jl-login__password input{padding-right:54px}
.jl-login__password button{position:absolute;right:3px;top:3px;width:46px;height:46px;display:grid;place-items:center;border:0;background:transparent;color:var(--jl-green);border-radius:3px;cursor:pointer;padding:12px}
.jl-login__password button:hover{background:#eaf0e9}
.jl-login__password svg{width:22px;height:22px}
.jl-login__eye-slash{display:none}
.jl-login__password button[aria-pressed="true"] .jl-login__eye-slash{display:block}
.jl-login__remember{display:flex;align-items:center;gap:9px;width:fit-content;min-height:36px;cursor:pointer;font-size:13px;color:var(--jl-muted);margin:-4px 0 16px}
.jl-login__remember input{width:18px;height:18px;accent-color:var(--jl-green);margin:0;flex-shrink:0}
.jl-login__submit{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:13px 20px;border:1px solid var(--jl-green);border-radius:4px;background:var(--jl-green);color:#fff;font:inherit;font-size:16px;font-weight:600;letter-spacing:.12em;cursor:pointer;transition:background .15s}
.jl-login__submit span{font-size:24px;line-height:1;color:var(--jl-citrus)}
.jl-login__submit:hover{background:#03463e}
.jl-login :is(a,button,summary,input):focus-visible{outline:3px solid #7d8b17;outline-offset:4px}
.jl-login__help{margin:18px 0 24px;font-size:12px;color:var(--jl-muted);line-height:1.7}
.jl-login__help summary{cursor:pointer;list-style:revert;display:list-item;width:fit-content;padding:6px 0}
.jl-login__help p{margin:8px 0 0;padding:12px;background:#f3f5ef;border-radius:4px}
.jl-login__join{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #e4e8e0;padding-top:20px;font-size:14px;color:var(--jl-muted)}
.jl-login__join a{font-weight:600;text-decoration:underline}
.jl-login__support{text-align:center;font-size:12px;color:var(--jl-muted);margin:22px 0 0;line-height:1.8}
.jl-login__support a{text-decoration:underline;margin-left:5px}
.jl-login .validation-summary-valid{display:none}
.jl-login .validation-summary-errors{font-size:14px;margin-bottom:18px}
@media(max-width:991px){.jl-login{padding:28px 20px}.jl-login__brand{padding:28px}.jl-login__content{padding:36px 28px 26px}.jl-login__story h2{font-size:29px}}
@media(max-width:767px){.jl-login{padding:24px 16px 32px;margin-top:64px}.jl-login__shell{display:flex;flex-direction:column;max-width:480px}.jl-login__brand{padding:20px 24px;background:#edf0e5;display:block}.jl-login__logo{padding:0;background:transparent}.jl-login__logo img{width:144px}.jl-login__story,.jl-login__visual{display:none}.jl-login__signature{margin:10px 0 0;color:var(--jl-green);font-size:11px;letter-spacing:.08em}.jl-login__signature span{display:none}.jl-login__content{padding:28px 24px 24px}.jl-login__intro{margin-bottom:24px}.jl-login__intro h1{font-size:28px}.jl-login__intro .jl-login__eyebrow{display:none}.jl-login__label-row a{padding:4px 0}.jl-login__join{font-size:13px}.jl-login__story h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.jl-login *{transition:none!important}}

/* Login page chrome: the sticky header occupies its own height, so no guessed spacer is needed. */
body.jl-login-page {
    background: #f2f2e9;
    color: #163e38;
}
body.jl-login-page .header_section.fixed-top {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    border-bottom: 1px solid #dfe4db;
    box-shadow: none !important;
}
body.jl-login-page .header_logo img {
    width: 156px;
    max-height: 36px;
}
body.jl-login-page > main {
    padding: 0 !important;
    background: #f2f2e9;
}
body.jl-login-page .jl-login {
    margin: 0;
    padding: 28px 28px 32px;
}
body.jl-login-page footer.footer_widgets {
    margin: 0;
    padding: 28px 28px 22px;
    background: #e9eee4;
    border-top: 1px solid #d6dfd3;
    color: #163e38;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
body.jl-login-page footer.footer_widgets > .container {
    width: 100%;
    max-width: 1080px;
    padding: 0;
}
body.jl-login-page footer.footer_widgets .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin: 0;
}
body.jl-login-page footer.footer_widgets .row > div {
    width: auto;
    max-width: none;
    padding: 0;
}
body.jl-login-page footer.footer_widgets .footer_widget_list {
    margin: 0;
}
body.jl-login-page footer.footer_widgets .footer_logo {
    margin: 0 0 18px;
    text-align: left;
}
body.jl-login-page footer.footer_widgets .footer_logo img {
    display: block;
    width: 148px;
    max-width: 148px;
    height: auto;
}
body.jl-login-page footer.footer_widgets .jl-login-footer__tagline {
    margin: 10px 0 0;
    font-size: 10px;
    letter-spacing: .18em;
    color: #536d60;
}
body.jl-login-page footer.footer_widgets .footer_contact {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    text-align: left;
}
body.jl-login-page footer.footer_widgets .footer_contact_list {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    margin: 0 0 6px;
    line-height: 1.8;
}
body.jl-login-page footer.footer_widgets .footer_contact_list span {
    margin: 0;
    color: #617568;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
}
body.jl-login-page footer.footer_widgets .footer_contact_list p,
body.jl-login-page footer.footer_widgets .footer_contact_list a {
    margin: 0;
    color: #214c40;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
body.jl-login-page footer.footer_widgets .footer_menu ul {
    justify-content: flex-end !important;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0;
    padding: 0;
}
body.jl-login-page footer.footer_widgets .footer_menu ul li {
    margin: 0 !important;
}
body.jl-login-page footer.footer_widgets .footer_menu ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0;
    background: transparent;
    color: #07574e;
    font-size: 13px;
    border-radius: 0;
}
body.jl-login-page footer.footer_widgets .footer_social {
    margin: 12px 0 16px;
    padding: 0;
}
body.jl-login-page footer.footer_widgets .footer_social ul {
    justify-content: flex-end !important;
    gap: 10px;
    margin: 0;
    padding: 0;
}
body.jl-login-page footer.footer_widgets .footer_social ul li {
    margin: 0;
}
body.jl-login-page footer.footer_widgets .footer_social ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #07574e;
    background: #f6f7ef;
    border: 1px solid #cbd8ca;
    border-radius: 50%;
}
body.jl-login-page footer.footer_widgets .footer_social ul li a:hover {
    background: #dce5d4;
}
body.jl-login-page footer.footer_widgets .copyright_right {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #d1dbce;
}
body.jl-login-page footer.footer_widgets .copyright_right p {
    margin: 0;
    color: #607065;
    font-size: 11px;
    line-height: 1.8;
}
body.jl-login-page footer.footer_widgets a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
body.jl-login-page footer.footer_widgets a:focus-visible {
    outline: 3px solid #7d8b17;
    outline-offset: 4px;
}
@media (max-width: 820px) {
    body.jl-login-page .jl-login {
        padding: 20px 16px 24px;
    }
    body.jl-login-page footer.footer_widgets {
        padding: 24px 24px 22px;
    }
    body.jl-login-page footer.footer_widgets > .container {
        max-width: 480px;
    }
    body.jl-login-page footer.footer_widgets .row {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    body.jl-login-page footer.footer_widgets .text-right {
        text-align: left !important;
    }
    body.jl-login-page footer.footer_widgets .copyright_right {
        text-align: left;
    }
    body.jl-login-page footer.footer_widgets .footer_menu ul,
    body.jl-login-page footer.footer_widgets .footer_social ul {
        justify-content: flex-start !important;
    }
    body.jl-login-page footer.footer_widgets .footer_menu {
        padding-top: 12px;
        border-top: 1px solid #d1dbce;
    }
}