:root{
        --pay-bg-1: #0c0e16;
        --pay-bg-2: #141a2b;
        --pay-panel: #171d2c;
        --pay-panel-alt: #1b2233;
        --pay-border: rgba(255,255,255,.08);
        --pay-gold: var(--theme-accent-light);
        --pay-gold-soft: #e0a51e;
        --pay-text: #f4f6fb;
        --pay-text-dim: #93a0b8;
        --pay-danger: #ef5461;
        --pay-info: #5aa9e6;
        --pay-radius-lg: 22px;
        --pay-radius-md: 14px;
    }

    .pay-page{
        min-height: 100vh;
        background:
            radial-gradient(1200px 600px at 15% -10%, rgba(240,180,41,.08), transparent 55%),
            radial-gradient(900px 500px at 110% 10%, rgba(64,90,180,.14), transparent 60%),
            linear-gradient(180deg, var(--pay-bg-1), var(--pay-bg-2));
        color: var(--pay-text);
        padding: 0 max(0px, env(safe-area-inset-right)) 48px max(0px, env(safe-area-inset-left));
        font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
        overflow-x: hidden;
        border-radius: 28px;
        overflow: hidden;
    }

    .pay-topbar{
        display:flex;
        align-items:center;
        justify-content:center;
        padding: 16px clamp(16px, 4vw, 24px);
        max-width: 560px;
        margin: 0 auto;
    }
    .pay-back{
        width: 38px; height: 38px;
        display:flex; align-items:center; justify-content:center;
        border-radius: 999px;
        background: rgba(255,255,255,.05);
        border: 1px solid var(--pay-border);
        color: var(--pay-text);
        text-decoration:none;
        flex-shrink:0;
        transition: background .15s ease;
    }
    .pay-back:hover{ background: rgba(255,255,255,.1); }
    .pay-brand{
        display:flex;
        align-items:center;
        justify-content:center;
        text-decoration:none;
    }
    .pay-brand-mark{
        font-weight: 800;
        color: var(--pay-bg-1);
        background: var(--pay-gold);
        border-radius: 8px;
        padding: 2px 7px;
        font-size: .8rem;
        letter-spacing: .04em;
    }
    .pay-brand-name{ font-weight: 700; letter-spacing: .01em; }
    .pay-topbar-spacer{ flex: 1; }

    .pay-card{
        width: min(100%, 560px);
        margin: 0 auto;
        padding: 4px clamp(16px, 4vw, 24px) 0;
        background: var(--pay-panel);
        border: 1px solid var(--pay-border);
        border-radius: 28px;
        box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
        overflow: hidden;
    }

    .pay-card .pay-brand{
        margin: 18px auto 14px;
    }
    .pay-header{ text-align:center; padding: 6px 0 20px; }
    .pay-kicker{
        display:inline-flex; align-items:center; gap:8px;
        font-size: .72rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--pay-gold);
        background: rgba(240,180,41,.1);
        border: 1px solid rgba(240,180,41,.25);
        border-radius: 999px;
        padding: 6px 14px;
        margin-bottom: 14px;
    }
    .pay-header h1{
        font-size: clamp(1.5rem, 5vw, 1.9rem);
        font-weight: 800;
        margin: 0 0 4px;
        line-height: 1.2;
    }
    .pay-subtitle{ color: var(--pay-text-dim); margin: 0; font-size: .95rem; }

    .pay-stepper{
        display:flex;
        align-items:flex-start;
        justify-content: space-between;
        gap: 6px;
        padding: 4px 4px 26px;
    }
    .pay-step{
        flex:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:8px;
        text-align:center;
    }
    .pay-step-badge{
        width: 34px; height:34px;
        border-radius: 999px;
        display:flex; align-items:center; justify-content:center;
        font-weight:700;
        font-size:.9rem;
        background: rgba(255,255,255,.06);
        color: var(--pay-text-dim);
        border: 1px solid var(--pay-border);
    }
    .pay-step.is-done .pay-step-badge{
        background: rgba(60,190,120,.15);
        border-color: rgba(60,190,120,.4);
        color: #4ade80;
    }
    .pay-step.is-active .pay-step-badge{
        background: var(--pay-gold);
        border-color: var(--pay-gold);
        color: var(--pay-bg-1);
        box-shadow: 0 0 0 5px rgba(240,180,41,.15);
    }
    .pay-step-label{ font-size: .75rem; color: var(--pay-text-dim); }
    .pay-step.is-done .pay-step-label{ color: #4ade80; }
    .pay-step.is-active .pay-step-label{ color: var(--pay-gold); font-weight:700; }

    .pay-body{ display:flex; flex-direction:column; gap: 18px; }

    .pay-alert{ border-radius: var(--pay-radius-md); padding: 12px 16px; font-size:.9rem; }
    .pay-alert-danger{
        background: rgba(239,84,97,.12);
        border: 1px solid rgba(239,84,97,.35);
        color: #fda4ac;
    }
    .pay-alert-info{
        background: rgba(90,169,230,.12);
        border: 1px solid rgba(90,169,230,.35);
        color: #a9d2f2;
    }
    .pay-alert-warning{
        background: rgba(240,180,41,.12);
        border: 1px solid rgba(240,180,41,.35);
        color: #f4d791;
    }

    .pay-form{ display:grid; grid-template-columns:1fr; gap: 16px; }
    .pay-field{ display:flex; flex-direction:column; gap:6px; }
    .pay-label{
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing:.06em;
        color: var(--pay-text-dim);
        font-weight:700;
    }
    .pay-input-wrap{ position: relative; display:flex; align-items:center; }
    .pay-input-icon{
        position:absolute; left:16px;
        color: var(--pay-text-dim);
        font-size:.9rem;
        pointer-events:none;
    }
    .pay-select, .pay-control{
        width:100%;
        background: var(--pay-panel);
        border: 1px solid var(--pay-border);
        color: var(--pay-text);
        border-radius: var(--pay-radius-md);
        padding: 14px 16px 14px 44px;
        font-size: .95rem;
        appearance: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .pay-control-with-toggle{ padding-right: 46px; }
    .pay-select:focus, .pay-control:focus{
        outline: none;
        border-color: var(--pay-gold);
        box-shadow: 0 0 0 3px rgba(240,180,41,.18);
    }
    .pay-control::placeholder{ color: rgba(147,160,184,.6); }
    .pay-hint{ font-size: .72rem; color: var(--pay-text-dim); }

    .pay-toggle-pass{
        position:absolute; right:14px;
        background:none; border:none;
        color: var(--pay-text-dim);
        cursor:pointer;
        padding: 4px;
        font-size: .95rem;
        display:flex; align-items:center;
    }
    .pay-toggle-pass:hover{ color: var(--pay-gold); }

    .pay-submit{
        display:flex; align-items:center; justify-content:center; gap:10px;
        width:100%;
        background: linear-gradient(135deg, var(--pay-gold), var(--pay-gold-soft));
        color: var(--pay-bg-1);
        border:none;
        border-radius: var(--pay-radius-md);
        padding: 16px 18px;
        font-weight: 800;
        font-size: .98rem;
        cursor:pointer;
        margin-top: 4px;
        transition: transform .1s ease, box-shadow .15s ease;
        box-shadow: 0 10px 24px -8px rgba(240,180,41,.5);
    }
    .pay-submit:hover{ transform: translateY(-1px); }
    .pay-submit:active{ transform: translateY(0); }

    .pay-divider{
        height:1px;
        background: var(--pay-border);
        margin: 4px 0;
    }

    .pay-login-note{
        text-align:center;
        color: var(--pay-text-dim);
        font-size: .85rem;
        padding-bottom: 8px;
    }
    .pay-login-link{
        color: var(--pay-gold);
        font-weight:700;
        text-decoration:none;
        margin-left: 4px;
    }
    .pay-login-link:hover{ text-decoration:underline; }

    @media (max-width: 375px){
        .pay-page{ padding-bottom: 28px; }
        .pay-topbar{ padding-inline: 12px; }
        .pay-card{ padding-inline: 12px; }
        .pay-kicker{ font-size: .66rem; padding-inline: 10px; }
        .pay-step-label{ font-size: .68rem; }
        .pay-alert{ padding: 11px 12px; font-size: .84rem; }
        .pay-submit{ font-size: .9rem; padding-inline: 12px; }
    }

    /* ---------- Tablet ---------- */
    @media (min-width: 640px){
        .pay-card{
            padding: 20px 32px 12px;
            margin-top: 10px;
        }
    }

    /* ---------- Desktop ---------- */
    @media (min-width: 992px){
        .pay-page{ padding-top: 40px; }
        .pay-topbar{ max-width: 560px; }
        .pay-card{ max-width: 560px; padding: 24px 40px 8px; }
        .pay-header h1{ font-size: 2.1rem; }
        .pay-submit{ padding: 17px 18px; }
    }

    @media (prefers-reduced-motion: reduce){
        .pay-submit, .pay-back, .pay-toggle-pass{ transition:none; }
    }