.pin-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.pin-box {
    height: 48px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--off-white);
    color: var(--text-dark);
    font-family: 'DM Sans', sans-serif;
}

.pin-box:focus {
    border-color: var(--green-mid);
    box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.12);
}

/* Ensure all buttons have pointer (hand/thumb) cursor on hover */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.button,
[role="button"] {
    cursor: pointer !important;
}

/* Ensure disabled buttons show the not-allowed cursor */
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.btn:disabled,
.button:disabled,
[role="button"]:disabled,
.disabled,
[disabled] {
    cursor: not-allowed !important;
}