.pin-shell { width: min(100% - 40px, 480px); margin: 40px auto; }
.pin-shell .app-header { margin-bottom: 64px; }
.pin-card { padding: 30px; border: 1px solid #3b433e; border-radius: 9px; background: #222b25; }
.pin-card h1 { font-size: clamp(2.3rem, 6vw, 3.3rem); line-height: 1.05; margin: 18px 0; }
.pin-card .lede { font-size: 1rem; line-height: 1.6; margin-bottom: 28px; }
.pin-card label { display: block; color: #e9e8df; font-size: .85rem; margin-bottom: 8px; }
.pin-card input { width: 100%; box-sizing: border-box; background: #171e19; color: #f0eee5; border: 1px solid #536052; border-radius: 5px; padding: 14px; font-size: 1.4rem; letter-spacing: .22em; }
.pin-card input:focus { outline: 2px solid #d7855f; outline-offset: 3px; }
.pin-card .hint { margin: 10px 0 22px; line-height: 1.5; }
.pin-card button { width: 100%; margin-top: 20px; }
.pin-card [hidden] { display: none; }
#pin-message { min-height: 1.5em; color: #e0b59e; font-size: .9rem; line-height: 1.5; }
.pin-note { font-size: .78rem; line-height: 1.5; color: #a2aca3; margin-top: 25px; }
.lock-button { padding: 7px 12px; font-size: .75rem; }
@media(max-width: 500px) { .pin-shell { margin-top: 25px; } .pin-shell .app-header { margin-bottom: 35px; } .pin-card { padding: 24px; } }