:root{
  --primary:#0E1B33; --primary-2:#1E335C;
  --accent:#2563EB; --accent-soft:#E3ECFE;
  --ai:#7C3AED; --ai-2:#4F46E5; --ai-soft:#F0EBFE;
  --bg:#F4F6FB; --surface:#FFFFFF; --surface-2:#EEF2F9;
  --text:#0F172A; --text-2:#475569; --text-3:#94A3B8;
  --border:#E2E8F0;
  --ok:#16A34A; --ok-soft:#DCFCE7;
  --warn:#D97706; --warn-soft:#FEF3C7;
  --danger:#DC2626; --danger-soft:#FEE2E2;
  --info:#0284C7; --info-soft:#E0F2FE;
  --radius:14px; --radius-sm:9px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Noto Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.03em;
  color:#C9B8F5;background:rgba(255,255,255,.10);padding:6px 13px;border-radius:999px}

/* ---------- Layout ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:760px 1fr}

/* ---------- 品牌側 ---------- */
.brand-side{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:64px;color:#fff;overflow:hidden;
  background:linear-gradient(120deg,var(--primary) 0%,#1B2E55 55%,#3B2A6B 100%);
}
.brand-top{display:flex;align-items:center;gap:12px}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--ai);color:#fff;font-size:20px}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text strong{font-size:17px;font-weight:700}
.brand-text small{font-size:11.5px;color:#9DB0CE}
.brand-mid{max-width:580px}
.brand-mid h1{margin:22px 0 0;font-size:clamp(28px,3.4vw,38px);line-height:1.3;font-weight:700}
.brand-mid .lead{margin:20px 0 28px;font-size:15px;line-height:1.6;color:#C2CEE4;max-width:36em}
.brand-feats{list-style:none;display:flex;flex-direction:column;gap:14px}
.brand-feats li{display:flex;align-items:center;gap:13px}
.brand-feats li>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.08);font-size:18px;flex:none}
.brand-feats strong{display:block;font-size:14px;font-weight:600}
.brand-feats small{font-size:12px;color:#9DB0CE}
.brand-foot{font-size:11.5px;color:#7488AB}

/* ---------- 表單側 ---------- */
.form-side{display:flex;align-items:center;justify-content:center;padding:48px;background:var(--surface)}
.login-card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:20px}
.lc-head h2{font-size:26px;font-weight:700}
.lc-head p{margin-top:7px;font-size:13.5px;color:var(--text-2)}
.field{display:flex;flex-direction:column;gap:7px}
.field>span{font-size:12.5px;font-weight:600;color:var(--text-2)}
.input{display:flex;align-items:center;gap:9px;padding:0 14px;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);transition:.15s}
.input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input i{font-style:normal;font-size:15px;color:var(--text-3)}
.input input,.input select{flex:1;border:none;outline:none;background:none;
  font-family:inherit;font-size:13.5px;color:var(--text);padding:12px 0}
.input.select select{cursor:pointer}
.btn-login{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;
  font-size:14.5px;font-weight:700;transition:.15s}
.btn-login:hover{background:#1d4fd0}
.divider{display:flex;align-items:center;gap:12px;color:var(--text-3);font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.btn-sso{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text-2);font-size:13.5px;font-weight:600;transition:.15s}
.btn-sso:hover{border-color:#cbd5e1;background:var(--surface-2)}

/* ---------- Google 登入 ---------- */
.btn-google{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 18px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-size:14.5px;font-weight:600;
  box-shadow:0 1px 2px rgba(15,23,42,.05);transition:.15s}
.btn-google:hover{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 4px 14px rgba(37,99,235,.12)}
.btn-google:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}
.g-logo{width:20px;height:20px;flex:none}

/* ---------- 登入政策說明 ---------- */
.policy{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-2)}
.policy-row{display:flex;align-items:flex-start;gap:11px}
.policy-row>span{font-size:15px;line-height:1.5;flex:none}
.policy-row strong{display:block;font-size:12.5px;font-weight:700}
.policy-row small{font-size:11.5px;color:var(--text-2)}
.policy-row code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:var(--surface);padding:1px 5px;border-radius:4px;border:1px solid var(--border)}

/* ---------- 通知 ---------- */
.notice{padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--surface-2);border-left-width:4px}
.notice strong{display:block;font-size:13.5px;font-weight:700;margin-bottom:4px}
.notice p{font-size:12.5px;color:var(--text-2);line-height:1.6}
.notice.warn{background:var(--warn-soft);border-color:var(--warn)}
.notice.danger{background:var(--danger-soft);border-color:var(--danger)}
.notice.ok{background:var(--ok-soft);border-color:var(--ok)}
.forgot{font-size:12px;color:var(--text-3);text-align:center}

/* ---------- 404 ---------- */
.notfound{min-height:100vh;display:grid;place-items:center;padding:32px;
  background:linear-gradient(120deg,var(--primary) 0%,#1B2E55 55%,#3B2A6B 100%)}
.nf-card{width:100%;max-width:520px;background:var(--surface);border-radius:var(--radius);
  padding:48px 40px;text-align:center;box-shadow:0 20px 60px rgba(8,15,30,.35)}
.nf-mark{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 20px;
  border-radius:13px;background:var(--ai);color:#fff;font-size:23px}
.nf-code{font-size:52px;font-weight:700;line-height:1;color:var(--text-3);letter-spacing:.04em}
.nf-card h1{margin:12px 0 14px;font-size:22px;font-weight:700}
.nf-lead{font-size:13.5px;color:var(--text-2);line-height:1.8}
.nf-actions{display:flex;gap:12px;justify-content:center;margin:28px 0 24px}
.nf-actions .btn-login,.nf-actions .btn-sso{flex:1;max-width:180px}
.nf-card .brand-foot{color:var(--text-3)}
@media (max-width:520px){
  .nf-card{padding:36px 24px}
  .nf-actions{flex-direction:column}
  .nf-actions .btn-login,.nf-actions .btn-sso{max-width:none}
}

/* ---------- RWD ---------- */
/* 首次登入的資料填寫表單（沿用既有的 .field / .input / .btn-login 樣式） */
.reg-form{display:flex;flex-direction:column;gap:14px}
.reg-form[hidden]{display:none}
.reg-form .btn-login[disabled]{opacity:.6;cursor:not-allowed}

/* 首次使用的註冊入口 */
.reg-entry{display:flex;flex-direction:column;gap:14px}
.reg-entry[hidden],.divider[hidden]{display:none}
.reg-steps{list-style:none;display:flex;flex-direction:column;gap:10px;
  padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2)}
.reg-steps li{display:flex;align-items:flex-start;gap:11px}
.reg-steps b{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700}
.reg-steps div{display:flex;flex-direction:column;font-size:12.5px;font-weight:600;line-height:1.5}
.reg-steps small{font-size:11.5px;font-weight:400;color:var(--text-2)}

@media (max-width:980px){
  .login{grid-template-columns:1fr}
  .brand-side{display:none}
  .form-side{padding:32px 20px;min-height:100vh}
}