:root{
    --brand:#6255f6;
    --brand-2:#8f7dff;
    --accent:#19c79c;
    --danger:#f05470;
    --warning:#ffb020;
    --bg:#f5f7fb;
    --surface:rgba(255,255,255,.82);
    --surface-solid:#fff;
    --surface-soft:#eef0f7;
    --ink:#17192a;
    --muted:#6d7287;
    --line:rgba(98,85,246,.12);
    --shadow:0 22px 60px rgba(36,39,73,.16);
    --shadow-soft:0 10px 26px rgba(36,39,73,.08);
    --radius:22px;
    --success:#13a979;
}

@media (prefers-color-scheme: dark){
    :root{
        --bg:#10121c;
        --surface:rgba(27,30,45,.82);
        --surface-solid:#1b1e2d;
        --surface-soft:#232738;
        --ink:#f6f7fb;
        --muted:#a0a6bb;
        --line:rgba(255,255,255,.08);
        --shadow:0 22px 60px rgba(0,0,0,.4);
        --shadow-soft:0 10px 26px rgba(0,0,0,.22);
    }
}

:root[data-theme="light"]{
    --bg:#f5f7fb;
    --surface:rgba(255,255,255,.82);
    --surface-solid:#fff;
    --surface-soft:#eef0f7;
    --ink:#17192a;
    --muted:#6d7287;
    --line:rgba(98,85,246,.12);
    --shadow:0 22px 60px rgba(36,39,73,.16);
    --shadow-soft:0 10px 26px rgba(36,39,73,.08);
}

:root[data-theme="dark"]{
    --bg:#10121c;
    --surface:rgba(27,30,45,.82);
    --surface-solid:#1b1e2d;
    --surface-soft:#232738;
    --ink:#f6f7fb;
    --muted:#a0a6bb;
    --line:rgba(255,255,255,.08);
    --shadow:0 22px 60px rgba(0,0,0,.4);
    --shadow-soft:0 10px 26px rgba(0,0,0,.22);
}

*{
    box-sizing:border-box
}
html,body{
    margin:0;
    min-height:100%;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:transparent;
    color:var(--ink)
}
button,input,select{
    font:inherit
}
button{
    cursor:pointer
}
body{
    display:grid;
    place-items:center;
    padding:10px;
    overflow:hidden
}

.shell{
    width:min(100%,470px);
    height:min(860px,calc(100vh - 20px));
    min-height:640px;
    border-radius:28px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    background:
        radial-gradient(circle at 10% 0%,rgba(98,85,246,.20),transparent 28%),
        radial-gradient(circle at 96% 16%,rgba(25,199,156,.14),transparent 28%),
        var(--bg);
    position:relative;
    display:flex;
    flex-direction:column;
    isolation:isolate;
}

.ambient{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1
}
.orb{
    position:absolute;
    border-radius:50%;
    filter:blur(12px);
    opacity:.45;
    animation:float 10s ease-in-out infinite
}
.orb.one{
    width:160px;
    height:160px;
    background:rgba(98,85,246,.22);
    right:-45px;
    top:115px
}
.orb.two{
    width:120px;
    height:120px;
    background:rgba(25,199,156,.18);
    left:-30px;
    bottom:130px;
    animation-delay:-4s
}
@keyframes float{
    0%,100%{
        transform:translateY(0) translateX(0)
    }
    50%{
        transform:translateY(-18px) translateX(10px)
    }
}

.topbar{
    min-height:74px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(135deg,rgba(28,23,72,.96),rgba(98,85,246,.96) 58%,rgba(143,125,255,.94));
    color:#fff;
    backdrop-filter:blur(22px);
    position:relative;
    z-index:10
}

.brand{
    display:flex;
    align-items:center;
    gap:11px
}
.brand-mark{
    width:41px;
    height:41px;
    border-radius:14px;
    background:linear-gradient(145deg,#fff,#c9c3ff);
    color:var(--brand);
    display:grid;
    place-items:center;
    font-weight:900;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)
}
.brand-copy strong{
    display:block;
    font-size:15px
}
.brand-copy span{
    display:block;
    font-size:10px;
    opacity:.74;
    margin-top:2px
}
.top-actions{
    display:flex;
    gap:8px
}
.icon-btn{
    width:38px;
    height:38px;
    border:0;
    border-radius:12px;
    background:rgba(255,255,255,.13);
    color:#fff;
    display:grid;
    place-items:center
}

.content{
    flex:1;
    overflow:auto;
    padding:15px 15px 96px;
    scroll-behavior:smooth;
    scrollbar-width:none
}
.content::-webkit-scrollbar{
    display:none
}

.screen{
    display:none;
    animation:screenIn .34s cubic-bezier(.2,.8,.2,1)
}
.screen.active{
    display:block
}
@keyframes screenIn{
    from{
        opacity:0;
        transform:translateX(12px) scale(.985)
    }
    to{
        opacity:1;
        transform:none
    }
}

.glass{
    background:var(--surface);
    backdrop-filter:blur(22px);
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
    border-radius:var(--radius)
}

.hero{
    padding:20px;
    border-radius:24px;
    color:#fff;
    background:linear-gradient(135deg,#23204d 0%,var(--brand) 60%,var(--brand-2));
    box-shadow:0 18px 38px rgba(98,85,246,.28);
    margin-bottom:14px;
    position:relative;
    overflow:hidden
}
.hero:before,.hero:after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.10)
}
.hero:before{
    width:150px;
    height:150px;
    right:-55px;
    top:-60px
}
.hero:after{
    width:80px;
    height:80px;
    left:-20px;
    bottom:-34px
}
.eyebrow{
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.72
}
.hero h1{
    font-size:23px;
    line-height:1.15;
    margin:8px 0 7px
}
.hero p{
    font-size:12px;
    line-height:1.55;
    margin:0;
    opacity:.84
}

