/* css/auth.css */
#login-screen { position: fixed; inset: 0; background: #fffdf9; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding:20px; overflow-y: auto; }
#login-screen.hidden { display:none; }
.login-box { width:100%; max-width:340px; text-align:center; padding-bottom:50px; }
.user-select-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:15px; margin-bottom:20px; }
.user-btn { background:#fff; border:2px solid #eee; border-radius:20px; padding:15px; cursor:pointer; transition:0.2s; box-shadow:0 4px 10px rgba(0,0,0,0.03); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.user-btn.selected { border-color:var(--main); background:#f0fff8; transform:scale(1.05); }
.pin-display { font-size: 2rem; letter-spacing: 0.5em; margin: 15px 0; min-height: 40px; color: var(--main-dark); font-weight: bold; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; max-width: 280px; margin-left: auto; margin-right: auto; }
.key-btn { background: #fff; border: 1px solid #eee; border-radius: 50%; width: 65px; height: 65px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: var(--text); box-shadow: 0 4px 0 #eee; cursor: pointer; user-select: none; }
.key-btn:active { transform: translateY(4px); box-shadow: none; background: #f9f9f9; }
.key-btn.action { font-size: 1rem; background: #f0f0f0; color: #888; }
.hidden { display: none !important; }