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

                :root {
                    --bg: #0f1117;
                    --surface: #181c27;
                    --surface2: #1e2333;
                    --border: #2a2f42;
                    --blue: #38bdf8;
                    --blue-glow: rgba(56, 189, 248, 0.15);
                    --amber: #f59e0b;
                    --amber-bg: rgba(245, 158, 11, 0.10);
                    --amber-bord: rgba(245, 158, 11, 0.28);
                    --text: #e8eaf0;
                    --text2: #7c8299;
                    --text3: #3e4460;
                    --success: #22c55e;
                    --danger: #ef4444;
                    --r: 12px;
                    --rl: 16px;
                }

                body {
                    font-family: 'Inter', sans-serif;
                    background: var(--bg);
                    color: var(--text);
                    min-height: 100vh;
                    display: flex;
                    justify-content: center;
                    padding: 32px 16px 64px;
                }

                .wrap {
                    width: 100%;
                    /* max-width: 480px; */
                }

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

                .lbl {
                    display: block;
                    font-size: 10px;
                    font-weight: 700;
                    letter-spacing: 0.14em;
                    text-transform: uppercase;
                    color: var(--text2);
                    margin-bottom: 12px;
                }

                /* ─── 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: var(--surface);
                    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 .18s, background .18s, color .18s;
                    outline: none;
                }

                .mbtn:hover {
                    border-color: rgba(56, 189, 248, .4);
                    color: var(--text);
                }

                .mbtn.active {
                    border-color: var(--blue);
                    background: rgba(56, 189, 248, .06);
                    color: var(--blue);
                    box-shadow: 0 0 0 3px 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;
                }

                .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;
                }

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

                .citem {
                    display: block;
                    width: 100%;
                    padding: 15px 16px;
                    background: var(--surface);
                    border: 1.5px solid var(--border);
                    border-radius: var(--rl);
                    cursor: pointer;
                    transition: border-color .18s, background .18s;
                    text-align: left;
                    outline: none;
                }

                .citem:hover {
                    border-color: rgba(56, 189, 248, .4);
                }

                .citem.active {
                    border-color: var(--blue);
                    background: rgba(56, 189, 248, .04);
                    box-shadow: 0 0 0 3px var(--blue-glow);
                }

                /* 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);
                }

                .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 .15s, color .15s;
                    outline: none;
                }

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

                /* ─── 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(56, 189, 248, .45);
                    background: rgba(56, 189, 248, .03);
                }

                .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(56, 189, 248, .12);
                    border: 1px solid rgba(56, 189, 248, .25);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 11px;
                    font-weight: 700;
                    color: var(--blue);
                    flex-shrink: 0;
                }

                .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: var(--blue);
                    border: none;
                    border-radius: var(--r);
                    font-family: 'Inter', sans-serif;
                    font-size: 15px;
                    font-weight: 700;
                    color: #0a0e18;
                    cursor: pointer;
                    transition: opacity .15s, transform .1s;
                    outline: none;
                }

                .sbtn:hover {
                    opacity: .9;
                }

                .sbtn:active {
                    transform: scale(.99);
                }

                /* ─── toast ─── */
                .toast {
                    position: fixed;
                    bottom: 28px;
                    left: 50%;
                    transform: translateX(-50%) translateY(70px);
                    background: var(--surface2);
                    border: 1px solid var(--border);
                    color: var(--text);
                    padding: 10px 22px;
                    border-radius: 100px;
                    font-size: 13px;
                    font-weight: 500;
                    white-space: nowrap;
                    transition: transform .25s ease;
                    z-index: 99;
                }

                .toast.show {
                    transform: translateX(-50%) translateY(0);
                }