/* Numeric captcha – dark neon palette */
.numeric-captcha {
    --nc-bg-primary: #0A0F1C;
    --nc-bg-secondary: #0F172A;
    --nc-card-bg: #1A2338;
    --nc-neon: #00BFFF;
    --nc-neon-alt: #00A8FF;
    --nc-metallic: rgba(192, 208, 240, 0.18);
    --nc-metallic-mid: rgba(160, 176, 208, 0.35);
    --nc-text-muted: rgba(192, 208, 240, 0.55);
}

.numeric-captcha.numeric-captcha--panel {
    background: linear-gradient(145deg, rgba(26, 35, 56, 0.72) 0%, rgba(15, 23, 42, 0.85) 100%);
    border: 1px solid var(--nc-metallic);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow:
        inset 0 0 24px rgba(0, 191, 255, 0.04),
        0 4px 20px rgba(10, 15, 28, 0.45);
}

.numeric-captcha__image-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: linear-gradient(160deg, #FAFBFE 0%, #E8EEF7 55%, #DDE4F0 100%);
    border: 1px solid rgba(160, 176, 208, 0.65);
    border-radius: 8px;
    box-shadow:
        0 2px 10px rgba(10, 15, 28, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.numeric-captcha__image {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    image-rendering: auto;
}

.numeric-captcha__input {
    max-width: 220px;
    background: rgba(26, 35, 56, 0.9) !important;
    border: 1px solid var(--nc-metallic) !important;
    border-radius: 8px !important;
    color: var(--nc-neon) !important;
    font-weight: 600;
    letter-spacing: 0.35em;
    caret-color: var(--nc-neon-alt);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.numeric-captcha__input::placeholder {
    color: var(--nc-text-muted);
    letter-spacing: normal;
    font-weight: 400;
}

.numeric-captcha__input:focus {
    background: rgba(26, 35, 56, 0.95) !important;
    border-color: var(--nc-neon) !important;
    color: var(--nc-neon) !important;
    box-shadow:
        0 0 0 0.15rem rgba(0, 191, 255, 0.2),
        0 0 16px rgba(0, 191, 255, 0.18) !important;
}

.numeric-captcha__input:-webkit-autofill,
.numeric-captcha__input:-webkit-autofill:hover,
.numeric-captcha__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--nc-neon);
    box-shadow: 0 0 0 1000px rgba(26, 35, 56, 0.95) inset !important;
    border-color: var(--nc-neon) !important;
}