/* 登入頁 */
#login.active { display: flex; }
/* 與介紹頁同一套大氣層,切換過去不會有背景突變的違和感 */
#login { position: relative; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; overflow: hidden; background: radial-gradient(140% 100% at 50% -20%, oklch(0.155 0.026 262), var(--bg) 72%); }
#login .l-glow { background: radial-gradient(ellipse 64% 48% at 50% 0%, rgba(92,134,210,.10), transparent 64%); }
.login-wrap { position: relative; z-index: 1; width: 100%; max-width: 390px; }
.login-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 28px; }
.login-head .title { font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -.02em; margin-top: 16px; }
.login-head .sub { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.login-card { background: var(--glass); border: 1px solid var(--line); border-radius: 16px; padding: 26px; backdrop-filter: blur(12px); }
.login-card label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; margin-bottom: 7px; }
.login-card input { width: 100%; height: 44px; padding: 0 13px; margin-bottom: 16px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: var(--ink); font-size: 14px; font-family: inherit; outline: none; }
.login-card input:last-of-type { margin-bottom: 20px; }
.login-card .btn-primary { width: 100%; height: 46px; font-size: 15px; border-radius: 10px; box-shadow: 0 8px 26px rgba(60,120,230,.3); }
.login-card .btn-primary:hover { transform: none; filter: brightness(1.07); }
.login-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 13px; }
.login-foot a { color: var(--muted); cursor: pointer; text-decoration: none; }
.login-foot a:hover { color: var(--ink); }