:root {
  --yellow:#f8c400;
  --navy:#123f78;
  --cream:#fffaf0;
  --line:#e5d8c4;
}
* { box-sizing:border-box; }
body {
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  font-family:"Microsoft JhengHei", system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 20%, rgba(248,196,0,.18), transparent 20rem),
    linear-gradient(180deg, #fffdf7, #f6f1e8);
}
.login-shell { width:min(440px, calc(100vw - 32px)); }
.login-card {
  background:white;
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px;
  box-shadow:0 20px 60px rgba(60,43,12,.12);
}
.brand { color:var(--navy); font-weight:900; letter-spacing:.08em; }
h1 { margin:8px 0 4px; color:var(--navy); }
p { color:#766c60; }
form { display:grid; gap:16px; margin-top:24px; }
label { display:grid; gap:7px; font-weight:700; }
input {
  padding:12px;
  border:1px solid #d8cbb7;
  border-radius:10px;
  font:inherit;
}
button {
  border:0;
  border-radius:12px;
  padding:13px;
  background:var(--navy);
  color:white;
  font-weight:900;
  cursor:pointer;
}
#loginMessage { min-height:1.2em; color:#b42318; margin:0; }
.test-accounts {
  margin:22px 0;
  padding:16px;
  background:var(--cream);
  border-radius:14px;
}
.test-accounts p { margin:6px 0; font-size:.9rem; }
a { color:var(--navy); }