/* Общий вид клавиатуры PIN (11.11.2026): четыре клетки + цифровая клавиатура 3x4.
 * Разметку строит pin_keypad.js из пустого <div class="pin-kp" data-pin-kp-for>;
 * поле и этот div выдаёт ОДНА дверь — _partials/pin_keypad.html. Стиль живёт
 * только здесь: копии в шаблонах страж (test_pin_one_component) красит. */
.pin-kp-source { display: none !important; }
.pin-kp { margin: 2px 0 4px; }
.pin-kp-dots { display: flex; justify-content: center; gap: 14px; margin-bottom: 24px; }
.pin-kp-dot {
    width: 56px; height: 64px; max-width: 20vw; border-radius: 12px;
    border: 2px solid rgba(250,204,21,0.55); background: transparent;
    transition: background .1s, border-color .1s;
}
.pin-kp-dot.filled { background: #FACC15; border-color: #FACC15; }
.pin-kp-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pin-kp-key {
    border: 0; background: transparent; cursor: pointer; font-family: inherit;
    color: #f4f4f5; font-size: 22px; font-weight: 600; padding: 14px 0;
    border-radius: 12px; transition: background .12s, color .12s;
    -webkit-tap-highlight-color: transparent;
}
.pin-kp-key:hover, .pin-kp-key:active { background: rgba(250,204,21,0.10); }
.pin-kp-key:focus-visible { outline: 2px solid rgba(250,204,21,0.55); outline-offset: -2px; }
.pin-kp-corner { font-size: 12px; font-weight: 500; color: #9CA3AF; }
.pin-kp-corner:hover { color: #FACC15; background: transparent; }
.pin-kp-blank { pointer-events: none; }
.pin-kp-back { display: flex; align-items: center; justify-content: center; }
.pin-kp-back svg { width: 22px; height: 22px; }
.pin-kp:focus { outline: none; }