*,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        :root {
            --pr: #5057ea;
            --pr-dk: #3e44c4;
            --pr-gl: rgba(80, 87, 234, .14);
            --gr: #25d366;
            --gr-dk: #1aab52;
            --gr-gl: rgba(37, 211, 102, .13);
            --red: #ef4444;
            --bd: #1f2937;
            --mt: #6b7280;
            --br: #e5e7eb;
            --bg: #f6f7fb;
            --wh: #fff;
            --dk: #0f1729;
            --ff: 'Inter', sans-serif;
            --r8: 8px;
            --r12: 12px;
            --r16: 16px;
            --r999: 999px;
        }

        html,
        body {
            height: 100%;
            font-family: var(--ff);
            background: var(--bg);
            color: var(--bd)
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column
        }

        /* Topbar */
        .topbar {
            height: 56px;
            background: var(--wh);
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .topbar .inner {
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
            margin-bottom: 20px;
            /* padding: 0 20px; */
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .brand {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--pr);
            text-decoration: none;
            letter-spacing: -.03em
        }

        .brand span {
            color: #f97316
        }

        .close-btn {
            color: var(--mt);
            text-decoration: none;
            font-size: .95rem;
            display: flex;
            align-items: center;
            gap: 4px
        }

        .close-btn:hover {
            color: var(--bd)
        }

        /* Main */
        main {
            flex: 1;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 32px 16px 48px;
            background: linear-gradient(135deg, #5057ea 0%, #3e44c4 40%, #1b6ca8 100%);
        }

        /* Card */
        .card {
            width: 100%;
            max-width: 440px;
            background: var(--wh);
            border-radius: var(--r16);
            border: 1px solid var(--br);
            padding: 36px 32px;
            box-shadow: 0 4px 24px rgba(15, 23, 41, .07);
        }

        /* Steps */
        .steps {
            display: flex;
            gap: 6px;
            margin-bottom: 24px
        }

        .step {
            height: 3px;
            border-radius: 2px;
            background: var(--br);
            flex: 1;
            transition: background .3s
        }

        .step.done,
        .step.active {
            background: var(--pr)
        }

        /* Titles */
        .card-title {
            font-size: 1.45rem;
            font-weight: 800;
            color: var(--dk);
            letter-spacing: -.02em;
            margin-bottom: 5px
        }

        .card-sub {
            font-size: .9rem;
            color: var(--mt);
            line-height: 1.6;
            margin-bottom: 26px
        }

        /* Label */
        .field-label {
            font-size: .83rem;
            font-weight: 600;
            color: var(--bd);
            margin-bottom: 7px;
            display: block
        }

        /* ── THE ONE SMART FIELD ── */
        .smart-wrap {
            display: flex;
            align-items: center;
            border: 1.5px solid var(--br);
            border-radius: var(--r12);
            background: #fafafa;
            transition: border-color .2s, box-shadow .2s, background .2s;
            overflow: hidden;
        }

        .smart-wrap:focus-within {
            border-color: var(--pr);
            background: var(--wh);
            box-shadow: 0 0 0 3px var(--pr-gl)
        }

        .smart-wrap.wa:focus-within {
            border-color: var(--gr);
            box-shadow: 0 0 0 3px var(--gr-gl)
        }

        .smart-wrap.wa {
            border-color: var(--gr)
        }

        .s-icon {
            width: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            color: var(--mt);
            flex-shrink: 0;
            align-self: stretch;
            transition: color .2s;
        }

        .smart-wrap:focus-within .s-icon {
            color: var(--pr)
        }

        .smart-wrap.wa .s-icon,
        .smart-wrap.wa:focus-within .s-icon {
            color: var(--gr)
        }

        .s-prefix {
            font-size: .9rem;
            font-weight: 700;
            color: var(--bd);
            padding-right: 4px;
            display: none;
            align-items: center;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .smart-wrap.wa .s-prefix {
            display: flex
        }

        .smart-wrap input {
            flex: 1;
            min-width: 0;
            border: none;
            background: transparent;
            padding: 13px 12px 13px 2px;
            font-size: .95rem;
            font-family: var(--ff);
            color: var(--dk);
            outline: none;
        }

        .smart-wrap input::placeholder {
            color: #9ca3af
        }

        /* Hint */
        .field-hint {
            font-size: .77rem;
            color: var(--mt);
            margin-top: 6px;
            min-height: 15px;
            line-height: 1.5
        }

        .field-hint b {
            color: var(--pr);
            font-weight: 600
        }

        .field-hint.wa b {
            color: var(--gr-dk)
        }

        /* Send button */
        .btn-main {
            width: 100%;
            padding: 13px;
            border: none;
            border-radius: var(--r999);
            margin-top: 20px;
            background: var(--pr);
            color: #fff;
            font-family: var(--ff);
            font-size: .97rem;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: .01em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background .2s, transform .15s, box-shadow .2s;
            box-shadow: 0 6px 20px rgba(80, 87, 234, .3);
        }

        .btn-main:hover:not(:disabled) {
            background: var(--pr-dk);
            transform: translateY(-1px);
            box-shadow: 0 10px 26px rgba(80, 87, 234, .36)
        }

        .btn-main:active:not(:disabled) {
            transform: none
        }

        .btn-main:disabled {
            background: #c7c5f5;
            box-shadow: none;
            cursor: not-allowed
        }

        /* Timer */
        .timer-row {
            text-align: center;
            font-size: .8rem;
            color: var(--mt);
            margin-top: 10px;
            min-height: 18px
        }

        /* OTP wrap — slides in */
        .otp-wrap {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
        }

        .otp-wrap.open {
            max-height: 500px;
            opacity: 1
        }

        /* Sent note */
        .sent-note {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 10px 14px;
            border-radius: var(--r8);
            margin: 18px 0 16px;
            font-size: .83rem;
            font-weight: 600;
        }

        .sent-note.em {
            background: #eef0fe;
            color: #3730A3
        }

        .sent-note.wa {
            background: #dcfce7;
            color: #15803d
        }

        .sent-note i {
            font-size: 1rem;
            flex-shrink: 0
        }

        /* OTP boxes */
        .otp-row {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 8px;
            margin-bottom: 14px;
            width: 100%
        }

        .ob {
            width: 100%;
            min-width: 0;
            height: 52px;
            border: 1.5px solid var(--br);
            border-radius: var(--r8);
            background: #fafafa;
            text-align: center;
            font-size: 1.25rem;
            font-weight: 700;
            font-family: var(--ff);
            color: var(--dk);
            outline: none;
            -webkit-appearance: none;
            transition: border-color .2s, box-shadow .2s, background .2s;
            padding: 0;
        }

        .ob:focus {
            border-color: var(--pr);
            background: var(--wh);
            box-shadow: 0 0 0 3px var(--pr-gl)
        }

        .ob.filled {
            border-color: var(--pr);
            background: #eef0fe
        }

        /* Verify button */
        .btn-verify {
            width: 100%;
            padding: 13px;
            border: none;
            border-radius: var(--r999);
            background: var(--pr);
            color: #fff;
            font-family: var(--ff);
            font-size: .97rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s, transform .15s;
            box-shadow: 0 6px 20px rgba(80, 87, 234, .3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-verify:hover {
            background: var(--pr-dk);
            transform: translateY(-1px)
        }

        .btn-verify:active {
            transform: none
        }

        /* Back link */
        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: .82rem;
            font-weight: 600;
            color: var(--mt);
            text-decoration: none;
            margin-top: 4px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            font-family: var(--ff);
        }

        .back-link:hover {
            color: var(--bd)
        }

        /* Message */
        .msg {
            text-align: center;
            font-size: .85rem;
            font-weight: 600;
            margin-top: 14px;
            min-height: 18px;
            color: var(--red)
        }

        .msg.ok {
            color: #16a34a
        }

        /* Trust row */
        .trust {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--br)
        }

        .trust span {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: .76rem;
            color: var(--mt)
        }

        .trust span i {
            font-size: .82rem
        }

        /* Footer */
        .auth-foot {
            font-size: .8rem;
            color: var(--mt);
            text-align: center;
            margin-top: 18px
        }

        .auth-foot a {
            color: var(--pr);
            text-decoration: none;
            font-weight: 600
        }

        .auth-foot a:hover {
            text-decoration: underline
        }

        /* Terms */
        .terms-row {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            margin-top: 16px
        }

        .terms-row input[type=checkbox] {
            margin-top: 2px;
            accent-color: var(--pr);
            flex-shrink: 0
        }

        .terms-row label {
            font-size: .8rem;
            color: var(--mt);
            line-height: 1.5
        }

        .terms-row a {
            color: var(--pr);
            text-decoration: none;
            font-weight: 600
        }

        /* Loader */
        #ldr {
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, .84);
            backdrop-filter: blur(3px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .spin {
            width: 42px;
            height: 42px;
            border: 4px solid #eef0fe;
            border-top-color: var(--pr);
            border-radius: 50%;
            animation: spin 1s linear infinite
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        @keyframes shake {

            0%,
            100% {
                transform: none
            }

            20% {
                transform: translateX(-6px)
            }

            40% {
                transform: translateX(6px)
            }

            60% {
                transform: translateX(-4px)
            }

            80% {
                transform: translateX(4px)
            }
        }

        @media(max-width:500px) {
            main {
                padding: 20px 12px 40px
            }

            .card {
                padding: 28px 20px;
                border-radius: var(--r12)
            }

            .card-title {
                font-size: 1.3rem
            }

            .ob {
                height: 44px;
                font-size: 1.05rem
            }

            .otp-row {
                gap: 5px
            }
        }

        /* ===== DISCLAIMER BANNER ===== */
        .disc-bar {
            background: #ffffff;
            border-bottom: 2px solid #ffcc00;
            padding: 8px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-align: center;
            flex-wrap: wrap;
        }

        .disc-bar span {
            font-size: 14px;
            flex-shrink: 0;
        }

        .disc-bar p {
            margin: 0;
            font-size: 12px;
            color: #4e54cb;
            line-height: 1.5;
        }

        .disc-bar strong {
            color: #4e54cb;
            font-weight: 700;
        }

        @media (max-width: 500px) {
            .disc-bar {
                padding: 8px 14px;
            }

            .disc-bar p {
                font-size: 11px;
            }
        }

        /* ===== END DISCLAIMER BANNER ===== */