:root { --green:#00a486; --green-dark:#007861; --ink:#211a19; --muted:#736b67; --paper:#f2e9e2; --line:#e4dbd5; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; padding:32px; background:linear-gradient(145deg,#efe4dc,#f8f4f1 55%,#e5f4ef); color:var(--ink); font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; }
.login-shell { width:min(1120px,100%); min-height:690px; display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; border-radius:28px; background:#fff; box-shadow:0 30px 90px rgba(67,45,38,.17); }
.login-brand-panel { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:48px; overflow:hidden; background:var(--paper); }
.login-brand-panel::before,.login-brand-panel::after { content:""; position:absolute; width:380px; height:220px; transform:rotate(32deg); background:var(--green); opacity:.92; }
.login-brand-panel::before { top:-150px; right:-130px; }.login-brand-panel::after { bottom:-180px; left:-190px; opacity:.15; }
.login-brand-panel img { position:relative; z-index:1; width:150px; height:auto; }
.login-brand-panel > div,.login-brand-panel > small { position:relative; z-index:1; }
.login-brand-panel span,.login-heading > span { color:var(--green-dark); font-size:13px; font-weight:900; letter-spacing:.15em; }
.login-brand-panel h1 { margin:14px 0 18px; font-size:clamp(34px,4vw,54px); line-height:1.16; letter-spacing:-.04em; }
.login-brand-panel p { max-width:420px; color:var(--muted); font-size:16px; line-height:1.8; }.login-brand-panel > small { color:#8b817c; font-size:13px; }
.login-form-panel { padding:44px 54px; }.login-heading h2 { margin:7px 0 3px; font-size:31px; }.login-heading p { margin:0; color:var(--muted); font-size:15px; }
.role-picker { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:24px 0 20px; }.role-picker button { min-height:74px; display:grid; grid-template-columns:40px 1fr; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; transition:.18s ease; }.role-picker button:hover,.role-picker button.active { border-color:#75cbb8; background:#effaf6; transform:translateY(-1px); }.role-picker b { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#e5f5ef; color:var(--green-dark); font-size:13px; }.role-picker strong,.role-picker small { display:block; }.role-picker strong { font-size:14px; }.role-picker small { margin-top:2px; color:var(--muted); font-size:12px; }
form { display:grid; gap:13px; }label { color:#4f4744; font-size:14px; font-weight:800; }input { width:100%; min-height:48px; margin-top:6px; padding:10px 12px; border:1px solid #cfc5bf; border-radius:10px; outline:none; font:inherit; font-size:16px; }input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(0,164,134,.12); }.login-submit { min-height:50px; margin-top:3px; border:0; border-radius:10px; background:var(--green); color:#fff; font:inherit; font-size:16px; font-weight:900; cursor:pointer; }.login-submit:hover { background:var(--green-dark); }.login-error { margin:0; padding:9px 11px; border-radius:9px; background:#fff0ed; color:#a64335; font-size:14px; }.login-help { margin:16px 0 0; color:#8a817c; font-size:13px; text-align:center; }
@media (max-width:820px) { body { padding:16px; }.login-shell { grid-template-columns:1fr; }.login-brand-panel { min-height:280px; padding:32px; }.login-brand-panel h1 { font-size:35px; }.login-brand-panel > small { margin-top:28px; }.login-form-panel { padding:32px; } }
@media (max-width:520px) { .role-picker { grid-template-columns:1fr; }.login-form-panel { padding:26px 20px; }.login-brand-panel { min-height:250px; padding:26px 22px; } }