.intro-hero{
    padding:22px;
    border-radius:26px;
    color:#fff;
    background:
        linear-gradient(135deg,rgba(20,23,44,.96),rgba(36,31,91,.96) 48%,rgba(18,151,128,.92)),
        repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 1px,transparent 1px 18px);
    box-shadow:0 20px 42px rgba(28,31,68,.25);
    margin-bottom:13px;
    position:relative;
    overflow:hidden
}
.intro-hero:after{
    content:"";
    position:absolute;
    right:-70px;
    top:-58px;
    width:190px;
    height:190px;
    border:30px solid rgba(255,255,255,.08);
    border-radius:50%;
    pointer-events:none
}
.intro-status-row{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:26px
}
.intro-status-pill,
.intro-live-pill{
    min-height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:0 11px;
    font-size:10px;
    font-weight:900;
    letter-spacing:0;
    border:1px solid rgba(255,255,255,.20);
    background:rgba(255,255,255,.12);
    color:#fff
}
.intro-live-pill{
    min-width:48px;
    color:#17192a;
    background:#fff
}
.intro-hero h1{
    position:relative;
    z-index:1;
    max-width:340px;
    margin:0 0 10px;
    font-size:29px;
    line-height:1.05
}
.intro-hero p{
    position:relative;
    z-index:1;
    max-width:390px;
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:12px;
    line-height:1.6
}
.intro-system-panel{
    position:relative;
    z-index:1;
    margin-top:20px;
    padding:12px;
    border-radius:18px;
    display:grid;
    grid-template-columns:minmax(118px,.65fr) 1fr;
    gap:12px;
    align-items:center;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(14px)
}
.intro-system-panel small,
.intro-system-panel span{
    display:block;
    color:rgba(255,255,255,.74);
    font-size:10px;
    line-height:1.45
}
.intro-system-panel strong{
    display:block;
    margin-top:3px;
    color:#fff;
    font-size:15px
}
.intro-metrics{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:13px
}
.intro-metric{
    min-height:124px;
    padding:12px;
    border-radius:18px;
    border:1px solid var(--line);
    background:var(--surface);
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(18px);
    display:flex;
    flex-direction:column
}
.intro-metric span{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(98,85,246,.12);
    color:var(--brand);
    font-size:10px;
    font-weight:900
}
.intro-metric.accent span{
    background:rgba(25,199,156,.14);
    color:var(--success)
}
.intro-metric.warm span{
    background:rgba(255,176,32,.16);
    color:#9b6a00
}
.intro-metric strong{
    display:block;
    margin-top:11px;
    font-size:13px
}
.intro-metric small{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:9px;
    line-height:1.45
}
.intro-flow-card{
    margin-bottom:12px
}
.intro-flow{
    display:grid;
    gap:11px
}
.intro-flow-step{
    display:grid;
    grid-template-columns:34px 1fr;
    gap:11px;
    align-items:start
}
.intro-flow-index{
    width:30px;
    height:30px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:#fff;
    font-size:11px;
    font-weight:900;
    box-shadow:0 8px 18px rgba(98,85,246,.22)
}
.intro-flow-step strong{
    display:block;
    font-size:12px
}
.intro-flow-step span{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:10px;
    line-height:1.5
}
.intro-access-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 13px;
    border-radius:18px;
    background:rgba(25,199,156,.10);
    border:1px solid rgba(25,199,156,.20);
    color:var(--ink)
}
.intro-access-note:before{
    content:"";
    flex:0 0 10px;
    width:10px;
    height:10px;
    border-radius:50%;
    margin-top:4px;
    background:var(--success);
    box-shadow:0 0 0 5px rgba(25,199,156,.13)
}
.intro-access-note strong{
    display:block;
    font-size:12px
}
.intro-access-note span{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:10px;
    line-height:1.5
}

.card{
    padding:15px;
    margin-bottom:12px
}
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px
}
.section-head h2{
    font-size:15px;
    margin:0
}
.section-head span{
    font-size:10px;
    color:var(--muted)
}
.text-btn{
    border:0;
    background:none;
    color:var(--brand);
    font-weight:800;
    font-size:11px;
    padding:4px
}

.switcher{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--surface-soft);
    padding:4px;
    border-radius:14px;
    margin-bottom:14px
}
.switcher button{
    height:38px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:var(--muted);
    font-weight:800
}
.switcher button.active{
    background:var(--surface-solid);
    color:var(--brand);
    box-shadow:0 4px 12px rgba(36,39,73,.08)
}

.field{
    position:relative;
    margin-bottom:13px
}
.field input,.field select{
    width:100%;
    height:50px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface-solid);
    color:var(--ink);
    padding:18px 13px 6px;
    outline:none;
    transition:.22s
}
.field input::placeholder{
    color:transparent
}
.field input:focus::placeholder{
    color:var(--muted)
}
.field select{
    padding-top:10px
}
.field label{
    position:absolute;
    left:13px;
    top:16px;
    color:var(--muted);
    font-size:12px;
    pointer-events:none;
    transition:.18s;
    background:transparent
}
.field input:focus,.field input:not(:placeholder-shown){
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(98,85,246,.10)
}
.field input:focus+label,.field input:not(:placeholder-shown)+label{
    top:6px;
    font-size:9px;
    color:var(--brand);
    font-weight:800
}
.field input.invalid{
    border-color:var(--danger)
}
.field-error{
    display:none;
    color:var(--danger);
    font-size:9px;
    font-weight:700;
    margin-top:4px
}
.field input.invalid ~ .field-error{
    display:block
}
.field.tel-field .iti{
    width:100%;
    display:block;
    --iti-border-color:var(--line);
    --iti-dialcode-color:var(--muted);
    --iti-dropdown-bg:var(--surface-solid);
    --iti-hover-color:var(--surface-soft);
    --iti-path-flags-1x:url("https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/img/flags.webp");
    --iti-path-flags-2x:url("https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/img/flags@2x.webp");
    --iti-path-globe-1x:url("https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/img/globe.webp");
    --iti-path-globe-2x:url("https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/img/globe@2x.webp")
}
.field.tel-field .iti input{
    padding-left:112px !important;
    padding-top:18px;
    padding-bottom:6px
}
.field.tel-field .iti:focus-within input{
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(98,85,246,.10)
}
.field.tel-field label{
    left:112px;
    top:6px;
    font-size:9px;
    color:var(--brand);
    font-weight:800;
    z-index:2
}
.field.tel-field .iti__country-container{
    height:50px
}
.field.tel-field .iti__selected-country{
    min-width:98px;
    height:50px;
    padding:0 11px;
    border-right:1px solid var(--line);
    border-radius:14px 0 0 14px;
    color:var(--ink);
    background:rgba(98,85,246,.035)
}
.field.tel-field .iti__selected-country:hover,
.field.tel-field .iti__selected-country:focus-visible{
    background:var(--surface-soft)
}
.field.tel-field .iti__selected-dial-code{
    color:var(--ink);
    font-size:12px;
    font-weight:800
}
.field.tel-field .iti__arrow{
    border-top-color:var(--muted)
}
.iti__dropdown-content{
    max-width:min(430px,calc(100vw - 28px));
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface-solid);
    color:var(--ink);
    box-shadow:var(--shadow-soft);
    overflow:hidden
}
.iti__search-input{
    border:0;
    border-bottom:1px solid var(--line);
    background:var(--surface-solid);
    color:var(--ink);
    outline:none
}
.iti__country{
    color:var(--ink)
}
.iti__country.iti__highlight{
    background:var(--surface-soft)
}
.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}

