:root {
    --bg: #ffffff;
    --paper: #ffffff;
    --paper-2: #fafafa;
    --border: #e5e7eb;
    --text: #0f172a;
    --muted: #6b7280;
    --brand: #2563eb;
    --brand-2: #1d4ed8;
    --ok: #16a34a;
}

/* Page canvas */
.auth-wrap {
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 10% -10%, rgba(37,99,235,.06), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(99,102,241,.05), transparent 60%), linear-gradient(180deg, #fff, #fff);
    padding: 24px;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: var(--text);
}

/* Card */
.auth-card-light {
    width: 100%;
    max-width: 460px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 18px 60px rgba(2,6,23,.06), 0 2px 8px rgba(2,6,23,.04), inset 0 1px 0 rgba(255,255,255,.6);
    overflow: hidden;
    animation: cardIn .45s cubic-bezier(.2,.8,.2,1) .1s both;
    transform-origin: 50% 40%;
}

@keyframes cardIn {
    from {
        transform: translateY(8px) scale(.995);
        opacity: .0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.card-header-clean {
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #fff, #fafafa);
    padding: 1.05rem 1.25rem;
}

.card-body-clean {
    padding: 1.1rem 1.25rem 1.25rem;
}

/* Brand avatar */
.brand-lock {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 10px 22px rgba(37,99,235,.25);
    margin-right: .6rem;
    animation: bob 3.6s ease-in-out infinite;
}

@keyframes bob {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-2px)
    }
}

/* Input */
.form-label {
    color: var(--muted);
    font-weight: 600;
}

.fancy-input-light.form-control {
    background: var(--paper);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .72rem 3.25rem .72rem 2.5rem;
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

    .fancy-input-light.form-control::placeholder {
        color: #9aa1ad;
    }

    .fancy-input-light.form-control:focus {
        border-color: rgba(37,99,235,.55);
        box-shadow: 0 0 0 .25rem rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.9);
        transform: translateY(-1px);
    }

/* Input adornments */
.input-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.05rem;
}

.valid-ind {
    position: absolute;
    right: 2.6rem;
    top: 50%;
    transform: translateY(-50%) scale(.95);
    font-size: 1.05rem;
    opacity: 0;
    transition: opacity .15s ease, transform .18s ease;
    color: var(--ok);
}

    .valid-ind.on {
        opacity: 1;
        transform: translateY(-50%) scale(1.03);
    }

/* Stronger visual invalid/valid states on the custom input */
.fancy-input-light.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.12), inset 0 1px 0 rgba(255,255,255,.9);
}

.fancy-input-light.is-valid {
    border-color: rgba(16,185,129,.6);
    box-shadow: 0 0 0 .25rem rgba(16,185,129,.12), inset 0 1px 0 rgba(255,255,255,.9);
}

.valid-ind.invalid {
    position: absolute;
    right: 2.6rem;
    top: 50%;
    color: #dc3545;
    opacity: 1;
    transform: translateY(-50%) scale(1.03);
}

/* Paste button */
.paste-btn {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #9aa1ad;
    padding: 4px 6px;
    border-radius: 8px;
    z-index: 2;
}

    .paste-btn:hover {
        color: #6b7280;
        background: #f2f4f7;
    }

.mb-3.position-relative {
    position: relative;
}

/* New shell: makes icons center on the input, not the whole mb-3 */
.field-shell {
    position: relative;
}

/* Center adornments relative to the shell (== input area) */
.input-icon, .valid-ind, .paste-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Keep clickable paste button; icons can ignore clicks */
.input-icon, .valid-ind {
    pointer-events: none;
}

.paste-btn {
    pointer-events: auto;
}

/* Existing horizontal positions still work */
.input-icon {
    left: .75rem;
    font-size: 1.05rem;
    color: #94a3b8;
}

.valid-ind {
    right: 2.6rem;
    font-size: 1.05rem;
}

.paste-btn {
    right: .6rem;
    z-index: 2;
}

/* lock input height for pixel-perfect centering */
.fancy-input-light.form-control {
    height: 52px;
    line-height: 1.25;
}

