@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Orbitron:wght@500;700;800&display=swap');

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
    font-family:Inter,Arial,sans-serif;
    background:#02070b;
    color:#fff;
}

body{
    min-height:100vh;
    background:
        linear-gradient(rgba(0,7,12,.60), rgba(0,7,12,.72)),
        url("xeno-servers-tools-bg.png") center center / cover fixed no-repeat;
}

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

/* HEADER */

.topbar{
    height:58px;

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

    padding:0 max(
        18px,
        calc((100vw - 920px)/2)
    );

    background:rgba(1,5,8,.98);

    border-bottom:
        1px solid rgba(0,190,255,.13);
}

.brand{
    display:flex;
    align-items:center;

    font-family:Orbitron,sans-serif;
    font-size:27px;
    font-weight:800;
    letter-spacing:1.5px;
}

.brand .x{
    font-size:36px;
    color:#19c4ff;

    filter:
        drop-shadow(
            0 0 8px
            #00a8ff
        );

    transform:skew(-7deg);
}

/* PAGE */

.page-wrap{
    display:flex;
    justify-content:center;

    padding:
        16px
        12px
        28px;
}

/* REGISTER */

.register-card{
    width:540px;
    max-width:
        calc(100vw - 24px);

    padding:
        16px
        18px
        18px;

    border-radius:11px;

    border:
        1px solid
        rgba(0,190,255,.24);

    background:
        linear-gradient(
            180deg,
            rgba(5,18,27,.96),
            rgba(3,11,17,.98)
        );

    box-shadow:
        0 18px 44px
        rgba(0,0,0,.38);
}

.register-head{
    text-align:center;
    margin-bottom:12px;
}

.mini-logo{
    font-family:Orbitron;
    font-size:11px;
    font-weight:800;
    letter-spacing:3.5px;

    color:#19c7ff;
}

.register-head h1{
    margin:
        4px 0 2px;

    font-family:Orbitron;
    font-size:20px;
    line-height:1.1;
}

.register-head p{
    margin:0;

    color:#83949f;
    font-size:9px;
}

/* FORM */

.form-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:8px;
}

.field{
    display:flex;
    flex-direction:column;

    gap:4px;

    color:#dceef7;

    font-size:8.5px;
    font-weight:800;
    letter-spacing:.45px;
}

.field input{
    height:33px;

    padding:
        0 10px;

    border-radius:5px;

    border:
        1px solid
        rgba(73,151,195,.30);

    background:#02080c;
    color:#fff;

    font-size:11px;

    outline:none;

    transition:
        border-color .12s ease,
        box-shadow .12s ease;
}

.field input:focus{
    border-color:#14c2ff;

    box-shadow:
        0 0 0 2px
        rgba(0,185,255,.08);
}

.field small{
    color:#71818c;
    font-size:7.5px;
}

/* ACCOUNT TYPE */

.account-type-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:8px;

    margin:
        10px 0 8px;
}

.type-option{
    cursor:pointer;
}

.type-option input{
    display:none;
}

.type-box{
    display:block;

    min-height:54px;

    padding:
        9px 10px;

    border-radius:7px;

    border:
        1px solid
        rgba(75,145,184,.25);

    background:
        rgba(3,11,16,.92);

    transition:
        border-color .12s ease,
        box-shadow .12s ease,
        transform .12s ease;
}

.type-option:hover .type-box{
    transform:
        translateY(-1px);
}

.type-option input:checked
+
.type-box{
    border-color:#00bfff;

    box-shadow:
        0 0 13px
        rgba(0,174,255,.12);
}

.type-box strong{
    display:block;

    font-size:7.8px;
    line-height:1.18;
}

.type-box small{
    display:block;

    margin-top:4px;

    color:#78909d;

    font-size:7px;
    line-height:1.18;
}

/* DYNAMIC */

.dynamic-panel{
    margin-top:7px;

    padding:
        10px 11px;

    border-radius:7px;

    border:
        1px solid
        rgba(0,174,255,.15);

    background:
        rgba(3,10,15,.82);
}

.panel-title{
    margin-bottom:7px;

    color:#17c6ff;

    font-size:8px;
    font-weight:800;
    letter-spacing:.6px;
}

.hidden{
    display:none;
}

/* BOTTOM */

.bottom-row{
    display:flex;
    align-items:flex-end;

    gap:14px;

    margin-top:8px;
}

.pin-field{
    width:170px;
}

.confirm{
    display:flex;
    align-items:center;

    gap:6px;

    flex:1;

    min-height:33px;

    color:#9dabb4;

    font-size:7.7px;
    line-height:1.25;
}

.confirm input{
    width:12px;
    height:12px;

    accent-color:#00bfff;
}

/* ALERT */

.alert{
    margin-bottom:9px;

    padding:
        7px 9px;

    border-radius:6px;

    font-size:8.5px;
}

.success{
    background:
        rgba(0,170,93,.12);

    border:
        1px solid
        rgba(0,220,120,.35);

    color:#a8ffd2;
}

.error{
    background:
        rgba(200,35,35,.12);

    border:
        1px solid
        rgba(255,65,65,.35);

    color:#ffb0b0;
}

/* =========================================================
   XENO TITAN BUTTONS — same design as Login
   ========================================================= */

.titan-btn{
    --titan-cut:10px;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:160px;
    height:44px;
    padding:2px;
    border:0;
    outline:0;
    background:transparent;
    cursor:pointer;
    isolation:isolate;
    overflow:hidden;
    clip-path:polygon(var(--titan-cut) 0,100% 0,100% calc(100% - var(--titan-cut)),calc(100% - var(--titan-cut)) 100%,0 100%,0 var(--titan-cut));
    transform:translateZ(0) scale(1);
    transition:transform .16s cubic-bezier(.2,.8,.2,1),filter .16s ease;
}

