/* ============================================================
   THEME
   ============================================================ */
:root{
    --bg:#020F38;
    --bg-elev:#071944;
    --bg-elev-2:#0B2050;
    --bg-card:#071944;
    --fg:#FFFFFF;
    --accent:#1FFF26;
    --accent-2:#95FF98;
    --line:rgba(31,255,38,.18);
    --line-md:rgba(31,255,38,.30);
    --line-soft:rgba(31,255,38,.09);
    --muted:#CBD8EF;
    --muted-2:#9CAEC9;
    --accent-soft:rgba(31,255,38,.075);
    --accent-mid:rgba(31,255,38,.14);
    --display:'Space Grotesk',sans-serif;
    --line-strong:rgba(31,255,38,.5);
    --sans:'Inter',system-ui,sans-serif;
    --mono:'JetBrains Mono',monospace;
}

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

html{
    -webkit-text-size-adjust:100%;
}

body{
    font-family:var(--sans);
    background:var(--bg);
    color:var(--fg);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    position:relative;
    padding:32px 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* ambient background */
body::before{
    content:'';
    position:fixed;
    top:-300px;
    left:50%;
    transform:translateX(-50%);
    width:900px;
    height:700px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(31,255,38,.1), transparent 65%);
    pointer-events:none;
    z-index:0;
}

body::after{
    content:'';
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(rgba(31,255,38,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,255,38,.02) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at 50% 30%, #000 25%, transparent 75%);
    -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 25%, transparent 75%);
    pointer-events:none;
    z-index:0;
}

/* ============================================================
   SIGNUP CARD
   ============================================================ */
.signup-card{
    position:relative;
    z-index:1;
    width:100%;
    max-width:460px;
    background:var(--bg-card);
    border:1px solid var(--line-md);
    border-radius:20px;
    box-shadow:
        0 24px 60px rgba(0,0,0,.6),
        0 0 80px rgba(31,255,38,.06);
    overflow:hidden;
}

/* top accent line */
.signup-card::before{
    content:'';
    position:absolute;
    top:0;
    left:20px;
    right:20px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity:.8;
    z-index:2;
}

/* ============================================================
   CARD HEADER
   ============================================================ */
.card-header{
    padding:28px 24px 20px;
    text-align:center;
    border-bottom:1px solid var(--line);
    background:radial-gradient(circle at 50% 0%, rgba(31,255,38,.08), transparent 70%);
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
    text-align:left;
}

.brand-icon{
    width:42px;
    height:42px;
    border-radius:11px;
    background:linear-gradient(135deg, var(--accent), rgba(31,255,38,.7));
    color:#020F38;
    display:grid;
    place-items:center;
    font-size:19px;
    flex-shrink:0;
    box-shadow:0 0 22px rgba(31,255,38,.4);
}

.brand-text{
    display:flex;
    flex-direction:column;
}

.brand-name{
    font-family:var(--display);
    font-size:18px;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--fg);
    line-height:1.1;
}
.brand-name b{
    color:var(--accent);
}

.brand-tag{
    font-family:var(--mono);
    font-size:8.5px;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:3px;
}

.header-title{
    font-family:var(--display);
    font-size:20px;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--fg);
    margin-bottom:4px;
}

.header-sub{
    font-size:12.5px;
    color:var(--muted);
}
.header-sub a{
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
}
.header-sub a:hover{
    text-decoration:underline;
}

/* ============================================================
   CARD BODY
   ============================================================ */
.card-body{
    padding:22px 24px 24px;
    max-height:calc(100vh - 280px);
    overflow-y:auto;
}
.card-body::-webkit-scrollbar{
    width:5px;
}
.card-body::-webkit-scrollbar-track{
    background:transparent;
}
.card-body::-webkit-scrollbar-thumb{
    background:rgba(31,255,38,.2);
    border-radius:99px;
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.field{
    margin-bottom:14px;
}

.field-label{
    display:block;
    font-family:var(--mono);
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:7px;
    line-height:1.4;
}
.field-label small{
    color:var(--accent);
    font-weight:600;
    letter-spacing:.02em;
    text-transform:none;
    margin-left:5px;
    font-size:9px;
    font-family:var(--sans);
}

.input-wrap{
    position:relative;
    background:rgba(2,15,56,.7);
    border:1px solid var(--line-md);
    border-radius:10px;
    transition:border-color .2s, box-shadow .2s, background .2s;
}

.input-wrap:hover{
    border-color:rgba(31,255,38,.35);
}

.input-wrap:focus-within{
    border-color:var(--accent);
    background:#020F38;
    box-shadow:0 0 0 3px rgba(31,255,38,.1);
}

.input-wrap > .fi{
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted);
    font-size:13px;
    pointer-events:none;
    transition:color .2s;
    line-height:1;
}