.btn{
    width:100%;
    height:48px;
    border:0;
    border-radius:14px;
    font-weight:850;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:.22s;
    position:relative;
    overflow:hidden
}
.btn:active{
    transform:scale(.985)
}
.btn:disabled{
    opacity:.62;
    cursor:not-allowed;
    box-shadow:none
}
.btn-primary{
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:#fff;
    box-shadow:0 12px 24px rgba(98,85,246,.24)
}
.btn-soft{
    background:rgba(98,85,246,.11);
    color:var(--brand)
}
.btn-danger{
    background:rgba(240,84,112,.12);
    color:var(--danger)
}
.btn::after{
    content:"";
    position:absolute;
    inset:auto;
    left:50%;
    top:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    transform:translate(-50%,-50%);
    transition:.35s
}
.btn:active::after{
    width:180px;
    height:180px
}

.fine{
    text-align:center;
    font-size:9px;
    line-height:1.45;
    color:var(--muted);
    margin:10px 5px 0
}
.notice{
    padding:11px 12px;
    border-radius:14px;
    font-size:10px;
    line-height:1.5;
    background:rgba(255,176,32,.12);
    color:#8d6500;
    border:1px solid rgba(255,176,32,.22);
    margin-bottom:12px
}
.kyc-status-panel{
    margin:12px 0;
    display:block
}
.kyc-status-panel strong{
    display:block;
    font-size:12px;
    margin-bottom:4px;
    color:var(--ink)
}
.kyc-status-panel span{
    display:block;
    font-size:10px;
    line-height:1.5;
    color:var(--muted)
}

#otpScreen{
    min-height:100%;
    display:none;
    align-items:center;
    justify-content:center;
    padding:4px 0 12px;
}
#otpScreen.active{
    display:flex
}
#otpScreen > .card{
    width:100%;
    max-width:100%;
    margin:auto 0;
    padding:16px;
}
.otp-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin:14px 0;
    width:100%;
}
.otp{
    width:100%;
    min-width:0;
    height:54px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface-solid);
    text-align:center;
    font-size:20px;
    font-weight:900;
    color:var(--ink);
    outline:none;
    padding:0;
}
.otp:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(98,85,246,.10)
}

.profile-strip{
    padding:11px;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px
}
.avatar{
    width:40px;
    height:40px;
    border-radius:13px;
    background:rgba(98,85,246,.12);
    color:var(--brand);
    display:grid;
    place-items:center;
    font-weight:900
}
.profile-strip strong{
    display:block;
    font-size:13px
}
.profile-strip small{
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-top:2px
}
.verified{
    margin-left:auto;
    font-size:9px;
    font-weight:900;
    padding:5px 8px;
    border-radius:99px;
    background:rgba(25,199,156,.12);
    color:var(--success)
}
.verified.unverified{
    background:rgba(255,176,32,.14);
    color:#9b6a00
}

.stats{
    display:grid;
    grid-template-columns:1.35fr .85fr .85fr;
    gap:9px;
    margin-bottom:12px
}
.stat{
    padding:13px;
    border-radius:17px;
    background:var(--surface);
    border:1px solid var(--line);
    backdrop-filter:blur(18px)
}
.stat small{
    display:block;
    font-size:9px;
    color:var(--muted)
}
.stat strong{
    display:block;
    font-size:17px;
    margin-top:5px
}
.stat.compact strong{
    font-size:14px
}

.steps{
    display:flex;
    gap:5px;
    margin:2px 0 13px
}
.step{
    height:5px;
    border-radius:99px;
    background:rgba(128,133,156,.20);
    flex:1
}
.step.done,.step.active{
    background:linear-gradient(90deg,var(--brand),var(--brand-2))
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px
}
.quick{
    height:35px;
    border:0;
    border-radius:11px;
    background:rgba(98,85,246,.10);
    color:var(--brand);
    font-size:10px;
    font-weight:850
}

.address-card,.payment-card{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface-solid);
    margin-bottom:9px;
    transition:.22s
}
.address-card.selected,.payment-card.selected{
    border-color:var(--brand);
    background:rgba(98,85,246,.08);
    transform:translateY(-1px)
}
.address-card input,.payment-card input{
    accent-color:var(--brand);
    margin-top:3px
}
.choice-copy{
    flex:1;
    min-width:0
}
.choice-copy strong{
    display:block;
    font-size:12px
}
.choice-copy span{
    display:block;
    font-size:10px;
    color:var(--muted);
    line-height:1.45;
    margin-top:3px
}
.mini{
    width:30px;
    height:30px;
    border:0;
    border-radius:9px;
    background:var(--surface);
    color:var(--brand);
    box-shadow:var(--shadow-soft)
}

.payment-visual{
    border-radius:20px;
    padding:16px;
    color:#fff;
    background:linear-gradient(135deg,#15182c,#34395f 52%,var(--brand));
    box-shadow:0 16px 30px rgba(24,27,48,.25);
    position:relative;
    overflow:hidden;
    margin-bottom:13px
}
.payment-visual:after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    border-radius:50%;
    border:28px solid rgba(255,255,255,.08);
    right:-84px;
    top:-72px
}
.chip{
    width:39px;
    height:28px;
    border-radius:8px;
    background:linear-gradient(135deg,#f9d976,#d5a640);
    margin:13px 0 20px
}
.number{
    font-size:17px;
    letter-spacing:.12em;
    font-weight:800;
    position:relative;
    z-index:1
}
.card-meta{
    display:flex;
    justify-content:space-between;
    font-size:10px;
    opacity:.84;
    margin-top:14px;
    position:relative;
    z-index:1
}

.summary-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:9px 0;
    border-bottom:1px dashed var(--line);
    font-size:11px
}
.summary-row:last-child{
    border-bottom:0
}
.summary-row span{
    color:var(--muted)
}
.summary-row span small{
    display:inline-block;
    margin-left:4px;
    font-size:9px;
    font-weight:800;
    color:var(--muted)
}
.summary-row strong{
    text-align:right
}

.security-list{
    display:grid;
    gap:8px
}
.security-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px
}
.security-icon{
    width:28px;
    height:28px;
    border-radius:10px;
    background:rgba(25,199,156,.12);
    color:var(--success);
    display:grid;
    place-items:center;
    font-weight:900
}