.titan-btn::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:linear-gradient(90deg,#00eaff,#5b5cff,#ff00b8,#ff5a00,#fff200,#00ff9d,#00eaff);
    background-size:400% 100%;
    animation:titan-line 4s linear infinite;
    clip-path:inherit;
}

.titan-btn::after{
    content:"";
    position:absolute;
    inset:2px;
    z-index:-1;
    background:linear-gradient(180deg,#111923 0%,#070b10 52%,#030507 100%);
    clip-path:inherit;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.9);
}

.titan-btn > span{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:0 16px;
    font-family:Orbitron,Inter,Arial,sans-serif;
    font-size:9px;
    font-weight:800;
    line-height:1;
    letter-spacing:1.1px;
    color:#fff;
    text-shadow:0 0 8px rgba(255,255,255,.42);
    white-space:nowrap;
}

.titan-btn > span::before{
    content:"";
    position:absolute;
    left:9px;
    top:7px;
    width:18px;
    height:1px;
    background:linear-gradient(90deg,rgba(255,255,255,.75),transparent);
    opacity:.75;
}

.titan-btn:hover{
    transform:scale(1.055) translateY(-1px);
    filter:drop-shadow(0 0 7px rgba(0,225,255,.55)) drop-shadow(0 0 12px rgba(255,0,184,.28));
}

.titan-btn:active,
.titan-btn.pressed{
    transform:scale(.965) translateY(1px);
    filter:drop-shadow(0 0 4px rgba(0,225,255,.35));
    transition-duration:.05s;
}

.titan-btn:focus-visible{
    filter:drop-shadow(0 0 9px rgba(255,255,255,.72)) drop-shadow(0 0 14px rgba(0,225,255,.58));
}

.nav-btn{
    --titan-cut:8px;
    width:118px;
    height:34px;
}

.nav-btn > span{
    font-size:8px;
    letter-spacing:.9px;
}

.submit-btn{
    --titan-cut:9px;
    width:175px;
    height:38px;
    display:flex;
    margin:11px auto 0;
}

.submit-btn > span{
    font-size:8.5px;
    letter-spacing:1px;
}

@keyframes titan-line{
    0%{background-position:0 0}
    100%{background-position:300% 0}
}

/* RESPONSIVE */

@media(
    max-width:560px
){

    .topbar{
        padding:
            0 14px;
    }

    .register-card{
        width:
            calc(100vw - 20px);

        padding:
            14px 12px 16px;
    }

    .form-grid,
    .account-type-grid{
        grid-template-columns:
            1fr;
    }

    .bottom-row{
        flex-direction:column;
        align-items:stretch;
    }

    .pin-field{
        width:100%;
    }
}


/* XENO FOOTER */
.xeno-footer{
    width:100%;
    margin-top:18px;
    border-top:1px solid rgba(0,190,255,.18);
    background:rgba(1,5,8,.94);
    backdrop-filter:blur(8px);
}
.footer-inner{
    min-height:62px;
    max-width:920px;
    margin:0 auto;
    padding:10px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.footer-brand{
    display:flex;
    align-items:center;
    font-family:Orbitron,sans-serif;
    font-size:15px;
    font-weight:800;
    letter-spacing:1px;
}
.footer-x{
    color:#19c4ff;
    font-size:22px;
    margin-right:1px;
    filter:drop-shadow(0 0 6px #00a8ff);
}
.footer-sub{
    margin-left:8px;
    color:#6f8795;
    font-family:Inter,Arial,sans-serif;
    font-size:7px;
    letter-spacing:1.6px;
}
.footer-copy{
    color:#71818c;
    font-size:8px;
}
@media(max-width:560px){
    .footer-inner{
        flex-direction:column;
        justify-content:center;
        text-align:center;
        gap:4px;
    }
}


/* =========================================================
   FOOTER POSITION FIX
   Keeps footer at the real bottom of the page/viewport.
   ========================================================= */

html,
body{
    min-height:100%;
}

body{
    min-height:100vh;
}

.site-shell{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.page-wrap{
    flex:1 0 auto;
}

.xeno-footer{
    flex-shrink:0;
    margin-top:auto !important;
    position:static !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
}

/* Do not let the footer cut through the background */
body{
    background-attachment:fixed;
}

.footer-inner{
    min-height:58px;
}


/* =========================================================
   DEFORMATION FIX
   Prevent the register card from stretching vertically.
   Footer remains at bottom of viewport/page.
   ========================================================= */

.site-shell{
    min-height:100vh !important;
    display:flex !important;
    flex-direction:column !important;
}

.page-wrap{
    flex:1 0 auto !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    align-content:flex-start !important;
    min-height:0 !important;
    height:auto !important;
}

.register-card{
    align-self:flex-start !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    flex:none !important;
}

.xeno-footer{
    margin-top:auto !important;
    flex-shrink:0 !important;
}


/* BACK HOME - FAR RIGHT */
.topbar{
    width:100% !important;
    padding-left:max(18px, calc((100vw - 920px)/2)) !important;
    padding-right:28px !important;
}

.topbar .nav-btn{
    margin-left:auto !important;
    margin-right:0 !important;
}

@media(max-width:560px){
    .topbar{
        padding-left:14px !important;
        padding-right:14px !important;
    }
}