.input-wrap:focus-within > .fi{
    color:var(--accent);
}

.input-wrap input,
.input-wrap select{
    width:100%;
    padding:12px 42px 12px 38px;
    border:none;
    background:transparent;
    font-size:13.5px;
    color:var(--fg);
    outline:none;
    font-weight:500;
    font-family:var(--sans);
    appearance:none;
    -webkit-appearance:none;
    line-height:1.4;
}

.input-wrap select{
    padding-right:36px;
    cursor:pointer;
}

.input-wrap select option{
    background:#020F38;
    color:var(--fg);
}

.input-wrap input::placeholder{
    color:var(--muted-2);
    font-weight:400;
}

/* hide number arrows */
.input-wrap input[type="number"]::-webkit-outer-spin-button,
.input-wrap input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.input-wrap input[type="number"]{
    -moz-appearance:textfield;
}

/* dropdown arrow */
.input-wrap .arrow{
    position:absolute;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted);
    pointer-events:none;
    font-size:11px;
    line-height:1;
}

/* password toggle */
.pass-toggle{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    background:transparent;
    border:0;
    color:var(--muted);
    cursor:pointer;
    width:32px;
    height:32px;
    border-radius:8px;
    display:grid;
    place-items:center;
    font-size:12px;
    padding:0;
    transition:.2s;
    z-index:2;
}

.pass-toggle:hover{
    color:var(--accent);
    background:var(--accent-soft);
}

.pass-toggle .fa-eye-slash{
    display:none;
}
.pass-toggle.show .fa-eye{
    display:none;
}
.pass-toggle.show .fa-eye-slash{
    display:inline;
}

/* sponsor feedback */
#sponname{
    display:block;
    font-size:11.5px;
    font-weight:600;
    margin-top:6px;
    font-family:var(--mono);
    min-height:14px;
    line-height:1.4;
}
#sponname i{
    margin-right:5px;
}

/* ============================================================
   RADIO GROUP
   ============================================================ */
.radio-row{
    display:flex;
    gap:9px;
}

.radio-btn{
    flex:1;
    padding:11px 0;
    text-align:center;
    background:rgba(2,15,56,.7);
    border:1px solid var(--line-md);
    border-radius:10px;
    font-family:var(--mono);
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--muted);
    cursor:pointer;
    transition:.2s;
    text-transform:uppercase;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}

.radio-btn:hover{
    border-color:var(--line-strong);
    color:var(--fg);
}

.radio-btn.active{
    background:var(--accent);
    color:#020F38;
    border-color:var(--accent);
    box-shadow:0 0 20px rgba(31,255,38,.3);
}

.radio-btn input{
    display:none;
}

.radio-row.locked .radio-btn{
    cursor:not-allowed;
}
.radio-row.locked .radio-btn:not(.active){
    opacity:.35;
}

/* ============================================================
   CAPTCHA
   ============================================================ */
.captcha-row{
    display:flex;
    align-items:stretch;
    gap:10px;
}

.captcha-code{
    background:linear-gradient(135deg, rgba(31,255,38,.14), rgba(31,255,38,.04));
    border:1px solid var(--accent);
    border-radius:10px;
    padding:0 16px;
    font-family:var(--mono);
    font-size:19px;
    font-weight:700;
    color:var(--accent);
    letter-spacing:5px;
    min-width:108px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-shadow:0 0 16px rgba(31,255,38,.5);
    user-select:none;
    flex-shrink:0;
    line-height:1;
}

.captcha-input{
    flex:1;
    min-width:0;
}
.captcha-input .input-wrap{
    height:100%;
}
.captcha-input .input-wrap input{
    height:100%;
}

/* ============================================================
   TERMS + SUBMIT
   ============================================================ */
.terms{
    font-size:11.5px;
    color:var(--muted);
    text-align:center;
    margin:4px 0 14px;
    line-height:1.6;
}
.terms a{
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
}
.terms a:hover{
    text-decoration:underline;
}

.submit-btn{
    width:100%;
    padding:13px;
    background:var(--accent);
    border:1px solid var(--accent);
    border-radius:10px;
    color:#020F38;
    font-weight:800;
    font-size:14px;
    letter-spacing:.03em;
    cursor:pointer;
    transition:.2s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-family:var(--sans);
    box-shadow:0 8px 22px rgba(31,255,38,.22);
    -webkit-tap-highlight-color:transparent;
}

.submit-btn:hover{
    background:#73FF78;
    transform:translateY(-1px);
    box-shadow:0 10px 28px rgba(31,255,38,.4);
}

.submit-btn:active{
    transform:scale(.98);
}

.submit-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

.submit-btn i{
    font-size:12px;
}

/* ============================================================
   CARD FOOTER
   ============================================================ */