.timeline{
    display:grid;
    gap:11px
}
.timeline-row{
    display:grid;
    grid-template-columns:30px 1fr;
    gap:10px;
    align-items:start
}
.timeline-dot{
    width:26px;
    height:26px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(128,133,156,.16);
    color:var(--muted);
    font-size:10px;
    font-weight:900
}
.timeline-row.done .timeline-dot{
    background:rgba(25,199,156,.14);
    color:var(--success)
}
.timeline-row.active .timeline-dot{
    background:rgba(98,85,246,.14);
    color:var(--brand);
    animation:pulseDot 1.4s infinite
}
@keyframes pulseDot{
    0%,100%{
        box-shadow:0 0 0 0 rgba(98,85,246,.22)
    }
    50%{
        box-shadow:0 0 0 7px rgba(98,85,246,0)
    }
}
.timeline-copy strong{
    display:block;
    font-size:11px
}
.timeline-copy span{
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-top:2px
}


.action-choice-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:14px
}
.action-choice{
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
    text-align:left;
    background:var(--surface);
    color:var(--ink);
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(18px);
    transition:.24s;
    position:relative;
    overflow:hidden
}
.action-choice:hover{
    transform:translateY(-3px);
    border-color:var(--brand)
}
.action-choice:active{
    transform:scale(.985)
}
.action-choice:after{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    border-radius:50%;
    right:-45px;
    top:-45px;
    background:rgba(98,85,246,.08)
}
.action-icon{
    width:46px;
    height:46px;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:22px;
    font-weight:900;
    margin-bottom:14px
}
.action-choice.buy .action-icon{
    background:linear-gradient(135deg,#f7931a,#ffb44c)
}
.action-choice.sell .action-icon{
    background:linear-gradient(135deg,var(--brand),var(--brand-2))
}
.action-choice strong{
    display:block;
    font-size:16px;
    margin-bottom:5px
}
.action-choice span{
    display:block;
    font-size:10px;
    color:var(--muted);
    line-height:1.5
}
.action-choice small{
    display:inline-block;
    margin-top:12px;
    color:var(--brand);
    font-weight:900;
    font-size:10px
}
.home-summary{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:12px
}
.home-summary .stat{
    text-align:center
}
.home-summary .stat strong{
    font-size:14px
}
.buy-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:12px
}
.buy-grid.single-option{
    grid-template-columns:1fr
}
.crypto-card{
    padding:14px;
    border-radius:18px;
    border:1px solid var(--line);
    background:var(--surface);
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow-soft);
    transition:.22s;
    text-align:left;
    color:var(--ink)
}
.crypto-card.selected{
    border-color:var(--brand);
    background:rgba(98,85,246,.09);
    transform:translateY(-2px)
}
.crypto-symbol{
    width:38px;
    height:38px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:#f7931a;
    color:white;
    font-weight:900;
    margin-bottom:10px
}
.crypto-card strong{
    display:block;
    font-size:13px
}
.crypto-card span{
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-top:3px
}
.partner-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:12px
}
#buyPartnerList{
    grid-template-columns:1fr
}
.partner-card{
    min-height:56px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface-solid);
    color:var(--ink);
    padding:10px;
    text-align:left;
    transition:.22s
}
.partner-card.buy-payment-card{
    min-height:66px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:12px 14px;
    overflow:hidden
}
.partner-card.selected{
    border-color:var(--brand);
    background:rgba(98,85,246,.09)
}
.partner-card strong{
    display:block;
    font-size:11px
}
.partner-card span{
    display:block;
    font-size:8px;
    color:var(--muted);
    margin-top:3px
}
.payment-method-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    min-width:0
}
.payment-method-copy{
    flex:1 1 auto;
    min-width:158px;
    text-align:left
}
.payment-method-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px
}
.partner-card .payment-method-copy span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-top:3px
}
.payment-brand-icons{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    flex:0 0 auto
}
.payment-brand-logo{
    display:block!important;
    flex:0 0 auto;
    width:34px;
    height:28px;
    margin-top:0!important
}
.payment-brand-logo svg{
    display:block;
    width:100%;
    height:100%;
    filter:drop-shadow(0 4px 8px rgba(15,23,42,.08))
}
.payment-brand-logo.apple-pay-logo,
.payment-brand-logo.google-pay-logo{
    width:46px
}
.upload-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px
}
.upload-box{
    min-height:145px;
    border:1.5px dashed rgba(98,85,246,.35);
    border-radius:17px;
    background:rgba(98,85,246,.05);
    display:grid;
    place-items:center;
    text-align:center;
    padding:10px;
    position:relative;
    overflow:hidden;
    transition:.22s
}
.upload-box input{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer
}
.upload-box.locked{
    opacity:.72;
    border-style:solid;
    cursor:not-allowed
}
.upload-box.locked input{
    pointer-events:none;
    cursor:not-allowed
}
.upload-box img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.upload-overlay{
    position:relative;
    z-index:2
}
.upload-box.has-image .upload-overlay{
    position:absolute;
    left:8px;
    right:8px;
    bottom:8px;
    background:rgba(15,17,28,.72);
    color:white;
    border-radius:10px;
    padding:7px;
    font-size:9px;
    backdrop-filter:blur(8px)
}
.upload-icon{
    font-size:25px;
    margin-bottom:6px
}
.masked-ssn{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px;
    border-radius:16px;
    border:1px solid var(--line);
    background:var(--surface-solid);
    margin-bottom:12px
}
.masked-ssn strong{
    font-size:18px;
    letter-spacing:.12em
}
.quote-card{
    padding:17px;
    border-radius:21px;
    color:white;
    background:linear-gradient(135deg,#16182c,#3c356f 55%,var(--brand));
    box-shadow:0 16px 34px rgba(40,35,85,.28);
    position:relative;
    overflow:hidden
}
.quote-card:after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    border-radius:50%;
    border:28px solid rgba(255,255,255,.07);
    right:-88px;
    top:-82px
}
.quote-price{
    font-size:26px;
    font-weight:900;
    margin:8px 0 4px;
    position:relative;
    z-index:1
}
.quote-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:16px;
    position:relative;
    z-index:1
}
.quote-meta div{
    flex:1;
    padding:10px;
    border-radius:13px;
    background:rgba(255,255,255,.10)
}
.quote-meta small{
    display:block;
    font-size:8px;
    opacity:.72
}
.quote-meta strong{
    display:block;
    font-size:11px;
    margin-top:3px
}
.timer-ring{
    width:54px;
    height:54px;
    border-radius:50%;
    background:conic-gradient(var(--accent) var(--timer,100%),rgba(255,255,255,.16) 0);
    display:grid;
    place-items:center;
    position:absolute;
    right:16px;
    top:16px;
    z-index:2
}
.timer-ring:before{
    content:"";
    width:42px;
    height:42px;
    border-radius:50%;
    background:#28244f
}
.timer-ring span{
    position:absolute;
    font-size:11px;
    font-weight:900
}
.buy-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
    margin-bottom:13px
}
.buy-step{
    height:5px;
    border-radius:99px;
    background:rgba(128,133,156,.18)
}
.buy-step.done,.buy-step.active{
    background:linear-gradient(90deg,var(--brand),var(--accent))
}
.transaction-card{
    padding:14px;
    border-radius:17px;
    border:1px solid var(--line);
    background:var(--surface-solid);
    margin-top:12px
}
@media (max-width:520px){
    .upload-grid{
        grid-template-columns:1fr 1fr
    }
}
@media (max-width:380px){
    .upload-grid,.buy-grid{
        grid-template-columns:1fr
    }
    .partner-card.buy-payment-card{
        padding:11px 12px
    }
    .payment-method-content{
        gap:7px
    }
    .payment-method-copy{
        min-width:132px
    }
    .payment-method-copy strong{
        font-size:11px
    }
    .payment-brand-icons{
        gap:4px
    }
    .payment-brand-logo{
        width:30px;
        height:25px
    }
    .payment-brand-logo.apple-pay-logo,
    .payment-brand-logo.google-pay-logo{
        width:40px
    }
}


