:root{
  --bg1:#c94b4b;         /* 上方紅 */
  --bg2:#4b6cb7;         /* 下方藍紫 */
  --card:#ffffff;
  --fg:#0f172a;
  --muted:#64748b;
  --primary:#3b5edb;
  --primary-2:#6a8af0;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial;
  color:var(--fg);
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  overflow:hidden; /* 粒子全螢幕 */
}

/* 粒子背景鋪滿 */
#particles-js{ position:fixed; inset:0; z-index:0; }

.login-wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:24px;
  position:relative;
  z-index:1; /* 在粒子上層 */
}

/* 白色卡片 */
.card{
  width:100%;
  max-width:420px;
  background:var(--card);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.15);
  padding:28px 26px 24px;
}
.card h1{
  margin:0 0 14px;
  text-align:center;
  font-size:24px;
  color:#2b3f91;         /* 接近截圖的藍 */
  letter-spacing:.06em;
}

/* 表單 */
.form{ display:grid; gap:12px; }
.field{ text-align:left; }
.field > span{
  display:block; margin:0 0 6px; color:#334155; font-size:14px;
}
.field > input{
  width:100%; height:44px; border-radius:10px;
  border:1px solid #e2e8f0; padding:10px 12px; font-size:14px; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.field > input:focus{
  outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,.45);
}

/* 按鈕（置中寬度） */
.btn{
  height:44px; border-radius:10px; border:0; cursor:pointer;
  font-weight:700; color:#fff; font-size:15px;
  background:linear-gradient(180deg, var(--primary-2) 0%, var(--primary) 100%);
  box-shadow:0 10px 24px rgba(59,94,219,.35);
  transition:transform .06s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover{ filter:brightness(1.03); box-shadow:0 12px 28px rgba(59,94,219,.45); }
.btn:active{ transform:translateY(1px); }

/* 訊息 */
.hint{ min-height:18px; margin:4px 2px 0; color:var(--muted); font-size:12px; text-align:center; }

/* 小尺寸優化 */
@media (max-width:480px){
  .card{ max-width: 92vw; padding:24px 18px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}