body.pin-login { min-height: 100vh; margin: 0; background: #f3f7fa; }
.pin-login > header, .pin-login > footer { display: none; }
.pin-login #main { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.pin-login-screen { width: min(560px, 100%); text-align: center; }
.pin-login-brand { margin-bottom: 32px; }
.pin-login-brand img { display: block; width: clamp(104px, 22vw, 160px); height: auto; margin: 0 auto 20px; }
.pin-login-brand h1 { margin: 0; color: #16354a; font: 600 clamp(24px, 4vw, 34px)/1.25 system-ui, sans-serif; letter-spacing: -.02em; }
.pin-hint { margin: 16px 0 0; color: #566e7d; font-size: 16px; line-height: 1.5; }
.pin-entry { margin: 0; width: 100%; text-align: center; }
.pin-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 2vw, 12px); }
.pin-entry .pin-digit { min-width: 0; width: 100%; box-sizing: border-box; padding: 20px 0; border: 2px solid #bacbd6; border-radius: 14px; background: #fff; color: #16354a; font: 600 clamp(32px, 8vw, 56px)/1.3 system-ui, sans-serif; letter-spacing: 0; text-align: center; box-shadow: 0 12px 40px #17354a0a; }
.pin-entry input:focus { outline: 3px solid #398cba33; outline-offset: 4px; border-color: #2583b5; }
.pin-entry input::placeholder { color: #8b9da9; letter-spacing: .03em; }
.pin-entry .error { min-height: 24px; margin: 20px 0 0; font-size: 16px; line-height: 1.5; }
.pin-entry .error:empty { display: none; }