.camera-launch{
    min-height:145px;
    border:1.5px dashed rgba(98,85,246,.35);
    border-radius:17px;
    background:rgba(98,85,246,.05);
    display:grid;
    place-items:center;
    text-align:center;
    padding:12px;
    transition:.22s;
    color:var(--ink)
}
.camera-launch:hover{
    border-color:var(--brand);
    background:rgba(98,85,246,.09)
}
.camera-launch .camera-icon{
    font-size:28px;
    margin-bottom:7px
}
.camera-launch strong{
    display:block;
    font-size:12px
}
.camera-launch span{
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-top:4px;
    line-height:1.4
}
.camera-launch.verified{
    border-style:solid;
    border-color:var(--accent);
    background:rgba(25,199,156,.08)
}
.camera-launch.locked{
    opacity:.72;
    cursor:not-allowed;
    border-style:solid
}
.camera-launch img{
    width:100%;
    height:120px;
    object-fit:cover;
    border-radius:13px;
    margin-bottom:8px
}

.camera-modal{
    position:absolute;
    inset:0;
    z-index:95;
    background:#080a12;
    display:none;
    flex-direction:column;
    color:#fff
}
.camera-modal.show{
    display:flex
}
.checkbook-modal{
    position:absolute;
    inset:0;
    z-index:94;
    background:var(--bg);
    display:none;
    flex-direction:column;
    color:var(--ink)
}
.checkbook-modal.show{
    display:flex
}
.checkbook-head{
    position:relative;
    z-index:6;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px;
    border-bottom:1px solid var(--line);
    background:var(--surface-solid)
}
.payout-window-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto
}
.payout-back-btn,
.payout-close-btn{
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink);
    font-weight:900;
    box-shadow:0 8px 20px rgba(0,0,0,.08)
}
.payout-back-btn{
    min-height:36px;
    padding:0 13px;
    border-radius:12px;
    font-size:12px
}
.payout-close-btn{
    width:36px;
    height:36px;
    border-radius:12px;
    font-size:22px;
    line-height:1
}
.checkbook-widget-container{
    flex:1;
    min-height:0;
    width:100%;
    overflow:auto;
    background:#fff
}
.checkbook-widget-container iframe{
    width:100%!important;
    min-height:700px!important;
    border:0!important
}
.checkbook-loading{
    min-height:620px;
    display:grid;
    place-items:center;
    padding:18px;
    color:var(--muted);
    font-size:12px;
    text-align:center
}
.checkbook-loading.error{
    color:var(--danger)
}
.payout-exit-confirm{
    position:absolute;
    inset:0;
    z-index:7;
    display:none;
    align-items:center;
    justify-items:center;
    padding:18px;
    background:rgba(11,13,22,.58);
    backdrop-filter:blur(8px)
}
.payout-exit-confirm.show{
    display:grid
}
.payout-exit-card{
    width:min(420px,100%);
    box-sizing:border-box;
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px;
    background:var(--surface-solid);
    box-shadow:var(--shadow);
    color:var(--ink)
}
.payout-exit-card strong{
    display:block;
    font-size:17px;
    margin-bottom:7px
}
.payout-exit-card p{
    margin:0;
    color:var(--muted);
    font-size:11px;
    line-height:1.5
}
.payout-exit-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:15px
}
.camera-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 15px;
    background:rgba(8,10,18,.88);
    backdrop-filter:blur(12px);
    z-index:2
}
.camera-head strong{
    font-size:14px
}
.camera-close{
    width:36px;
    height:36px;
    border:0;
    border-radius:12px;
    background:rgba(255,255,255,.12);
    color:#fff
}
.camera-stage{
    position:relative;
    flex:1;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#080a12
}
.camera-stage video,.camera-stage canvas{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scaleX(-1)
}
.camera-stage canvas{
    display:none
}
.face-guide{
    position:absolute;
    width:min(62%,250px);
    aspect-ratio:.76;
    border:3px solid rgba(255,255,255,.9);
    border-radius:48% 48% 44% 44% / 38% 38% 58% 58%;
    box-shadow:0 0 0 999px rgba(0,0,0,.38),0 0 26px rgba(98,85,246,.5);
    animation:guidePulse 1.8s ease-in-out infinite;
    pointer-events:none
}
@keyframes guidePulse{
    0%,100%{
        transform:scale(1);
        opacity:.95
    }
    50%{
        transform:scale(1.025);
        opacity:.72
    }
}
.liveness-banner{
    position:absolute;
    left:18px;
    right:18px;
    bottom:108px;
    text-align:center;
    padding:11px 14px;
    border-radius:14px;
    background:rgba(8,10,18,.70);
    backdrop-filter:blur(12px);
    font-size:12px;
    font-weight:800
}
.quality-row{
    position:absolute;
    top:14px;
    left:14px;
    right:14px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px
}
.quality-pill{
    padding:7px;
    border-radius:11px;
    background:rgba(8,10,18,.58);
    font-size:8px;
    text-align:center
}
.quality-pill.done{
    background:rgba(25,199,156,.78)
}
.camera-controls{
    min-height:96px;
    padding:13px 16px max(13px,env(safe-area-inset-bottom));
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    background:#0b0d16
}
.capture-btn{
    width:68px;
    height:68px;
    border-radius:50%;
    border:5px solid rgba(255,255,255,.85);
    background:#fff;
    box-shadow:inset 0 0 0 5px #0b0d16
}
.camera-action{
    min-width:92px;
    height:42px;
    border:0;
    border-radius:13px;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-weight:800
}
.camera-action.primary{
    background:linear-gradient(135deg,var(--brand),var(--brand-2))
}
.camera-error{
    padding:22px;
    text-align:center;
    color:white
}

