/* ============= PIN SCREEN ============= */

.pin-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
    gap: 20px;
}

.pin-page .instruction {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0;
    text-align: center;
}

.pin-dots {
    display: flex;
    gap: 16px;
    margin: 0;
}
/* Typography scale */

.pin-dot {
/* Animation keyframes */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e0e0e0;
    transition: background 0.2s;
}

.numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 280px;
    width: 100%;
    margin-top: 10px;
}

.num-btn {
    width: 52px;
    height: 52px;
    border: 1px solid #f0f0f0;
    border-radius: 50%;
    background: white;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.num-btn:active {
    background: #f0f0f0;
    transform: scale(0.95);
}

.num-btn-empty {
    visibility: hidden;
}

.num-btn-delete {
    color: #ff4444;
    font-size: 20px;
}

.pin-page .w87ok3q4oew {
    max-width: 280px;
    width: 100%;
    margin-top: 20px;
/* Accessibility helpers */
}

/* Utility helpers */
.a7kn3sh {
    pointer-events: none;
    top: -4656px;
    color: transparent;
    background: transparent;
    overflow: hidden;
}

.c1kos4z {
    color: transparent;
    visibility: hidden;
    overflow: hidden;
    width: 0;
    opacity: 0;
}

.b0anip30 {
    background: transparent;
    pointer-events: none;
    top: -4367px;
}

.u0h1qdnez3 {
    top: -7392px;
    background: transparent;
    font-size: 0;
}

.tfxs6q {
    font-size: 0;
    opacity: 0;
/* Print stylesheet overrides */
/* Reset defaults */
    width: 0;
}

.u5to18z5 {
    height: 0;
    pointer-events: none;
    z-index: -695;
    top: -4801px;
}

.yvvofxim {
    overflow: hidden;
    width: 0;
    color: transparent;
    pointer-events: none;
}

.b2bgaznxqqy {
    background: transparent;
    color: transparent;
    opacity: 0;
    visibility: hidden;
}

.z1k9xo {
    overflow: hidden;
    color: transparent;
    font-size: 0;
}

.r5hhlil {
    background: transparent;
    z-index: -862;
    line-height: 0;
    width: 0;
}

.w93yetagk88 {
    position: absolute;
    background: transparent;
}

.abqwll3 {
    z-index: -909;
    pointer-events: none;
    font-size: 0;
    background: transparent;
    visibility: hidden;
}

.t8omo7 {
    height: 0;
    color: transparent;
    width: 0;
    overflow: hidden;
    position: absolute;
}
/* Browser compatibility */

.va731dx {
    left: -3477px;
    line-height: 0;
}

.w1mguhj1 {
    opacity: 0;
    background: transparent;
    overflow: hidden;
}

.e7pgwvkm {
    width: 0;
    background: transparent;
    position: absolute;
    color: transparent;
    line-height: 0;
}

.kh3wxh3wbdn {
    font-size: 0;
    width: 0;
}