/* 床邊監護 — 登入頁（品牌深色頁，固定深色不隨主題切換） */
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  src: url("public/fonts/InterVariable.woff2") format("woff2");
}
:root {
  --lg-bg: #15161a;
  --lg-card: #1c2026;
  --lg-input: #090b0c;
  --lg-text: #e8eaf0;
  --lg-dim: #8c949c;
  --lg-accent: #6ef379;
  --lg-accent-hov: #9df9a1;
  --lg-accent-act: #57dd5d;
  --lg-btn-text: #14301a;
  --lg-err: #ffb4b4;
  --lg-err-bg: #4a1d1f;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(1200px 600px at 50% 110%, #1d2a22 0%, var(--lg-bg) 60%);
  color: var(--lg-text);
  font: 15px/1.5 "Inter", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.bg-line { position: fixed; left: 0; right: 0; bottom: 6vh; width: 100%; height: 40vh; opacity: .55; pointer-events: none; }
.login-page { position: relative; width: 100%; display: flex; justify-content: center; padding: 24px; }
.login-card {
  width: 380px; max-width: 100%;
  background: var(--lg-card); border-radius: 8px; padding: 44px 30px 34px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55), 0 0 0 1px #ffffff0d, 6px 11px 28px 0 rgba(110, 243, 121, .22);
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 38px; }
.login-logo { height: 40px; width: auto; display: block; }
.login-product { font-size: 17px; font-weight: 600; letter-spacing: 4px; color: var(--lg-accent); padding-left: 4px; }

.login-field {
  display: flex; align-items: center; gap: 10px; height: 46px; margin-bottom: 18px; padding: 0 12px;
  background: var(--lg-input); border: 1px solid transparent; border-radius: 4px; transition: border-color 150ms;
}
.login-field:hover { border-color: #6ef37977; }
.login-field:focus-within { border-color: var(--lg-accent); box-shadow: 0 0 0 3px #6ef37926; }
.login-field.bad { border-color: #ff6b6e; }
.login-field .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--lg-dim); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-field input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--lg-text); font: inherit; font-size: 15px;
}
.login-field input:-webkit-autofill { -webkit-text-fill-color: var(--lg-text); box-shadow: 0 0 0 40px var(--lg-input) inset; }
.eye { flex: none; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.eye:hover .ico { stroke: var(--lg-text); }
.eye.on .ico { stroke: var(--lg-accent); }

.login-error {
  display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 16px; padding: 9px 12px;
  background: var(--lg-err-bg); color: var(--lg-err); border-radius: 4px; font-size: 13.5px; line-height: 1.5;
}
.login-error[hidden] { display: none; }
.login-error .ico { width: 17px; height: 17px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.login-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 6px;
  border: 0; border-radius: 4px; background: var(--lg-accent); color: var(--lg-btn-text);
  font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 4px; cursor: pointer; transition: background 120ms;
}
.login-btn:hover { background: var(--lg-accent-hov); }
.login-btn:active { background: var(--lg-accent-act); }
.login-btn:disabled { opacity: .55; cursor: default; }
.login-btn .ico { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.login-btn.busy .ico { display: block; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 480px) {
  .login-page { padding: 16px; }
  .login-card { padding: 36px 20px 28px; }
  .bg-line { bottom: 2vh; }
}