.bottom-nav{
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
    padding:7px;
    border:1px solid var(--line);
    background:var(--surface);
    backdrop-filter:blur(20px);
    border-radius:18px;
    box-shadow:var(--shadow-soft);
    z-index:20
}
.nav-btn{
    border:0;
    background:transparent;
    color:var(--muted);
    border-radius:12px;
    padding:8px 5px;
    font-size:9px;
    font-weight:800
}
.nav-btn b{
    display:block;
    font-size:16px;
    margin-bottom:2px
}
.nav-btn.active{
    background:rgba(98,85,246,.11);
    color:var(--brand)
}

.backdrop{
    position:absolute;
    inset:0;
    background:rgba(11,13,22,.50);
    backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:.25s;
    z-index:40
}
.backdrop.show{
    opacity:1;
    pointer-events:auto
}
.sheet{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:41;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    background:var(--surface-solid);
    border-radius:26px 26px 0 0;
    padding:10px 17px max(18px,env(safe-area-inset-bottom));
    transform:translateY(105%);
    transition:.34s cubic-bezier(.2,.8,.2,1);
    max-height:90%;
    overflow:auto;
    box-shadow:0 -18px 40px rgba(0,0,0,.16)
}
.sheet.show{
    transform:none
}
.grabber{
    width:44px;
    height:5px;
    border-radius:99px;
    background:rgba(128,133,156,.26);
    margin:2px auto 13px
}
.sheet h3{
    font-size:18px;
    margin:0 0 7px
}
.sheet p{
    font-size:10px;
    line-height:1.5;
    color:var(--muted);
    margin:0 0 14px
}
.sheet-actions{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:14px
}

.toast-stack{
    position:absolute;
    top:80px;
    left:12px;
    right:12px;
    z-index:70;
    display:grid;
    gap:8px;
    pointer-events:none
}
.toast{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:11px 12px;
    border-radius:15px;
    background:var(--surface-solid);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    animation:toastIn .28s ease
}
@keyframes toastIn{
    from{
        opacity:0;
        transform:translateY(-10px)
    }
    to{
        opacity:1;
        transform:none
    }
}
.toast-icon{
    width:29px;
    height:29px;
    border-radius:10px;
    background:rgba(98,85,246,.11);
    color:var(--brand);
    display:grid;
    place-items:center;
    font-weight:900
}
.toast.success .toast-icon{
    background:rgba(25,199,156,.12);
    color:var(--success)
}
.toast.error .toast-icon{
    background:rgba(240,84,112,.12);
    color:var(--danger)
}
.toast strong{
    display:block;
    font-size:11px
}
.toast span{
    display:block;
    font-size:9px;
    color:var(--muted);
    line-height:1.4;
    margin-top:2px
}

.loader{
    position:absolute;
    inset:0;
    z-index:80;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(9px);
    display:none;
    place-items:center;
    text-align:center;
    padding:25px
}
@media (prefers-color-scheme: dark){
    .loader{
        background:rgba(16,18,28,.88)
    }
}
:root[data-theme="light"] .loader{
    background:rgba(255,255,255,.88)
}
:root[data-theme="dark"] .loader{
    background:rgba(16,18,28,.88)
}
.loader.show{
    display:grid
}
.progress-ring{
    width:76px;
    height:76px;
    border-radius:50%;
    background:conic-gradient(var(--brand) var(--p,10%),rgba(128,133,156,.16) 0);
    display:grid;
    place-items:center;
    margin:auto;
    transition:.35s
}
.progress-ring:before{
    content:"";
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--surface-solid)
}
.progress-label{
    margin-top:-50px;
    font-size:14px;
    font-weight:900;
    position:relative
}
.loader h3{
    font-size:15px;
    margin:34px 0 5px
}
.loader p{
    font-size:10px;
    color:var(--muted);
    margin:0
}
.loader-stage{
    margin-top:14px;
    font-size:10px;
    color:var(--brand);
    font-weight:800
}

.success-wrap{
    text-align:center;
    padding:20px 6px
}
.success-ring{
    width:98px;
    height:98px;
    border-radius:50%;
    margin:8px auto 18px;
    background:linear-gradient(145deg,#d8fff2,var(--surface-solid));
    display:grid;
    place-items:center;
    box-shadow:0 16px 38px rgba(25,199,156,.23);
    position:relative
}
.success-ring:before{
    content:"";
    position:absolute;
    inset:-9px;
    border:2px solid rgba(25,199,156,.22);
    border-radius:50%;
    animation:successPulse 1.5s infinite
}
@keyframes successPulse{
    0%{
        transform:scale(.85);
        opacity:1
    }
    100%{
        transform:scale(1.24);
        opacity:0
    }
}
.check{
    width:48px;
    height:28px;
    border-left:7px solid var(--accent);
    border-bottom:7px solid var(--accent);
    transform:rotate(-45deg) translate(2px,-4px);
    animation:checkIn .45s ease .15s both
}
@keyframes checkIn{
    from{
        opacity:0;
        transform:rotate(-45deg) scale(.4)
    }
    to{
        opacity:1;
        transform:rotate(-45deg) translate(2px,-4px) scale(1)
    }
}
.confetti{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden
}
.confetti i{
    position:absolute;
    width:7px;
    height:14px;
    background:var(--brand);
    top:40%;
    left:50%;
    animation:confetti 1.2s ease-out forwards
}
.confetti i:nth-child(2){
    background:var(--accent);
    transform:rotate(25deg);
    animation-delay:.06s
}
.confetti i:nth-child(3){
    background:var(--warning);
    transform:rotate(55deg);
    animation-delay:.12s
}
.confetti i:nth-child(4){
    background:var(--danger);
    transform:rotate(85deg);
    animation-delay:.18s
}
@keyframes confetti{
    to{
        transform:translate(var(--x),var(--y)) rotate(360deg);
        opacity:0
    }
}

.hidden{
    display:none!important
}

@media (max-width:520px){
    body{
        padding:0
    }
    .shell{
        width:100%;
        height:100vh;
        min-height:100vh;
        border-radius:0;
        border:0
    }
    .topbar{
        padding-top:max(14px,env(safe-area-inset-top))
    }
    .bottom-nav{
        bottom:max(10px,env(safe-area-inset-bottom))
    }
    #otpScreen{
        align-items:flex-start;
        padding-top:8px
    }
    #otpScreen > .card{
        margin:0
    }
    .otp-grid{
        gap:7px
    }
    .otp{
        height:50px;
        font-size:18px;
        border-radius:12px
    }
}

