.login-screen { position: fixed; inset: 0; z-index: 100; background: linear-gradient(145deg, #f5f7f9, #eef2f5); display: none; place-items: center; padding: 24px; }
.login-screen.show { display: grid; }
.login-card { width: min(440px, 100%); background: #fff; border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 28px 80px rgba(20, 35, 50, .16); padding: 34px; }
.login-card img { width: 190px; height: 54px; object-fit: contain; object-position: left; margin-bottom: 26px; }
.login-card h1 { margin: 6px 0 8px; }
.login-card p { color: var(--muted); margin: 0 0 22px; }
.login-card form { display: grid; gap: 14px; }
.login-card label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.login-card input { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #fff; color: var(--text); }
.login-card details { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.login-card summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.login-card details label { margin-top: 12px; }
.login-submit { width: 100%; margin-top: 4px; }
.login-error { min-height: 18px; color: #b71824; font-size: 13px; }
.login-card > small { display: block; margin-top: 24px; color: var(--muted); }
.user-chip { display: flex; align-items: center; gap: 9px; }
.user-chip strong { display: block; font-size: 13px; }
.user-chip button { border: 0; background: transparent; padding: 0; color: var(--muted); font-size: 11px; }
.user-chip button:hover { color: var(--accent); }