:root{
  --bg: #0f1720;
  --card: #1b2330;
  --surface: #2c333a;
  --text: #e6eef6;
  --muted: #9aa6b3;
  --primary: #1173d4;
  --radius: 12px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}
body{background: linear-gradient(180deg,#071021 0%, #0d1620 100%);color:var(--text);-webkit-font-smoothing:antialiased}

/* 使用 grid 讓 footer 固定在最下方 */

.page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 0 24px;
}

.card {
  /* 讓 card 佔滿可用高度但維持固定最大寬度並置中 */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg,var(--card),#0f1a24);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
  padding: 28px;
}

.brand{display:flex;justify-content:center;margin-bottom:10px}
.avatar{font-size:44px;color:var(--primary)}
.title{text-align:center;font-size:28px;margin:6px 0 18px;font-weight:700}
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column}
.label{font-size:14px;color:var(--text);margin-bottom:6px}
.field input{appearance:none;border:0;outline:0;padding:12px 14px;border-radius:10px;background:var(--surface);color:var(--text);font-size:15px}
.password-wrap{display:flex;align-items:center;gap:8px}
.password-wrap input{flex:1}
.toggle-pw{background:var(--surface);border:0;padding:8px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer}
.toggle-pw:active{transform:scale(0.98)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:10px;border:0;font-weight:700;font-size:16px;cursor:pointer}
.btn.primary{background:var(--primary);color:white}
.btn.primary:active{transform:scale(0.995)}
.muted{color:var(--muted);font-size:13px}
.center{text-align:center;margin-top:12px}
.link{color:var(--text);font-weight:600;text-decoration:none}
.footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  width: 100%;
  padding: 24px 0;
  grid-row: 2;
}
.logo{width:144px;height:48px;opacity:0.95;border-radius:6px}

/* Footer 資訊樣式 */
.footer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 4px;
}

.footer-title {
  color: #9dabb9;
  font-size: 13px;
  text-align: center;
  margin: 0;
  align-self: center;
}

.footer-address,
.footer-phone {
  color: #9dabb9;
  font-size: 9px;
  text-align: left;
  margin: 0;
}

/* 響應式調整 */
@media (max-width:420px){
  .card{padding:20px;border-radius:12px}
  .title{font-size:22px}
}

@media (min-width:900px){
  .page{padding:40px}
  .card{max-width:480px}
}

/* 可用於輕微焦點樣式 */
input:focus,.toggle-pw:focus,.btn:focus{outline:3px solid rgba(17,115,212,0.12)}