* { box-sizing: border-box; }
body.home-page { margin: 0; font-family: "Microsoft JhengHei", Arial, sans-serif; }

.home-center {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1a2f4b 0%, #2f4d75 45%, #eef2f7 100%);
  padding: 24px;
}

.home-login-card {
  max-width: 360px; width: 100%; background: white; border-radius: 16px;
  padding: 36px 30px; box-shadow: 0 12px 34px rgba(10,20,40,0.25);
}
.home-card-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.home-card-brand h2 { margin: 0; font-size: 36px; color: #1a2f4b; }
.home-card-brand p { margin: 2px 0 0; font-size: 12px; color: #7a8ba3; }

.home-welcome { margin: 0 0 4px; font-size: 16px; color: #1a2f4b; }
.home-welcome-sub { margin: 0 0 22px; font-size: 12px; color: #8a97ab; }

.home-input-group { position: relative; margin-bottom: 16px; }
.home-input-group input {
  width: 100%; padding: 12px 14px 12px 40px;
  border: 1px solid #dbe3ee; border-radius: 8px; font-size: 14px; background: #fafbfd;
}
.home-input-group .home-icon-user,
.home-input-group .home-icon-lock { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); }
.home-eye-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; padding: 4px; line-height: 0;
}

.home-login-error {
  margin: -4px 0 14px;
  font-size: 12px;
  color: #c62828;
}

.home-login-btn {
  width: 100%; margin-top: 8px; border: none; border-radius: 10px; padding: 13px;
  background: linear-gradient(135deg, #1a2f4b, #2f4d75); color: white;
  font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.home-login-btn:hover { background: linear-gradient(135deg, #142438, #253f61); }


.home-badge {
  margin-top: 20px; display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #dbe4f0;
}

.home-icon { display: inline-block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.home-icon-house { width: 30px; height: 30px; color: #1a2f4b;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.home-icon-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); color: #9aabc2; }
.home-icon-lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='9' rx='2' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='9' rx='2' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); color: #9aabc2; }
.home-icon-eye { width: 16px; height: 16px; color: #9aabc2;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); }
.home-icon-arrow { width: 14px; height: 14px; color: white;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.home-icon-shield { width: 14px; height: 14px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5z' stroke='%23000' stroke-width='1.6' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5z' stroke='%23000' stroke-width='1.6' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E"); }