:root{
    color-scheme:dark;
    --bg:#040509;
    --panel:#090b11;
    --text:#f7f8fc;
    --muted:rgba(247,248,252,.60);
    --muted-2:rgba(247,248,252,.40);
    --line:rgba(255,255,255,.11);
    --line-soft:rgba(255,255,255,.055);
    --gold:#f6bd45;
    --gold-soft:#ffda78;
    --purple:#9254ff;
    --danger:#ff6e86;
    --success:#58d991;
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    min-height:100%;
    background:var(--bg);
}

body{
    margin:0;
    min-width:320px;
    min-height:100vh;
    min-height:100dvh;
    overflow-x:hidden;
    color:var(--text);
    background:
        radial-gradient(circle at 2% 1%,rgba(119,49,219,.20),transparent 28%),
        radial-gradient(circle at 98% 54%,rgba(209,135,24,.12),transparent 30%),
        #030408;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select{
    font:inherit;
}

button{
    cursor:pointer;
}

.sels-register-app{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    justify-content:center;
}

.register-screen{
    position:relative;
    isolation:isolate;
    width:100%;
    max-width:560px;
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
    padding:
        calc(14px + env(safe-area-inset-top))
        18px
        calc(18px + env(safe-area-inset-bottom));
    background:
        linear-gradient(180deg,rgba(4,5,9,.84),rgba(3,4,8,.985));
}

.visual-fx{
    position:absolute;
    inset:0;
    z-index:-2;
    overflow:hidden;
    pointer-events:none;
}

.visual-fx::before{
    content:"";
    position:absolute;
    left:-420px;
    top:-350px;
    width:750px;
    height:750px;
    border-radius:50%;
    border:3px solid rgba(137,74,255,.45);
    box-shadow:
        0 0 12px rgba(132,65,255,.90),
        0 0 32px rgba(132,65,255,.40);
    transform:rotate(17deg);
    opacity:.78;
}

.visual-fx::after{
    content:"";
    position:absolute;
    right:-470px;
    top:420px;
    width:790px;
    height:790px;
    border-radius:50%;
    border:3px solid rgba(255,184,53,.50);
    box-shadow:
        0 0 12px rgba(255,174,39,.88),
        0 0 34px rgba(255,174,39,.36);
    transform:rotate(-17deg);
    opacity:.78;
}

.purple-glow,
.gold-glow{
    position:absolute;
    width:310px;
    height:310px;
    border-radius:50%;
    filter:blur(75px);
    opacity:.15;
}

.purple-glow{
    left:-155px;
    top:-90px;
    background:#7843ef;
}

.gold-glow{
    right:-185px;
    top:470px;
    background:#d68b1c;
}

.spark{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:var(--gold-soft);
    box-shadow:0 0 10px rgba(255,205,102,.95);
    opacity:.48;
    animation:sparkle 4.5s ease-in-out infinite;
}

.spark-1{top:17%;left:13%}
.spark-2{top:31%;right:12%;animation-delay:1.1s}
.spark-3{top:52%;left:8%;animation-delay:2.4s}
.spark-4{bottom:17%;right:13%;animation-delay:.6s}

.register-topbar{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    min-height:46px;
}

.back-pill{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:15px;
    background:rgba(8,10,16,.58);
    backdrop-filter:blur(14px);
    color:rgba(255,255,255,.82);
    font-size:30px;
    line-height:1;
}

.brand-mark{
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    justify-self:center;
    color:rgba(255,255,255,.82);
    font-size:12px;
    font-weight:950;
    letter-spacing:.15em;
}

.brand-mark img{
    width:28px;
    height:28px;
    object-fit:contain;
    border-radius:8px;
}

.login-pill{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border:1px solid rgba(247,189,69,.18);
    border-radius:14px;
    background:rgba(247,189,69,.07);
    color:var(--gold-soft);
    font-size:11px;
    font-weight:900;
}

.register-hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:
        clamp(22px,5vh,46px)
        0
        20px;
}

.logo-wrap{
    position:relative;
    width:112px;
    height:112px;
    display:grid;
    place-items:center;
    margin-bottom:10px;
}