@media (max-height:700px){
    .topbar{
        min-height:64px;
        padding-top:10px;
        padding-bottom:10px
    }
    .content{
        padding-top:10px;
        padding-bottom:84px
    }
    #otpScreen{
        align-items:flex-start;
        padding-top:0
    }
    #otpScreen > .card{
        padding:14px;
        margin:0
    }
    .otp-grid{
        margin:10px 0
    }
    .otp{
        height:48px
    }
    #otpScreen h2{
        font-size:18px!important
    }
    #otpScreen .notice{
        margin-top:8px!important
    }
}

@media (max-width:360px){
    .otp-grid{
        gap:6px
    }
    .otp{
        height:46px;
        font-size:17px
    }
    #otpScreen > .card{
        padding:13px
    }
    .intro-hero{
        padding:18px
    }
    .intro-hero h1{
        font-size:25px
    }
    .intro-system-panel,
    .intro-metrics{
        grid-template-columns:1fr
    }
    .intro-metric{
        min-height:0
    }
}


.pm-swal{
    border-radius:24px!important;
    border:1px solid var(--line)!important;
    background:var(--surface)!important;
    backdrop-filter:blur(25px)!important;
    box-shadow:var(--shadow)!important;
    padding:24px!important;
}

.pm-swal-title{
    color:var(--ink)!important;
    font-size:22px!important;
    font-weight:800!important;
}

.pm-swal-content{
    color:var(--muted)!important;
    font-size:14px!important;
}

.pm-swal-actions{
    margin-top:20px!important;
}

.pm-swal-confirm{
    background:linear-gradient(135deg,var(--brand),var(--brand-2))!important;
    color:#fff!important;
    border:none!important;
    border-radius:14px!important;
    height:46px;
    padding:0 30px;
    font-weight:700;
    box-shadow:0 12px 28px rgba(98,85,246,.28);
}

.pm-swal-confirm:hover{
    transform:translateY(-2px);
}

.pm-swal-cancel{
    background:rgba(240,84,112,.12)!important;
    color:var(--danger)!important;
    border:none!important;
    border-radius:14px!important;
    height:46px;
    padding:0 30px;
    font-weight:700;
}


.pm-loader{
    width:70px;
    height:70px;
    margin:auto;
    border-radius:50%;
    background:
        conic-gradient(
        var(--brand),
        var(--brand-2),
        var(--accent),
        var(--brand)
        );
    display:grid;
    place-items:center;
    animation:spin 1s linear infinite;
}

.pm-loader span{
    width:54px;
    height:54px;
    background:var(--surface-solid);
    border-radius:50%;
}

.pm-loader-text{
    margin-top:18px;
    color:var(--muted);
    font-size:13px;
}

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

/*.topbar {
    min-height: 78px;
    padding: 12px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    position: relative;
    z-index: 10;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% -30%,
            rgba(255, 255, 255, .20),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #211757 0%,
            #4632d1 55%,
            #735cff 100%
        );

    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.topbar::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -65px;
    top: -80px;
    border-radius: 50%;
    border: 22px solid rgba(255, 255, 255, .05);
    pointer-events: none;
}

.brand {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;

    position: relative;
    z-index: 2;
}

.brand-mark {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;

    position: relative;
    overflow: hidden;

    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .65);

    box-shadow:
        0 9px 24px rgba(14, 9, 52, .24),
        inset 0 0 0 1px rgba(98, 85, 246, .08);
}


 The original image has a lot of white spacing.
 This enlarges it inside the small tile and crops that spacing.

.brand-mark img {
    position: absolute;

    width: 94px;
    height: 94px;

    max-width: none;

    left: 50%;
    top: 50%;

    object-fit: cover;

    transform: translate(-50%, -50%) scale(1.18);
}

.brand-copy {
    min-width: 0;
}

.brand-copy strong {
    display: block;

    margin: 0;

    font-size: 17px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .08em;
}

.brand-copy span {
    display: block;

    max-width: 210px;
    margin-top: 5px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: .045em;

    color: rgba(255, 255, 255, .74);
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 7px;

    position: relative;
    z-index: 2;
}

.icon-btn {
    width: 38px;
    height: 38px;

    padding: 0;
    border-radius: 12px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .11);
    color: #fff;

    backdrop-filter: blur(14px);
    transition:
        transform .2s ease,
        background .2s ease;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, .19);
    transform: translateY(-1px);
}

@media (max-width: 520px) {
    .topbar {
        min-height: 72px;
        padding:
            max(10px, env(safe-area-inset-top))
            13px
            10px;
    }

    .brand {
        gap: 9px;
    }

    .brand-mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
    }

    .brand-mark img {
        width: 84px;
        height: 84px;
    }

    .brand-copy strong {
        font-size: 15px;
    }

    .brand-copy span {
        max-width: 170px;
        font-size: 9px;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 360px) {
    .brand-copy span {
        max-width: 135px;
    }

    .brand-mark {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .brand-mark img {
        width: 78px;
        height: 78px;
    }

    .sheet-actions {
        grid-template-columns:1fr;
    }
}

.hero {
    padding: 18px;
    margin-bottom: 14px;
    border-radius: 22px;
}

.hero h1 {
    max-width: 330px;
    font-size: 22px;
    line-height: 1.18;
    margin: 7px 0;
}

.hero p {
    max-width: 370px;
    font-size: 11px;
    line-height: 1.55;
}*/


.topbar {
    --header-height: clamp(82px, 24.7vw, 116px);

    width: 100%;
    height: var(--header-height);
    flex: 0 0 var(--header-height);

    position: relative;
    z-index: 10;
    overflow: hidden;

    padding: 0;

    background:
        radial-gradient(
            circle at 93% -25%,
            rgba(255, 255, 255, .14),
            transparent 44%
        ),
        linear-gradient(
            105deg,
            #17105a 0%,
            #251678 48%,
            #6548f4 100%
        );

    border-radius: 0 0 22px 22px;
}

