:root{font-family:Inter,"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:#1d3553;background:#f4f7fc}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 10%,#e4edfe88,transparent 48%),linear-gradient(150deg,#f7f9fd,#eff4fb);min-height:100vh}.background{position:fixed;inset:0;overflow:hidden;pointer-events:none}.background:before,.background:after{content:"";position:absolute;width:740px;height:740px;border-radius:50%;border:1px solid #d5e1f263;right:-400px;top:-350px}.background:after{width:840px;height:840px;left:-530px;top:auto;bottom:-530px}.login-layout{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:36px 24px}.login-group{width:440px;max-width:100%}.login-card{padding:34px 38px 28px;border:1px solid #e0e7f2;border-radius:24px;background:#ffffffee;box-shadow:0 20px 65px #193c7010,0 3px 12px #193c7004}.brand{display:flex;align-items:center;justify-content:center;gap:13px}.brand img{width:52px;height:52px;display:block;flex:0 0 auto}.brand h1{font-size:25px;font-weight:650;letter-spacing:.7px;line-height:1.5;margin:0}.brand-en{display:block;color:#7f97b6;font-size:10px;font-weight:600;letter-spacing:1.6px;line-height:1.8;margin-top:1px}.intro{text-align:center;margin:17px 0 0;color:#667c97;font-size:13px;line-height:1.8;letter-spacing:.3px}.features{text-align:center;margin:6px 0 0;color:#95a3b6;font-size:11px;line-height:1.7;letter-spacing:.5px}.divider{height:1px;background:linear-gradient(90deg,transparent,#e3e9f2 20%,#e3e9f2 80%,transparent);margin:24px 0 22px}h2{font-size:18px;font-weight:650;margin:0 0 22px;line-height:1.5;color:#2b4260}label{display:block;font-size:13px;font-weight:550;margin-bottom:8px;color:#425873}input{width:100%;min-height:46px;padding:12px 13px;border:1px solid #dce3ef;border-radius:9px;font:inherit;font-size:14px;color:#263b57;background:#fcfdff;transition:border-color .15s,box-shadow .15s}input::placeholder{color:#a3afbf}input:focus{outline:0;border-color:#7ea4ee;box-shadow:0 0 0 3px #235de810}.password-label{display:flex;align-items:center;justify-content:space-between;margin-top:19px}.password-label button{font:inherit;font-size:11px;border:0;background:none;padding:0 0 8px;color:#5f83c1;cursor:pointer}.remember-note{font-size:11px;color:#8797ab;line-height:1.8;margin:13px 0 19px}#login-submit,#guest-login{display:block;width:100%;min-height:46px;border-radius:9px;font:inherit;font-weight:600;font-size:14px;letter-spacing:.5px;cursor:pointer}#login-submit{background:#2860e7;color:#fff;border:1px solid #2860e7;box-shadow:0 4px 12px #2860e71c}#login-submit:hover{background:#2156d5}#guest-login{background:#fff;border:1px solid #dbe4f1;color:#53739d;margin-top:10px;min-height:44px}#guest-login:hover{background:#f6f9ff}.guest-note{font-size:11px;color:#91a0b4;line-height:1.7;margin:9px 0 0;text-align:center}.help{margin:20px 0 0;text-align:center;font-size:11px;line-height:1.8;color:#8c9cb1}.help b{font-weight:500;color:#6e83a1}.company-footer{text-align:center;color:#a0adbf;font-size:10px;line-height:1.8;letter-spacing:.7px;margin:10px 0 0}#login-error{padding:10px;margin:0 0 12px;background:#fff5ee;color:#9b5e33;font-size:12px;border-radius:7px;line-height:1.7}:focus-visible{outline:3px solid #8cb3fa;outline-offset:3px}@media(max-width:500px){.login-layout{padding:24px 18px}.login-card{padding:29px 26px 25px;border-radius:20px}.brand h1{font-size:23px}.brand img{width:48px;height:48px}.brand{gap:11px}.brand-en{font-size:9px;letter-spacing:1.3px}.intro{font-size:12px}.features{font-size:10px;letter-spacing:.1px}}@media(max-height:760px) and (min-width:761px){.login-layout{padding:24px}.login-card{padding-top:28px;padding-bottom:24px}.divider{margin:20px 0}.help{margin-top:16px}}
.login-card{padding:0;overflow:hidden;background:#fff}.brand-header{padding:29px 38px 27px;background:radial-gradient(ellipse at 100% 0%,#284d7a 0%,transparent 55%),linear-gradient(155deg,#172e4c,#102039);color:#fff}.brand-header h1{color:#f6f9ff}.brand-header .brand-en{color:#9ec4f5}.brand-header .brand img{padding:3px;border-radius:50%;background:#fff}.brand-header .intro{color:#bdcde2;margin-top:18px}.brand-header .features{color:#94adc9;margin-top:7px}.form-section{padding:26px 38px 28px}.form-section h2{margin-bottom:22px}@media(max-width:500px){.login-card{padding:0}.brand-header{padding:27px 26px 25px}.form-section{padding:24px 26px 25px}}@media(max-height:820px) and (min-width:761px){.login-layout{padding:24px}.login-card{padding:0}.brand-header{padding-top:25px;padding-bottom:24px}.form-section{padding-top:23px;padding-bottom:24px}}.brand-header .brand img{animation:login-brand-spin 1s linear infinite;transform-origin:50% 50%}@keyframes login-brand-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.brand-header .brand img{animation:none}}
/* Match the actual workspace brand so the transition only changes position. */
.brand img{width:64px;height:64px}.brand-header .brand img{padding:2px}.brand{gap:12px}.brand h1{font-size:25px;font-weight:650;line-height:1.55;letter-spacing:0}.brand-en{font-size:12px;font-weight:600;line-height:1.5;letter-spacing:1.2px;margin-top:3px}
@media(min-width:761px) and (max-width:1150px){.brand img{width:56px;height:56px}.brand h1{font-size:22px}.brand-en{font-size:11px;letter-spacing:1px}}
@media(max-width:760px){.brand img{width:36px;height:36px}.brand h1{font-size:16px;line-height:24px}.brand-en{font-size:9px;line-height:16px;letter-spacing:.65px;margin-top:0}.brand{gap:9px}}
@media(max-width:380px){.brand img{width:28px;height:28px}.brand h1{font-size:14px;line-height:22px}.brand-en{font-size:8px;line-height:14px;letter-spacing:.3px}.brand{gap:6px}}
.login-card{transition:background .45s,border-color .45s,box-shadow .45s}.form-section,.help,.company-footer{transition:opacity .45s,transform .45s}.login-leaving .login-card{background:transparent;border-color:transparent;box-shadow:none}.login-leaving .form-section,.login-leaving .help,.login-leaving .company-footer{opacity:0;transform:translateY(10px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.login-card,.form-section,.help,.company-footer{transition:none}}


/* Fade the background independently, keeping only the brand for its handoff. */
.brand-header{position:relative;isolation:isolate;background:transparent}
.brand-header::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 100% 0%,#284d7a 0%,transparent 55%),linear-gradient(155deg,#172e4c,#102039);transition:opacity .45s}
.brand-header>.intro,.brand-header>.features{transition:opacity .45s}
.brand-header .brand-name,.brand-header .brand-en{transition:color .45s}
.login-leaving .brand-header::before,.login-leaving .brand-header>.intro,.login-leaving .brand-header>.features{opacity:0}
.login-leaving .brand-header .brand-name{color:#213c5e}
.login-leaving .brand-header .brand-en{color:#6b86aa}
@media(prefers-reduced-motion:reduce){.brand-header::before,.brand-header>.intro,.brand-header>.features,.brand-header .brand-name,.brand-header .brand-en{transition:none}}

/* Keep Safari's input focus and brand handoff at the same visual scale. */
@media(max-width:760px){
 #login-form input{font-size:16px}
 .brand-header .brand{-webkit-text-size-adjust:100%;text-size-adjust:100%}
}