.logo-wrap::before{
    content:"";
    position:absolute;
    inset:9%;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(255,201,83,.20),
            rgba(180,107,16,.07) 42%,
            transparent 72%
        );
    filter:blur(8px);
    animation:aura 4.5s ease-in-out infinite;
}

.logo-wrap img{
    position:relative;
    z-index:2;
    width:82%;
    height:82%;
    object-fit:contain;
    filter:
        drop-shadow(0 18px 32px rgba(0,0,0,.56))
        drop-shadow(0 0 22px rgba(241,181,61,.20));
}

.eyebrow{
    margin:0 0 9px;
    color:var(--gold);
    font-size:10px;
    font-weight:950;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.register-hero h1{
    margin:0;
    font-size:clamp(30px,8vw,42px);
    line-height:1.06;
    letter-spacing:-.04em;
}

.hero-copy{
    width:min(100%,350px);
    margin:10px auto 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
    font-weight:600;
}

.register-card{
    position:relative;
    z-index:4;
    display:grid;
    gap:12px;
    width:100%;
    padding:15px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        ),
        rgba(7,9,14,.78);
    box-shadow:
        0 26px 70px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(20px);
}

.form-head{
    padding:2px 2px 5px;
}

.form-head > span{
    color:var(--gold);
    font-size:9px;
    font-weight:950;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.form-head h2{
    margin:4px 0 4px;
    color:#fff;
    font-size:23px;
    line-height:1.15;
}

.form-head p{
    margin:0;
    color:var(--muted-2);
    font-size:10.5px;
    line-height:1.45;
}

.alert-box{
    padding:12px 13px;
    border:1px solid rgba(255,110,134,.24);
    border-radius:18px;
    background:rgba(255,110,134,.10);
    color:#ffd7df;
    font-size:12px;
    line-height:1.45;
}

.alert-box div + div{
    margin-top:5px;
}

.photo-picker{
    display:grid;
    justify-items:center;
    gap:7px;
    padding:15px 12px;
    border:1px dashed rgba(247,189,69,.30);
    border-radius:20px;
    background:rgba(247,189,69,.035);
    cursor:pointer;
}

.photo-picker input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.photo-preview{
    width:78px;
    height:78px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:4px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-radius:25px;
    background:
        radial-gradient(circle at 50% 0,rgba(255,255,255,.08),transparent 60%),
        rgba(255,255,255,.04);
    color:var(--gold);
}

.photo-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.photo-preview b{
    font-size:25px;
    line-height:1;
}

.photo-preview small{
    color:rgba(255,255,255,.62);
    font-size:9px;
    font-weight:850;
}

.photo-picker em{
    color:var(--muted-2);
    font-size:9px;
    font-style:normal;
    font-weight:650;
}

.field-grid{
    display:grid;
    gap:10px;
}

.field-grid.two{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.field{
    position:relative;
    display:block;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:17px;
    background:rgba(255,255,255,.038);
    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.field:focus-within{
    border-color:rgba(247,189,69,.34);
    background:rgba(247,189,69,.035);
    box-shadow:
        0 0 0 3px rgba(247,189,69,.045),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.field > span:first-child{
    display:block;
    margin-bottom:5px;
    color:rgba(255,255,255,.53);
    font-size:9px;
    font-weight:900;
    letter-spacing:.055em;
    text-transform:uppercase;
}

.field input,
.field select{
    width:100%;
    height:29px;
    padding:0;
    border:0;
    outline:0;
    color:var(--text);
    background:transparent;
    font-size:14px;
    font-weight:750;
}

.field select{
    appearance:none;
    cursor:pointer;
}

.field select option{
    color:#111;
    background:#fff;
}

.field input::placeholder{
    color:rgba(255,255,255,.24);
}

.password-control{
    position:relative;
    display:block;
}

.password-control input{
    padding-right:48px;
}

.password-toggle{
    position:absolute;
    right:-2px;
    top:50%;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:12px;
    transform:translateY(-50%);
    background:rgba(255,255,255,.055);
    color:#fff;
}

.password-toggle .eye-closed{
    display:none;
}

.password-toggle[aria-pressed="true"] .eye-open{
    display:none;
}

.password-toggle[aria-pressed="true"] .eye-closed{
    display:inline;
}

.password-match-message{
    min-height:18px;
    margin:-3px 2px 0;
    font-size:10.5px;
    font-weight:850;
}

.password-match-message.is-success{
    color:var(--success);
}

.password-match-message.is-error{
    color:#fb7185;
}

.earning-note{
    position:relative;
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:11px;
    align-items:center;
    overflow:hidden;
    padding:12px 13px;
    border:1px solid rgba(247,189,69,.16);
    border-radius:18px;
    background:
        linear-gradient(135deg,rgba(247,189,69,.08),rgba(146,84,255,.07)),
        rgba(255,255,255,.025);
}

.earning-note-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:
        linear-gradient(145deg,#f6bd45,#b26cff);
    box-shadow:0 10px 24px rgba(0,0,0,.20);
    font-size:20px;
}

.earning-note-copy strong,
.earning-note-copy span{
    display:block;
}

.earning-note-copy strong{
    color:#fff;
    font-size:12px;
    font-weight:950;
}

.earning-note-copy span{
    margin-top:3px;
    color:var(--muted);
    font-size:9.8px;
    line-height:1.45;
    font-weight:650;
}

.earning-note-copy b{
    color:var(--gold);
    font-weight:950;
}

.submit-btn{
    min-height:64px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 24px;
    align-items:center;
    gap:12px;
    padding:10px 17px;
    overflow:hidden;
    border:1px solid rgba(255,229,162,.75);
    border-radius:20px;
    color:#171109;
    background:
        radial-gradient(circle at 50% -15%,rgba(255,255,255,.38),transparent 45%),
        linear-gradient(135deg,#c78320 0%,#f5c34f 42%,#ffd570 58%,#b9701b 100%);
    box-shadow:
        0 18px 40px rgba(180,109,18,.22),
        inset 0 1px 0 rgba(255,255,255,.48);
}

.submit-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:rgba(20,14,5,.07);
}

.submit-icon svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.submit-btn strong{
    text-align:left;
    font-size:16.5px;
    font-weight:950;
}

.submit-btn em{
    font-style:normal;
    font-size:31px;
    font-weight:300;
    line-height:1;
}

.legal-copy,
.switch-link{
    margin:0;
    text-align:center;
    color:var(--muted-2);
    font-size:9.5px;
    line-height:1.45;
    font-weight:650;
}

.legal-copy a,
.switch-link a{
    color:var(--gold);
    font-weight:900;
}

@keyframes aura{
    0%,100%{
        transform:scale(.92);
        opacity:.68;
    }

    50%{
        transform:scale(1.08);
        opacity:1;
    }
}

@keyframes sparkle{
    0%,100%{
        transform:scale(.6);
        opacity:.20;
    }

    50%{
        transform:scale(1.35);
        opacity:.88;
    }
}

@media (max-width:390px){
    .register-screen{
        padding-left:14px;
        padding-right:14px;
    }

    .register-hero{
        padding-top:18px;
        padding-bottom:15px;
    }

    .logo-wrap{
        width:94px;
        height:94px;
    }

    .register-card{
        padding:12px;
        border-radius:24px;
    }

    .field-grid.two{
        grid-template-columns:1fr 1fr;
    }

    .field{
        padding-left:10px;
        padding-right:10px;
    }
}

@media (max-width:350px){
    .field-grid.two{
        grid-template-columns:1fr;
    }
}

@media (min-width:720px){
    body{
        display:grid;
        place-items:center;
        padding:26px;
    }

    .sels-register-app{
        min-height:auto;
    }

    .register-screen{
        min-height:min(960px,calc(100dvh - 52px));
        border:1px solid rgba(255,255,255,.10);
        border-radius:38px;
        box-shadow:
            0 30px 100px rgba(0,0,0,.58),
            inset 0 1px 0 rgba(255,255,255,.025);
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
        scroll-behavior:auto!important;
    }
}