.card-footer{
    padding:14px 24px 18px;
    text-align:center;
    border-top:1px solid var(--line);
    background:rgba(0,0,0,.15);
    font-size:12.5px;
    color:var(--muted);
}

.card-footer a{
    color:var(--accent);
    text-decoration:none;
    font-weight:700;
}
.card-footer a:hover{
    text-decoration:underline;
}

/* trust line */
.trust-line{
    position:relative;
    z-index:1;
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    font-family:var(--mono);
    font-size:9.5px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted-2);
}

.trust-line span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.trust-line i{
    color:var(--accent);
    font-size:11px;
}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
    position:fixed;
    inset:0;
    background:var(--bg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:9999;
    gap:22px;
    transition:opacity .5s, visibility .5s;
}

.preloader.hide{
    opacity:0;
    visibility:hidden;
}

.preloader-brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--display);
    font-size:22px;
    font-weight:700;
    color:var(--fg);
}
.preloader-brand b{
    color:var(--accent);
}

.preloader-brand .brand-icon{
    width:48px;
    height:48px;
    font-size:22px;
}

.spinner{
    position:relative;
    width:52px;
    height:52px;
}

.spinner span{
    position:absolute;
    inset:0;
    border:3px solid transparent;
    border-radius:50%;
    animation:spin 1.2s cubic-bezier(.5,0,.5,1) infinite;
}

.spinner span:nth-child(1){ animation-delay:-.1s; border-top-color:var(--accent); }
.spinner span:nth-child(2){ animation-delay:-.2s; border-right-color:rgba(31,255,38,.85); }
.spinner span:nth-child(3){ animation-delay:-.3s; border-bottom-color:rgba(31,255,38,.65); }
.spinner span:nth-child(4){ animation-delay:-.4s; border-left-color:rgba(31,255,38,.45); }
.spinner span:nth-child(5){ animation-delay:-.5s; border-top-color:rgba(31,255,38,.35); }
.spinner span:nth-child(6){ animation-delay:-.6s; border-right-color:rgba(31,255,38,.25); }
.spinner span:nth-child(7){ animation-delay:-.7s; border-bottom-color:rgba(31,255,38,.18); }
.spinner span:nth-child(8){ animation-delay:-.8s; border-left-color:rgba(31,255,38,.12); }

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 575.98px){
    body{
        padding:16px 12px;
        justify-content:flex-start;
    }
    .signup-card{
        border-radius:16px;
    }
    .card-header{
        padding:24px 18px 18px;
    }
    .brand-icon{
        width:38px;
        height:38px;
        font-size:17px;
    }
    .brand-name{
        font-size:16px;
    }
    .header-title{
        font-size:18px;
    }
    .header-sub{
        font-size:12px;
    }
    .card-body{
        padding:18px 18px 20px;
        max-height:none;
    }
    .card-footer{
        padding:12px 18px 16px;
        font-size:12px;
    }
    .field{
        margin-bottom:12px;
    }
    .input-wrap input,
    .input-wrap select{
        padding:11px 42px 11px 36px;
        font-size:13px;
    }
    .input-wrap > .fi{
        left:11px;
        font-size:12px;
    }
    .captcha-code{
        font-size:16px;
        min-width:92px;
        padding:0 12px;
        letter-spacing:4px;
    }
    .submit-btn{
        font-size:13.5px;
        padding:12px;
    }
    .trust-line{
        gap:12px;
        font-size:8.5px;
    }
}
/* ============================================================
   LOGIN PAGE ONLY — center card, no preloader
   ============================================================ */
body.login-page{
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
    gap: 18px;
}

/* Mobile — still center but with safe padding */
@media (max-width: 575.98px){
    body.login-page{
        justify-content: center;
        padding: 20px 12px;
        gap: 14px;
    }
}
/* Starvix Global: final login refinements */
body.login-page{background:#020F38;}
.login-page .signup-card{background:#071944;border-color:rgba(31,255,38,.25);}
.login-page .brand{margin-bottom:12px;}
.login-page .brand-text{align-items:center;}
.login-page .brand-logo{width:min(245px,75vw);height:auto;max-height:115px;object-fit:contain;display:block;}
.login-page .card-header{background:radial-gradient(circle at 50% 0%,rgba(31,255,38,.11),transparent 75%);}
.login-page .input-wrap input[type=password],
.login-page .input-wrap input.password-visible{padding-right:48px;}
.login-page .pass-toggle{right:8px;width:36px;height:36px;}
.login-page .card-footer:last-child{border-top:0;padding-top:0;}
.login-page .submit-btn{background:#1FFF26;color:#020F38;}
.login-page .submit-btn:hover{background:#75FF79;}
@media(max-width:575.98px){.login-page .brand-logo{width:min(215px,75vw);}}