/*
 * The source PNG has vertical safety margin around the visible banner.
 * Keep this crop tall enough so the rounded logo/banner edge is not clipped.
 */
.header-brand-image {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: left center;

    pointer-events: none;
    user-select: none;
}

/*
 * Soft gradient hides the original buttons
 * that are inside the image.
 */
.topbar::after {
    content: "";

    position: absolute;
    z-index: 1;

    top: 0;
    right: 0;
    bottom: 0;

    width: 116px;

    background:
        linear-gradient(
            90deg,
            rgba(70, 47, 194, 0) 0%,
            rgba(79, 55, 210, .96) 28%,
            rgba(91, 65, 232, 1) 100%
        );

    pointer-events: none;
}

.top-actions {
    position: absolute;
    z-index: 3;

    top: 50%;
    right: 13px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    gap: 9px;
}

.header-action-btn {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .21),
            rgba(255, 255, 255, .10)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 8px 20px rgba(16, 8, 69, .20);

    backdrop-filter: blur(12px);
    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.header-action-btn svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

.header-action-btn:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .29),
            rgba(255, 255, 255, .15)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 11px 24px rgba(16, 8, 69, .26);
}

.header-action-btn:active {
    transform: scale(.95);
}

.header-action-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 520px) {

    .topbar {
        --header-height: clamp(82px, 24.7vw, 126px);

        border-radius: 0;
    }

    .header-brand-image {
        object-fit: cover;
        object-position: left center;
    }

    .topbar::after {
        width: 103px;
    }

    .top-actions {
        right: 10px;
        gap: 7px;
    }

    .header-action-btn {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 13px;
    }

    .header-action-btn svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 380px) {

    .topbar {
        --header-height: clamp(78px, 24.7vw, 94px);
    }

    .topbar::after {
        width: 91px;
    }

    .top-actions {
        right: 7px;
        gap: 6px;
    }

    .header-action-btn {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        border-radius: 12px;
    }
}

@supports (height: 100dvh) {
    .shell {
        height:min(860px,calc(100dvh - 20px));
    }
}

@media (max-width: 520px) {
    html,
    body {
        height:100%;
        min-height:100%;
        overflow:hidden;
    }

    body {
        position:fixed;
        inset:0;
        width:100%;
        display:block;
        padding:0;
    }

    .shell {
        width:100%;
        height:100vh;
        height:100svh;
        height:100dvh;
        min-height:0;
        border-radius:0;
        border:0;
    }

    .content {
        min-height:0;
        padding:12px 14px calc(108px + env(safe-area-inset-bottom, 0px));
        -webkit-overflow-scrolling:touch;
    }

    .bottom-nav {
        position:fixed;
        left:max(10px, env(safe-area-inset-left, 0px));
        right:max(10px, env(safe-area-inset-right, 0px));
        bottom:calc(8px + env(safe-area-inset-bottom, 0px));
        z-index:80;
    }

    .camera-modal,
    .checkbook-modal,
    .loader {
        position:fixed;
        inset:0;
        width:100%;
        height:100vh;
        height:100svh;
        height:100dvh;
        max-height:100dvh;
    }

    .camera-modal {
        overflow:hidden;
    }

    .camera-head {
        flex:0 0 auto;
        padding:calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
    }

    .camera-stage {
        flex:1 1 auto;
        min-height:0;
    }

    .quality-row {
        top:10px;
        left:10px;
        right:10px;
    }

    .quality-pill {
        padding:6px 4px;
    }

    .face-guide {
        width:min(62vw, 230px);
    }

    .liveness-banner {
        left:12px;
        right:12px;
        bottom:14px;
        padding:10px 12px;
    }

    .camera-controls {
        flex:0 0 auto;
        min-height:calc(84px + env(safe-area-inset-bottom, 0px));
        padding:10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        gap:12px;
        position:relative;
        z-index:3;
    }

    .capture-btn {
        width:62px;
        height:62px;
    }

    .camera-action {
        min-width:86px;
        height:40px;
    }

    .backdrop {
        position:fixed;
        inset:0;
        z-index:90;
    }

    .sheet {
        position:fixed;
        left:max(0px, env(safe-area-inset-left, 0px));
        right:max(0px, env(safe-area-inset-right, 0px));
        bottom:0;
        z-index:91;
        max-height:calc(100dvh - 12px - env(safe-area-inset-top, 0px));
        padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border-radius:22px 22px 0 0;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    .sheet-actions {
        position:sticky;
        bottom:0;
        z-index:2;
        margin:12px 0 0;
        padding:10px 0 calc(4px + env(safe-area-inset-bottom, 0px));
        background:linear-gradient(180deg, rgba(255,255,255,0), var(--surface-solid) 18px);
    }

    .sheet-actions .btn {
        min-height:44px;
        white-space:normal;
    }

    .checkbook-head {
        padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
    }

    .payout-window-actions {
        gap:7px;
    }

    .payout-back-btn,
    .payout-close-btn {
        min-height:40px;
    }

    .payout-exit-confirm {
        align-items:end;
        padding:14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .payout-exit-card {
        max-height:calc(100dvh - 26px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        overflow:auto;
        -webkit-overflow-scrolling:touch;
    }

    .payout-exit-actions .btn {
        min-height:44px;
    }
}

@media (max-width: 520px) and (max-height: 700px) {
    .camera-head {
        padding:calc(9px + env(safe-area-inset-top, 0px)) 12px 9px;
    }

    .camera-head strong {
        font-size:13px;
    }

    .quality-row {
        grid-template-columns:1fr;
        width:132px;
        right:auto;
        gap:5px;
    }

    .quality-pill {
        text-align:left;
    }

    .face-guide {
        width:min(56vw, 190px);
    }

    .liveness-banner {
        bottom:10px;
        font-size:11px;
    }

    .camera-controls {
        min-height:calc(76px + env(safe-area-inset-bottom, 0px));
        padding-top:8px;
    }

    .capture-btn {
        width:56px;
        height:56px;
        border-width:4px;
        box-shadow:inset 0 0 0 4px #0b0d16;
    }

    .camera-action {
        min-width:78px;
        height:38px;
        font-size:11px;
    }

    .sheet {
        max-height:calc(100dvh - 8px - env(safe-area-inset-top, 0px));
        padding-top:8px;
    }

    .sheet h3 {
        font-size:16px;
        margin-bottom:5px;
    }

    .sheet p {
        margin-bottom:10px;
    }

    .payout-exit-card {
        padding:15px;
    }

    .payout-exit-card strong {
        font-size:16px;
    }
}