/* =====================================================================
   Login screen — centered, single-column
   ===================================================================== */
.login-shell { min-height:calc(100 * var(--vh)); background: var(--bg); display:flex; align-items:center; justify-content:center; padding: 32px 16px; }
.login-card-wrap { width: 100%; max-width: 420px; display:flex; flex-direction:column; align-items:center; gap: 20px; }

.login-brand-row { display:flex; align-items:center; gap:12px; }
.login-brand-name { font-family: var(--font-serif); font-size: 22px; font-weight:600; letter-spacing:-0.01em; color: var(--fg-1); }
.login-brand-sub { font-size: 12px; color: var(--fg-3); margin-top:1px; letter-spacing:.01em; }

.login-card { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-2); padding: 32px; display:flex; flex-direction:column; gap: 16px; }
.login-card-head { margin-bottom: 4px; text-align:center; }
.login-title { font-size: 22px; font-weight:700; letter-spacing:-.012em; color: var(--fg-1); margin:0 0 6px; }
.login-sub { font-size: 13.5px; color: var(--fg-3); line-height: 1.5; margin:0; }

.login-error { display:flex; align-items:flex-start; gap:8px; padding: 10px 12px; border-radius: 10px; background: #F9E4E0; border: 1px solid #EBB8B2; color: #7E2A22; font-size: 13px; }
.login-error svg { flex-shrink:0; margin-top:1px; }

.login-field { display:flex; flex-direction:column; gap: 6px; }
.login-label { font-size: 12px; font-weight:600; color: var(--fg-2); letter-spacing:.01em; }
.login-label-row { display:flex; align-items:center; justify-content:space-between; }
.login-link { font-size: 12px; color: var(--brand); text-decoration:none; font-weight:600; }
.login-link:hover { color: var(--brand-hover); text-decoration: underline; }

.login-input { display:flex; align-items:center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--fg-3); transition: border-color .12s, box-shadow .12s; }
.login-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); color: var(--brand); }
.login-input input { flex:1; min-width:0; border:0; outline:0; background:transparent; font-family: inherit; font-size: 14px; color: var(--fg-1); }
.login-input input::placeholder { color: var(--fg-4); }
.login-eye-btn { background:transparent; border:0; cursor:pointer; padding:2px; color: var(--fg-3); display:flex; align-items:center; }
.login-eye-btn:hover { color: var(--brand); }


.login-submit { width:100%; justify-content:center; padding: 12px 16px; font-size: 14.5px; margin-top: 4px; }

.login-meta { display:flex; align-items:flex-start; gap:8px; margin-top: 4px; padding: 12px; background: var(--ink-25); border: 1px solid var(--border-subtle); border-radius: 10px; font-size: 12.5px; color: var(--fg-3); line-height: 1.5; }
.login-meta svg { flex-shrink:0; margin-top:2px; color: var(--brand); }

.login-foot { display:flex; flex-direction:column; align-items:center; gap:6px; padding-top: 4px; }
.login-status { display:inline-flex; align-items:center; gap:8px; font-size: 12px; color: var(--fg-3); }
.login-status-dot { width:8px; height:8px; border-radius:999px; background: var(--status-success); box-shadow: 0 0 0 3px rgba(46,158,93,.18); }
.login-foot-meta { display:inline-flex; align-items:center; gap:6px; font-size: 11.5px; color: var(--fg-4); }
.login-foot-meta svg { color: var(--brand); }
.login-copyright { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); letter-spacing:.02em; }