:root{color-scheme:light;--background: #fcfdfd;--foreground: #243749;--card: #ffffff;--primary: #12639b;--primary-foreground: #ffffff;--secondary: #eaf3f7;--muted: #f2f6f8;--muted-foreground: #626f7c;--destructive: #b33236;--border: #dde6eb;--input: #929fac;--success: #267454;--wash-blue: #c5e4f5;--wash-green: #d9edd7;--wash-white: #ffffff;--art-line: #a2c6d6;--shadow-color: 43 77 97;--radius: 10px;font-family:Inter,Noto Sans TC,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--foreground);line-height:1.6}button,a{touch-action:manipulation}button:not(:disabled){cursor:pointer}h1,h2,p{margin:0}h1,h2{text-wrap:balance}:focus-visible{outline:2px solid var(--primary);outline-offset:4px}[hidden]{display:none!important}.page{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100svh}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--muted-foreground)}.brand-panel{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:720px;padding:32px 8% 40px;background:#e7f1f6;color:#1d3947}.brand-panel:before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(-32deg,transparent 0 52px,rgb(148 184 201 / .16) 52px 53px)}.brand-header{display:flex;align-items:center;min-height:32px}.company-logos{display:flex;align-items:center;gap:16px;flex:0 0 auto;max-width:100%}.company-logos img{display:block;flex:0 0 auto;width:auto;object-fit:contain}.company-logos img:first-child{height:32px}.company-logos img:last-child{height:24px}.logo-divider{width:1px;height:16px;background:#b7c9d1;flex:0 0 auto}.brand-content{display:grid;grid-template-columns:minmax(220px,.82fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,56px);margin:auto 0}.employee-card{--card-tilt: -4deg;--card-float: -10px;position:relative;justify-self:end;display:flex;flex-direction:column;width:min(100%,300px);min-height:440px;padding:28px 22px 18px;border-radius:28px;background:#fff;color:#17394a;box-shadow:18px 28px 50px #2d52601f;transform:rotate(var(--card-tilt));animation:card-float 4s ease-in-out infinite}.employee-card:before{content:"";position:absolute;top:14px;left:50%;width:42px;height:5px;border-radius:99px;background:#d5dee3;transform:translate(-50%)}.employee-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;color:#6d8490;font-size:13px;font-weight:650;letter-spacing:.04em}.employee-card-top b{color:#0b77b9;font-weight:700;letter-spacing:.02em;white-space:nowrap}.employee-card-avatar{display:grid;place-items:center;width:118px;height:118px;margin:36px auto 28px;overflow:hidden;border:1px solid #d5e4ea;border-radius:50%;background:#f3f8fa;color:#2f7eb8;box-shadow:inset 0 0 0 8px #fff}.employee-card-avatar svg{width:58px;height:58px;stroke-width:1.35}.employee-card-avatar img{width:100%;height:100%;object-fit:cover}.employee-card-avatar:not(:has(img[hidden])) svg{display:none}.employee-card-name{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center}.employee-card-name strong{font-size:30px;font-weight:700;letter-spacing:.04em;line-height:1.25;overflow-wrap:anywhere}.employee-card-role{color:#7b909a;font-size:13px;letter-spacing:.08em}.account-email{max-width:100%;color:#5f7782;font-size:12px;letter-spacing:0;line-height:1.45;overflow-wrap:anywhere}.employee-card-code{display:flex;justify-content:center;align-items:end;gap:3px;height:34px;margin:28px 0 18px;color:#8d9da6}.employee-card-code i{width:3px;height:16px;border-radius:1px;background:currentColor}.employee-card-code i:nth-child(3n){width:4px;height:28px}.employee-card-code i:nth-child(4n){height:22px}.employee-card-code i:nth-child(5n){height:12px;width:2px}.employee-card-status{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid #e1eaee;color:#607682;font-size:13px;font-weight:600;letter-spacing:.04em}.employee-card-status b{color:#0b77b9;font-weight:700}.brand-story{align-self:center;max-width:460px;min-width:0}.welcome-index{margin-bottom:22px;color:#0b77a9;font-size:13px;font-weight:700;letter-spacing:.12em}.brand-story h2{color:#1a3140;font-size:clamp(34px,3.1vw,52px);font-weight:700;line-height:1.28;letter-spacing:-.03em}.brand-story>p:last-child{margin-top:28px;color:#607682;font-size:16px;line-height:1.9}.form-panel{display:flex;flex-direction:column;padding:34px 7% 28px;min-width:0;background:var(--background)}.panel-header{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--muted-foreground)}.header-slash{padding:0 8px;color:var(--border)}.help-area{position:relative}.help-button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--muted-foreground);font:inherit;font-size:13px}.help-button:hover{background:var(--muted);color:var(--foreground)}.help-panel{position:absolute;right:0;top:48px;width:min(300px,85vw);z-index:10;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:0 12px 40px rgb(var(--shadow-color) / .12)}.help-panel strong{display:block;font-size:14px;margin-bottom:6px}.help-panel p{font-size:14px;color:var(--muted-foreground);line-height:1.7}.a-form{width:min(100%,400px);margin:auto;padding:54px 0 44px;display:flex;flex-direction:column;gap:25px}.status-badge{display:inline-flex;align-items:center;gap:6px;width:fit-content;padding:6px 12px;border-radius:999px;background:var(--secondary);color:var(--primary);font-size:13px;font-weight:500}.form-heading{display:flex;flex-direction:column;gap:10px}.form-heading h1{font-size:24px;font-weight:600;letter-spacing:.015em}.account{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--muted)}.account-icon{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;background:var(--card);color:var(--primary)}.account-details{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.account .account-name{margin:0;color:var(--foreground);font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.account .account-email{margin:0;color:var(--muted-foreground);font-size:13px;font-weight:400;line-height:1.4;overflow-wrap:anywhere}.account-shield{flex-shrink:0;margin-left:auto;color:var(--muted-foreground)}.result{padding:14px 16px;border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:10px;background:var(--secondary);font-size:14px;line-height:1.6;overflow-wrap:anywhere}.result[data-tone=error]{border-left-color:var(--destructive);background:#fbf2f2;color:#7a2a2d}.result[data-tone=ok]{border-left-color:var(--success);background:#eef6f1}.password-form{display:flex;flex-direction:column;gap:20px}.field{display:flex;flex-direction:column;gap:8px}.field label{font-size:14px;font-weight:500}.field[data-invalid=true] label{color:var(--destructive)}.input-group{display:flex;align-items:center;min-height:48px;border:1px solid var(--input);border-radius:10px;background:var(--card);box-shadow:0 1px 2px rgb(var(--shadow-color) / .04);transition:border-color .15s ease,box-shadow .15s ease}.input-group:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #12639b2e}.field[data-invalid=true] .input-group{border-color:var(--destructive);box-shadow:0 0 0 3px #b332361f}.input-icon{display:grid;place-items:center;width:42px;color:var(--muted-foreground);flex-shrink:0}.input-group input{flex:1;min-width:0;min-height:48px;border:0;background:transparent;padding:0 8px 0 0;font:inherit;font-size:16px;color:var(--foreground);outline:none}.input-group input::placeholder{color:var(--muted-foreground)}.reveal{display:grid;place-items:center;width:44px;height:44px;margin-right:2px;border:0;border-radius:8px;background:transparent;color:var(--muted-foreground);flex-shrink:0}.reveal:hover{background:var(--muted);color:var(--foreground)}.field-error{margin:0;font-size:14px;color:var(--destructive)}.error-summary{padding:14px 16px;border:1px solid rgb(179 50 54 / .25);border-radius:10px;background:#fbf2f2;color:#7a2a2d}.error-summary strong{display:block;margin-bottom:6px;font-size:14px}.error-summary a{color:inherit}.error-summary p{font-size:14px;margin-top:4px;line-height:1.6}.password-rules{font-size:14px;color:#4e5d6a;line-height:1.5}.password-rules>p{font-size:14px;color:var(--foreground);margin-bottom:10px}.password-rules ul{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0;margin:0;list-style:none}.password-rules li{display:flex;align-items:center;gap:6px}.rule-mark{width:12px;height:12px;border:1.5px solid currentColor;border-radius:50%;flex-shrink:0}.password-rules li[data-met=true]{color:var(--success)}.password-rules li[data-met=true] .rule-mark{background:var(--success);border-color:var(--success);box-shadow:inset 0 0 0 2px var(--card)}.submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:0;border-radius:10px;background:var(--primary);color:var(--primary-foreground);font:inherit;font-size:15px;font-weight:600;transition:background .15s ease}.submit:hover:not(:disabled){background:#0e5280}.submit:disabled{opacity:.55;cursor:not-allowed}.success-panel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding:18px 0;min-height:280px}.success-panel h2{font-size:24px;font-weight:600}.success-panel p{font-size:14px;color:var(--muted-foreground);line-height:1.7}.success-visual{position:relative;display:grid;place-items:center;width:112px;height:112px;color:var(--success)}.success-halo,.success-ripple{position:absolute;inset:0;border-radius:50%;pointer-events:none}.success-halo{background:radial-gradient(circle,var(--secondary) 20%,transparent 72%);animation:success-glow 1.1s ease-out both}.success-ripple{border:1px solid currentColor;opacity:0;animation:success-ripple .9s .24s ease-out both}.success-seal{position:relative;width:80px;height:80px;overflow:visible;animation:success-arrive .44s cubic-bezier(.2,.7,.2,1) both}.success-disc{fill:var(--secondary)}.success-ring{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:center;animation:success-draw .52s .1s ease-out backwards}.success-check{stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:success-draw .36s .42s ease-out backwards}.success-copy{display:flex;flex-direction:column;gap:12px;animation:success-copy .4s .16s ease-out backwards}.page-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted-foreground);font-size:13px;letter-spacing:.02em}@keyframes card-float{0%,to{transform:translateY(0) rotate(var(--card-tilt))}50%{transform:translateY(var(--card-float)) rotate(var(--card-tilt))}}@keyframes success-arrive{0%{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}@keyframes success-draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes success-glow{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes success-ripple{0%{opacity:.3;transform:scale(.65)}to{opacity:0;transform:scale(1.16)}}@keyframes success-copy{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(min-width:1600px){.a-form{width:430px}}@media(max-width:1100px){.brand-content{grid-template-columns:220px minmax(0,1fr);gap:28px}.employee-card{width:220px;min-height:340px;padding:22px 16px 14px}.employee-card-top,.employee-card-status{font-size:11px}.employee-card-avatar{width:84px;height:84px;margin:24px auto 18px;box-shadow:inset 0 0 0 6px #fff}.employee-card-avatar svg{width:42px;height:42px}.employee-card-name strong{font-size:22px}.employee-card-role,.account-email{font-size:11px}.employee-card-code{margin:18px 0 12px}.brand-story h2{font-size:32px}.form-panel{padding-left:7%;padding-right:7%}}@media(max-width:820px){.page{display:flex;flex-direction:column}.brand-panel{min-height:auto;padding:24px}.brand-content{grid-template-columns:168px minmax(0,1fr);gap:20px}.employee-card{--card-tilt: -3deg;--card-float: -6px;width:168px;min-height:0;padding:18px 12px 12px;border-radius:18px;transform:rotate(var(--card-tilt))}.employee-card-top{font-size:10px}.employee-card-avatar{width:64px;height:64px;margin:16px auto 12px;box-shadow:inset 0 0 0 5px #fff}.employee-card-avatar svg{width:32px;height:32px}.employee-card-name{gap:4px}.employee-card-name strong{font-size:16px}.employee-card-role{font-size:9px;letter-spacing:.04em}.account-email{font-size:9px;line-height:1.35}.employee-card-code{height:22px;margin:12px 0 10px}.employee-card-status{margin-top:8px;padding-top:8px;font-size:10px}.welcome-index{margin-bottom:12px;font-size:11px}.brand-story h2{font-size:28px;line-height:1.35}.brand-story>p:last-child{margin-top:16px;font-size:13px;line-height:1.8}.company-logos{gap:12px}.company-logos img:first-child{height:26px}.company-logos img:last-child{height:20px}.form-panel{padding:16px 24px 28px}.a-form{padding:28px 0 40px;gap:24px}.form-heading h1{font-size:24px}}@media(max-width:470px){.brand-content{grid-template-columns:132px minmax(0,1fr);gap:14px}.employee-card{width:132px;padding:14px 8px 10px}.employee-card-top{font-size:8px;letter-spacing:0}.employee-card-avatar{width:52px;height:52px;margin:12px auto 8px}.employee-card-avatar svg{width:26px;height:26px}.employee-card-name strong{font-size:13px;letter-spacing:0}.employee-card-role{font-size:8px}.employee-card-code{display:none}.employee-card-status{font-size:8px}.brand-story h2{font-size:24px}.brand-story h2 br,.brand-story>p:last-child br{display:none}.company-logos{gap:10px}.company-logos img:first-child{height:22px}.company-logos img:last-child{height:18px}.form-panel{padding-inline:16px}}
