@keyframes tp-page-in {
                    from {
                        opacity: 0;
                        transform: translateY(18px) scale(0.98);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0) scale(1);
                    }
                }

                @keyframes tp-line-flow {
                    0% {
                        background-position: 0% 50%;
                    }
                    100% {
                        background-position: 200% 50%;
                    }
                }

                @keyframes tp-glow-pulse {
                    0%, 100% {
                        box-shadow: 0 0 8px rgba(34, 211, 238, 0.28), inset 0 0 12px rgba(34, 211, 238, 0.07);
                    }
                    50% {
                        box-shadow: 0 0 22px rgba(34, 211, 238, 0.48), inset 0 0 20px rgba(129, 140, 248, 0.1);
                    }
                }

                @keyframes tp-panel-in {
                    from {
                        opacity: 0;
                        transform: translateY(12px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }

                @keyframes tp-tick-pop {
                    0% {
                        transform: scale(0);
                    }
                    70% {
                        transform: scale(1.15);
                    }
                    100% {
                        transform: scale(1);
                    }
                }

                .topup-page {
                    --bg: #0a0b10;
                    --surface: #12151f;
                    --surface2: #181d2e;
                    --border: #2a3148;
                    --blue: #22d3ee;
                    --blue-dim: #0891b2;
                    --blue-glow: rgba(34, 211, 238, 0.18);
                    --violet: #a78bfa;
                    --violet-glow: rgba(167, 139, 250, 0.2);
                    --amber: #fbbf24;
                    --amber-bg: rgba(251, 191, 36, 0.08);
                    --amber-bord: rgba(251, 191, 36, 0.32);
                    --text: #f1f5f9;
                    --text2: #94a3b8;
                    --text3: #64748b;
                    --success: #34d399;
                    --danger: #f87171;
                    --r: 12px;
                    --rl: 14px;
                    position: relative;
                    width: 100%;
                    max-width: 100%;
                    box-sizing: border-box;
                    margin: 8px 0 0;
                    padding: 20px 16px 12px;
                    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
                    color: var(--text);
                    isolation: isolate;
                    overflow: hidden;
                    border-radius: 16px;
                    border: 1px solid rgba(99, 102, 241, 0.22);
                    background:
                        radial-gradient(120% 80% at 10% -20%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
                        radial-gradient(100% 60% at 100% 0%, rgba(34, 211, 238, 0.12) 0%, transparent 45%),
                        linear-gradient(175deg, #141824 0%, #0c0e14 48%, #0a0b0f 100%);
                    box-shadow:
                        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
                        0 24px 48px -18px rgba(0, 0, 0, 0.65),
                        0 0 40px -12px rgba(34, 211, 238, 0.08);
                    animation: tp-page-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
                }

                .topup-page::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    height: 3px;
                    background: linear-gradient(90deg, #6366f1, #22d3ee, #c084fc, #22d3ee, #6366f1);
                    background-size: 200% 100%;
                    animation: tp-line-flow 5s linear infinite;
                    pointer-events: none;
                    z-index: 2;
                }

                .topup-page::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);
                    background-size: 22px 22px;
                    opacity: 0.5;
                    pointer-events: none;
                    z-index: 0;
                }

                .wrap {
                    position: relative;
                    z-index: 1;
                    width: 100%;
                    max-width: 100%;
                    min-width: 0;
                }

                /* ─── section ─── */
                .sec {
                    margin-bottom: 26px;
                }

                .lbl {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-size: 10px;
                    font-weight: 800;
                    letter-spacing: 0.18em;
                    text-transform: uppercase;
                    color: #7dd3fc;
                    text-shadow: 0 0 24px rgba(34, 211, 238, 0.35);
                    margin-bottom: 12px;
                }

                .lbl::before {
                    content: '';
                    flex: 0 0 8px;
                    height: 8px;
                    border-radius: 2px;
                    background: linear-gradient(135deg, var(--blue), var(--violet));
                    box-shadow: 0 0 12px rgba(34, 211, 238, 0.55);
                }

                .lbl::after {
                    content: '';
                    flex: 1;
                    height: 1px;
                    background: linear-gradient(90deg, rgba(34, 211, 238, 0.45), transparent);
                    opacity: 0.7;
                }

                /* ─── method buttons ─── */
                .methods {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 8px;
                }

                .mbtn {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 7px;
                    padding: 11px 4px 9px;
                    background: linear-gradient(165deg, var(--surface) 0%, rgba(24, 29, 46, 0.92) 100%);
                    border: 1.5px solid var(--border);
                    border-radius: var(--r);
                    color: var(--text2);
                    font-family: 'Inter', sans-serif;
                    font-size: 10px;
                    font-weight: 700;
                    letter-spacing: 0.05em;
                    text-transform: uppercase;
                    cursor: pointer;
                    transition:
                        border-color 0.22s ease,
                        background 0.22s ease,
                        color 0.22s ease,
                        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.22s ease;
                    outline: none;
                }

                .mbtn:hover {
                    border-color: rgba(34, 211, 238, 0.45);
                    color: var(--text);
                    transform: translateY(-2px);
                    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
                }

                .mbtn.active {
                    border-color: var(--blue);
                    background: linear-gradient(165deg, rgba(34, 211, 238, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
                    color: var(--blue);
                    box-shadow:
                        0 0 0 1px rgba(34, 211, 238, 0.35),
                        0 0 20px rgba(34, 211, 238, 0.2);
                    animation: tp-glow-pulse 2.4s ease-in-out infinite;
                }

                .mbtn.active .micon {
                    box-shadow: 0 0 14px var(--blue-glow);
                }

                .mbtn .tick {
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    width: 17px;
                    height: 17px;
                    border-radius: 50%;
                    background: var(--blue);
                    display: none;
                    align-items: center;
                    justify-content: center;
                }

                .mbtn.active .tick {
                    display: flex;
                    animation: tp-tick-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
                }

                .mbtn .tick svg {
                    width: 9px;
                    height: 9px;
                    stroke: #fff;
                    stroke-width: 2.5;
                    fill: none;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                }

                .micon {
                    width: 46px;
                    height: 30px;
                    border-radius: 6px;
                    background: var(--surface2);
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 17px;
                }

                .micon img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }

                /* ─── panels ─── */
                .panel {
                    display: none;
                }

                .panel.on {
                    display: block;
                    animation: tp-panel-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
                }

                /* ─── card list ─── */
                .card-list {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                }

                .citem {
                    display: block;
                    width: 100%;
                    padding: 15px 16px;
                    background: linear-gradient(165deg, var(--surface) 0%, rgba(24, 29, 46, 0.85) 100%);
                    border: 1.5px solid var(--border);
                    border-radius: var(--rl);
                    cursor: pointer;
                    transition:
                        border-color 0.22s ease,
                        background 0.22s ease,
                        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.22s ease;
                    text-align: left;
                    outline: none;
                }

                .citem:hover {
                    border-color: rgba(34, 211, 238, 0.42);
                    transform: translateY(-2px);
                    box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.55);
                }

                .citem.active {
                    border-color: var(--blue);
                    background: linear-gradient(165deg, rgba(34, 211, 238, 0.1) 0%, rgba(167, 139, 250, 0.06) 100%);
                    box-shadow:
                        0 0 0 1px rgba(34, 211, 238, 0.35),
                        0 12px 32px -16px rgba(34, 211, 238, 0.15);
                }

                /* row inside card */
                .crow {
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;
                    gap: 12px;
                }

                .cinfo {
                    flex: 1;
                    min-width: 0;
                }

                .clbl {
                    font-size: 9px;
                    font-weight: 700;
                    letter-spacing: 0.12em;
                    text-transform: uppercase;
                    color: var(--text3);
                    margin-bottom: 4px;
                    display: block;
                }

                .cnum {
                    font-family: 'JetBrains Mono', monospace;
                    font-size: 16px;
                    font-weight: 500;
                    color: var(--text);
                    letter-spacing: 0.06em;
                    display: block;
                    margin-bottom: 11px;
                    white-space: nowrap;
                }

                .cholder {
                    font-size: 12px;
                    font-weight: 600;
                    color: var(--text);
                    text-transform: uppercase;
                    letter-spacing: 0.04em;
                    display: block;
                }

                /* right side: check + copy */
                .cright {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 8px;
                    flex-shrink: 0;
                    padding-top: 2px;
                }

                .cdot {
                    width: 22px;
                    height: 22px;
                    border-radius: 50%;
                    border: 1.5px solid var(--border);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: background .15s, border-color .15s;
                    flex-shrink: 0;
                }

                .citem.active .cdot {
                    background: var(--blue);
                    border-color: var(--blue);
                }

                .cdot svg {
                    width: 11px;
                    height: 11px;
                    stroke: transparent;
                    stroke-width: 2.5;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                    fill: none;
                    transition: stroke .15s;
                }

                .citem.active .cdot svg {
                    stroke: #0a0e18;
                }

                .cpbtn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 28px;
                    height: 28px;
                    border: 1px solid var(--border);
                    border-radius: 7px;
                    background: var(--surface2);
                    color: var(--text2);
                    cursor: pointer;
                    transition: border-color .15s, color .15s;
                    flex-shrink: 0;
                    padding: 0;
                }

                .cpbtn:hover {
                    border-color: var(--blue);
                    color: var(--blue);
                }

                .cpbtn.ok {
                    border-color: var(--success);
                    color: var(--success);
                }

                .cpbtn svg {
                    width: 13px;
                    height: 13px;
                    stroke: currentColor;
                    stroke-width: 2;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                    fill: none;
                }

                /* ─── warning ─── */
                .warn {
                    display: flex;
                    align-items: flex-start;
                    gap: 11px;
                    padding: 13px 15px;
                    background: var(--amber-bg);
                    border: 1px solid var(--amber-bord);
                    border-radius: var(--r);
                }

                .wicon {
                    flex-shrink: 0;
                    padding-top: 1px;
                }

                .wicon svg {
                    width: 16px;
                    height: 16px;
                    stroke: var(--amber);
                    stroke-width: 2;
                    fill: none;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                }

                .warn p {
                    font-size: 13px;
                    color: var(--amber);
                    line-height: 1.55;
                    font-weight: 500;
                }

                /* ─── amount ─── */
                .ainput {
                    display: block;
                    width: 100%;
                    padding: 13px 16px;
                    background: var(--surface);
                    border: 1.5px solid var(--border);
                    border-radius: var(--r);
                    font-family: 'JetBrains Mono', monospace;
                    font-size: 16px;
                    color: var(--text);
                    outline: none;
                    transition: border-color .15s;
                    -moz-appearance: textfield;
                }

                .ainput::-webkit-outer-spin-button,
                .ainput::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }

                .ainput::placeholder {
                    color: var(--text3);
                }

                .ainput:focus {
                    border-color: var(--blue);
                    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12), 0 0 20px rgba(34, 211, 238, 0.08);
                }

                .ainput.err {
                    border-color: var(--danger);
                }

                .qrow {
                    display: flex;
                    gap: 8px;
                    margin-top: 10px;
                    flex-wrap: wrap;
                }

                .qbtn {
                    padding: 7px 16px;
                    background: var(--surface);
                    border: 1.5px solid var(--border);
                    border-radius: 100px;
                    font-family: 'Inter', sans-serif;
                    font-size: 12px;
                    font-weight: 600;
                    color: var(--text2);
                    cursor: pointer;
                    transition:
                        border-color 0.18s ease,
                        color 0.18s ease,
                        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.18s ease;
                    outline: none;
                }

                .qbtn:hover {
                    border-color: var(--blue);
                    color: var(--blue);
                    transform: translateY(-1px);
                    box-shadow: 0 6px 16px -8px rgba(34, 211, 238, 0.35);
                }

                /* ─── dropzone ─── */
                .dz {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 28px 16px;
                    border: 1.5px dashed var(--border);
                    border-radius: var(--rl);
                    background: var(--surface);
                    text-align: center;
                    cursor: pointer;
                    transition: border-color .18s, background .18s;
                }

                .dz:hover {
                    border-color: rgba(34, 211, 238, 0.45);
                    background: rgba(34, 211, 238, 0.04);
                }

                .dz.ok {
                    border-color: var(--success);
                    border-style: solid;
                    background: rgba(34, 197, 94, .05);
                }

                .dz input {
                    display: none;
                }

                .dzico {
                    margin-bottom: 10px;
                }

                .dzico svg {
                    width: 26px;
                    height: 26px;
                    stroke: var(--text3);
                    stroke-width: 2;
                    fill: none;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                }

                .dz.ok .dzico svg {
                    stroke: var(--success);
                }

                .dztitle {
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--text2);
                    margin-bottom: 4px;
                }

                .dz.ok .dztitle {
                    color: var(--success);
                }

                .dzhint {
                    font-size: 12px;
                    color: var(--text3);
                }

                /* ─── steps (bankomat) ─── */
                .slist {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    margin-top: 14px;
                }

                .step {
                    display: flex;
                    align-items: flex-start;
                    gap: 12px;
                    padding: 13px 15px;
                    background: var(--surface);
                    border: 1.5px solid var(--border);
                    border-radius: var(--r);
                }

                .snum {
                    width: 26px;
                    height: 26px;
                    border-radius: 50%;
                    background: rgba(34, 211, 238, 0.12);
                    border: 1px solid rgba(34, 211, 238, 0.28);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 11px;
                    font-weight: 700;
                    color: var(--blue);
                    flex-shrink: 0;
                    box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
                }

                .step p {
                    font-size: 13px;
                    color: var(--text2);
                    line-height: 1.6;
                }

                .step strong {
                    color: var(--text);
                    font-weight: 600;
                }

                /* ─── info card ─── */
                .icard {
                    padding: 15px 16px;
                    background: var(--surface);
                    border: 1.5px solid var(--border);
                    border-radius: var(--r);
                    margin-bottom: 10px;
                }

                .icard h3 {
                    font-size: 14px;
                    font-weight: 600;
                    color: var(--text);
                    margin-bottom: 6px;
                }

                .icard p {
                    font-size: 13px;
                    color: var(--text2);
                    line-height: 1.6;
                }

                /* ─── mir note ─── */
                .mnote {
                    padding: 14px 16px;
                    background: var(--surface);
                    border: 1.5px solid var(--border);
                    border-radius: var(--r);
                    font-size: 13px;
                    color: var(--text2);
                    line-height: 1.65;
                }

                .mnote span {
                    color: var(--blue);
                    font-weight: 600;
                }

                /* ─── submit ─── */
                .sbtn {
                    display: block;
                    width: 100%;
                    padding: 14px;
                    background: linear-gradient(135deg, #22d3ee 0%, #818cf8 55%, #c084fc 100%);
                    background-size: 160% 100%;
                    border: none;
                    border-radius: var(--r);
                    font-family: 'Inter', sans-serif;
                    font-size: 15px;
                    font-weight: 800;
                    letter-spacing: 0.02em;
                    color: #0a0b10;
                    cursor: pointer;
                    transition:
                        filter 0.2s ease,
                        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.2s ease,
                        background-position 0.35s ease;
                    box-shadow:
                        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
                        0 10px 28px -8px rgba(34, 211, 238, 0.45);
                    outline: none;
                }

                .sbtn:hover {
                    filter: brightness(1.08) saturate(1.05);
                    transform: translateY(-2px);
                    background-position: 100% center;
                    box-shadow:
                        0 0 0 1px rgba(255, 255, 255, 0.18) inset,
                        0 14px 36px -6px rgba(129, 140, 248, 0.5);
                }

                .sbtn:active {
                    transform: translateY(0) scale(0.99);
                }

                @media (max-width: 520px) {
                    .methods {
                        grid-template-columns: repeat(2, minmax(0, 1fr));
                    }
                }

                @media (prefers-reduced-motion: reduce) {
                    .topup-page,
                    .topup-page::before,
                    .mbtn.active,
                    .panel.on,
                    .mbtn.active .tick {
                        animation: none !important;
                    }

                    .mbtn,
                    .citem,
                    .sbtn,
                    .qbtn,
                    .toast,
                    .ainput {
                        transition-duration: 0.01ms !important;
                    }
                }