/* Button */
.btn-primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    border: 0;
    box-shadow: 0 10px 22px rgba(37,99,235,.18);
    transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}

    .btn-primary:hover {
        filter: brightness(1.04);
        box-shadow: 0 12px 26px rgba(37,99,235,.24);
    }

    .btn-primary:active {
        transform: translateY(1px);
    }

/* Shine sweep */
.shine-btn {
    position: relative;
    overflow: hidden;
}

    .shine-btn::after {
        content: "";
        position: absolute;
        inset: 0 auto 0 -60%;
        width: 60%;
        transform: skewX(-18deg);
        background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.35), rgba(255,255,255,0));
        animation: none;
        opacity: 0;
    }

    .shine-btn:hover::after {
        animation: sweep 1.2s ease;
        opacity: 1;
    }

@keyframes sweep {
    from {
        left: -60%
    }

    to {
        left: 140%
    }
}

/* keep send button height stable when toggling loading state */
.shine-btn .btn-label,
.shine-btn .btn-loading {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
}


/* Ripple */
.btn {
    position: relative;
    overflow: hidden;
}

    .btn .ripple {
        position: absolute;
        border-radius: 999px;
        transform: scale(0);
        background: rgba(255,255,255,.45);
        animation: ripple .6s ease-out forwards;
        pointer-events: none;
    }

@keyframes ripple {
    to {
        transform: scale(14);
        opacity: 0;
    }
}

/* Top progress bar */
.topbar {
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 2px 10px rgba(2,6,23,.08);
}

    .topbar.run {
        animation: loadbar 2s ease-in-out forwards;
    }

@keyframes loadbar {
    0% {
        width: 0
    }

    60% {
        width: 82%
    }

    100% {
        width: 100%
    }
}

/* Invalid nudge */
.shake-l {
    animation: shake .28s linear;
}

@keyframes shake {
    10%,90% {
        transform: translateX(-1px)
    }

    20%,80% {
        transform: translateX(2px)
    }

    30%,50%,70% {
        transform: translateX(-4px)
    }

    40%,60% {
        transform: translateX(4px)
    }
}

/* Links */
a.link-underline {
    color: var(--brand-2);
    text-decoration: none;
    border-bottom: 1px solid rgba(37,99,235,.25);
}

    a.link-underline:hover {
        border-bottom-color: rgba(37,99,235,.55);
    }

/* Tiny helpers */
.separator {
    opacity: .55;
}

.text-muted kbd {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: .05rem .35rem;
}

/* --- helper row & kbd legibility (no more white text) --- */
.helper-row {
    color: #64748b !important;
}

    .helper-row kbd {
        background: #f3f4f6;
        color: #0f172a; /* force dark text */
        border: 1px solid #e5e7eb;
        border-bottom-width: 2px;
        border-radius: 6px;
        padding: .05rem .35rem;
        font-weight: 600;
    }

/* also make validation summary readable on white */
.text-danger {
    color: #b91c1c !important;
}

/* small centering & spacing tweaks on narrow screens */
@media (max-width: 420px) {
    .auth-card-light {
        margin: 0 12px;
    }

    .card-header-clean, .card-body-clean {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* Verify Page */
/* OTP grid – light theme */
.otp-grid {
    display: flex;
    gap: .6rem;
    position: relative;
    user-select: none;
}

.otp-input {
    width: 50px;
    height: 56px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .04em;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}

    .otp-input:focus {
        outline: 0;
        transform: translateY(-1px);
        border-color: rgba(37,99,235,.55);
        box-shadow: 0 0 0 .25rem rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.9);
    }

    .otp-input.filled {
        border-color: rgba(37,99,235,.45);
    }

.otp-valid-ind {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%) scale(.9);
    color: #16a34a;
    opacity: 0;
    transition: opacity .15s ease, transform .18s ease;
    font-size: 1.25rem;
}

    .otp-valid-ind.on {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
    }

/* helper row (reuse from Sign-In fix) */
.helper-row {
    color: #64748b !important;
}

    .helper-row kbd {
        background: #f3f4f6;
        color: #0f172a;
        border: 1px solid #e5e7eb;
        border-bottom-width: 2px;
        border-radius: 6px;
        padding: .05rem .35rem;
        font-weight: 600;
    }