*{
    box-sizing:border-box;
}

:root{
    --bg:#05090d;

    --panel:
        rgba(
            12,
            23,
            32,
            .74
        );

    --panel-soft:
        rgba(
            14,
            29,
            40,
            .62
        );

    --line:
        rgba(
            101,
            210,
            255,
            .18
        );

    --line-strong:
        rgba(
            101,
            216,
            255,
            .34
        );

    --text:
        #f4f9fc;

    --muted:
        #8ea3b0;

    --cyan:
        #5dd8ff;

    --cyan2:
        #1eb8f1;

    --danger:
        #ff6f7d;
}


html,
body{
    margin:0;

    min-height:100%;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


body{
    min-height:100vh;

    overflow-x:hidden;
}


a{
    color:inherit;

    text-decoration:none;
}


button,
input,
select{
    font:inherit;
}


button{
    cursor:pointer;
}


.hidden{
    display:none !important;
}


.container{
    width:
        min(
            1260px,
            calc(
                100% - 42px
            )
        );

    margin:
        0
        auto;
}



/* BACKGROUND */

.page-bg{
    position:fixed;

    inset:0;

    z-index:-2;

    background:

        radial-gradient(
            circle at 18% 8%,
            rgba(
                22,
                178,
                235,
                .16
            ),
            transparent 33rem
        ),

        radial-gradient(
            circle at 84% 20%,
            rgba(
                11,
                96,
                145,
                .18
            ),
            transparent 35rem
        ),

        linear-gradient(
            180deg,
            #05090d,
            #071018 55%,
            #05090d
        );
}


.aurora{
    position:absolute;

    border-radius:50%;

    filter:
        blur(45px);

    opacity:.55;
}


.aurora-a{
    width:480px;
    height:480px;

    left:-160px;
    top:120px;

    background:
        rgba(
            15,
            170,
            235,
            .13
        );
}


.aurora-b{
    width:560px;
    height:560px;

    right:-200px;
    top:50px;

    background:
        rgba(
            0,
            102,
            160,
            .17
        );
}



/* HEADER */

.topbar{
    padding:
        22px
        0
        8px;

    position:sticky;

    top:0;

    z-index:50;

    background:

        linear-gradient(
            180deg,
            rgba(
                5,
                9,
                13,
                .92
            ),
            rgba(
                5,
                9,
                13,
                .48
            ),
            transparent
        );

    backdrop-filter:
        blur(16px);
}


.glass-nav{
    min-height:78px;

    padding:
        10px
        16px
        10px
        20px;

    border-radius:30px;

    display:flex;

    align-items:center;

    gap:28px;

    border:
        1px solid
        var(--line);

    background:

        linear-gradient(
            135deg,
            rgba(
                12,
                28,
                39,
                .80
            ),
            rgba(
                7,
                16,
                23,
                .74
            )
        );

    box-shadow:

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .04
        ),

        0
        25px
        70px
        rgba(
            0,
            0,
            0,
            .24
        );

    backdrop-filter:
        blur(22px)
        saturate(140%);
}


.brand{
    display:flex;

    align-items:center;

    gap:11px;

    font-weight:850;

    font-size:24px;

    letter-spacing:-.04em;
}


.logo-box{
    width:50px;
    height:50px;

    display:grid;

    place-items:center;

    border-radius:15px;

    color:#b9f1ff;

    font-weight:900;

    background:

        linear-gradient(
            135deg,
            rgba(
                23,
                184,
                240,
                .25
            ),
            rgba(
                8,
                92,
                135,
                .20
            )
        );

    border:
        1px solid
        rgba(
            87,
            213,
            255,
            .25
        );
}


.top-links{
    display:flex;

    gap:26px;

    flex:1;
}


.top-links a{
    color:#c3d0d7;

    font-size:14px;
}


.top-links a:hover{
    color:#fff;
}



/* BUTTONS */

.btn{
    min-height:46px;

    padding:
        0
        18px;

    border-radius:16px;

    border:
        1px solid
        var(--line);

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:#f3fbff;

    background:
        rgba(
            255,
            255,
            255,
            .025
        );

    font-weight:800;

    transition:
        .18s ease;
}


.btn:hover{
    transform:
        translateY(-1px);

    border-color:
        var(--line-strong);
}


.btn.primary{
    background:

        linear-gradient(
            135deg,
            rgba(
                22,
                184,
                241,
                .31
            ),
            rgba(
                20,
                139,
                185,
                .14
            )
        );

    border-color:
        rgba(
            93,
            217,
            255,
            .42
        );
}


.btn.ghost{
    background:
        rgba(
            255,
            255,
            255,
            .018
        );
}


.btn.full{
    width:100%;
}



/* LAYOUT */

.shell{
    display:grid;

    grid-template-columns:
        210px
        minmax(
            0,
            1fr
        );

    gap:18px;

    padding:
        26px
        0
        56px;
}


.glass,
.glass-soft{
    border:
        1px solid
        var(--line);

    background:

        linear-gradient(
            135deg,
            rgba(
                14,
                28,
                38,
                .78
            ),
            rgba(
                8,
                17,
                24,
                .74
            )
        );

    box-shadow:

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .035
        ),

        0
        26px
        70px
        rgba(
            0,
            0,
            0,
            .20
        );

    backdrop-filter:
        blur(22px)
        saturate(130%);
}


.glass-soft{
    background:

        linear-gradient(
            135deg,
            rgba(
                14,
                30,
                41,
                .62
            ),
            rgba(
                8,
                18,
                25,
                .58
            )
        );
}



/* SIDEBAR */

.sidebar{
    min-height:680px;

    border-radius:28px;

    padding:14px;

    display:flex;

    flex-direction:column;

    gap:8px;
}


.side-item{
    width:100%;

    height:48px;

    padding:
        0
        14px;

    border:0;

    border-radius:15px;

    background:
        transparent;

    color:#9fb1bc;

    display:flex;

    align-items:center;

    gap:11px;

    font-weight:750;

    text-align:left;
}


.side-item:hover{
    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    color:#fff;
}


.side-item.active{
    background:
        rgba(
            25,
            177,
            235,
            .13
        );

    color:#fff;

    border:
        1px solid
        rgba(
            89,
            212,
            255,
            .18
        );
}


.side-item .ico{
    width:24px;

    color:#60d7ff;

    font-size:18px;
}


.side-item.danger{
    color:#ff9aa4;
}


.sidebar-spacer{
    flex:1;
}



.content{
    min-width:0;
}



/* AUTH */

.auth-view{
    min-height:660px;

    display:grid;

    place-items:center;
}


.auth-card{
    width:
        min(
            520px,
            100%
        );

    border-radius:30px;

    padding:30px;
}


.auth-head h1{
    margin:
        4px
        0
        12px;

    font-size:42px;

    letter-spacing:-.045em;
}


.auth-head p{
    margin:0;

    color:
        var(--muted);

    line-height:1.65;
}


.eyebrow{
    color:#67d9ff;

    font-size:10px;

    font-weight:900;

    letter-spacing:.15em;
}


.auth-switch{
    margin:
        26px
        0
        20px;

    padding:5px;

    border-radius:16px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    display:grid;

    grid-template-columns:
        1fr
        1fr;
}


.switch-btn{
    height:42px;

    border:0;

    border-radius:12px;

    background:
        transparent;

    color:#8fa2ae;

    font-weight:800;
}


.switch-btn.active{
    color:#fff;

    background:
        rgba(
            21,
            174,
            233,
            .13
        );

    border:
        1px solid
        rgba(
            83,
            210,
            255,
            .18
        );
}



.auth-form,
.password-form{
    display:grid;

    gap:15px;
}


label{
    display:grid;

    gap:7px;
}


label span{
    font-size:12px;

    color:#a6b7c1;

    font-weight:700;
}


input,
select{
    width:100%;

    min-height:48px;

    padding:
        0
        14px;

    border-radius:14px;

    border:
        1px solid
        rgba(
            120,
            204,
            241,
            .16
        );

    outline:0;

    background:
        rgba(
            4,
            11,
            16,
            .72
        );

    color:#fff;
}


input:focus,
select:focus{
    border-color:
        rgba(
            87,
            216,
            255,
            .46
        );

    box-shadow:
        0
        0
        0
        3px
        rgba(
            53,
            195,
            245,
            .07
        );
}


.form-message{
    min-height:22px;

    margin-top:14px;

    color:#9db0bb;

    font-size:13px;
}


.form-message.error{
    color:#ff838f;
}


.form-message.success{
    color:#76e6b0;
}



/* HEADER INSIDE CAB */

.panel-heading{
    display:flex;

    justify-content:
        space-between;

    align-items:center;

    gap:20px;

    margin-bottom:18px;
}


.panel-heading h1{
    margin:
        3px
        0
        0;

    font-size:40px;

    letter-spacing:-.045em;
}


.account-chip{
    min-width:220px;

    border-radius:20px;

    padding:
        11px
        14px;

    display:flex;

    align-items:center;

    gap:11px;
}


.mini-avatar{
    width:44px;
    height:44px;

    display:grid;

    place-items:center;

    border-radius:12px;

    background:
        rgba(
            32,
            178,
            229,
            .16
        );

    color:#9ceaff;

    font-weight:900;
}


.account-chip strong{
    display:block;
}


.account-chip span{
    display:block;

    margin-top:3px;

    color:#8498a5;

    font-size:11px;
}



/* TABS */

.tab-page{
    display:none;
}


.tab-page.active{
    display:block;
}



/* OVERVIEW */

.hero-card{
    min-height:240px;

    border-radius:30px;

    padding:34px;

    display:grid;

    grid-template-columns:
        1fr
        auto;

    align-items:center;

    overflow:hidden;

    position:relative;
}


.hero-card h2{
    font-size:36px;

    margin:
        15px
        0
        9px;

    letter-spacing:-.04em;
}


.hero-card p{
    margin:0;

    color:
        var(--muted);

    max-width:620px;

    line-height:1.65;
}


.status-dot{
    display:inline-block;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#59e5ad;

    box-shadow:
        0
        0
        18px
        rgba(
            89,
            229,
            173,
            .7
        );
}


.status-text{
    margin-left:8px;

    color:#9fcdbb;

    font-size:12px;

    font-weight:800;
}


.hero-mark{
    font-size:88px;

    font-weight:900;

    letter-spacing:-.08em;

    color:
        rgba(
            95,
            218,
            255,
            .075
        );

    transform:
        rotate(-8deg);
}


.cards-grid{
    display:grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:14px;

    margin-top:14px;
}


.info-card{
    min-height:170px;

    border-radius:23px;

    padding:22px;
}


.card-label{
    color:#63d8ff;

    font-size:9px;

    font-weight:900;

    letter-spacing:.15em;
}


.info-card strong{
    display:block;

    margin:
        25px
        0
        9px;

    font-size:19px;
}


.info-card p{
    margin:0;

    color:
        var(--muted);

    font-size:13px;

    line-height:1.6;
}



/* COSMETICS */

.section-title-row{
    margin-bottom:18px;
}


.section-title-row h2{
    margin:
        0
        0
        8px;

    font-size:34px;
}


.section-title-row p{
    margin:0;

    color:
        var(--muted);
}


.cosmetic-grid{
    display:grid;

    gap:15px;
}


.cosmetic-card{
    min-height:270px;

    border-radius:28px;

    padding:18px;

    display:grid;

    grid-template-columns:
        300px
        1fr;

    gap:24px;
}


.preview-box{
    min-height:235px;

    border-radius:22px;

    border:
        1px solid
        rgba(
            88,
            206,
            251,
            .12
        );

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(
                25,
                164,
                217,
                .12
            ),
            transparent 50%
        ),

        #071019;

    display:grid;

    place-items:center;

    overflow:hidden;
}


.cosmetic-copy{
    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;
}


.cosmetic-copy h3{
    font-size:28px;

    margin:
        8px
        0;
}


.cosmetic-copy p{
    color:
        var(--muted);

    line-height:1.6;

    margin:
        0
        0
        18px;
}


.upload-btn{
    min-height:44px;

    padding:
        0
        15px;

    border-radius:14px;

    border:
        1px dashed
        rgba(
            94,
            215,
            255,
            .30
        );

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:#bfeeff;

    margin-bottom:10px;
}


.upload-btn input{
    display:none;
}


.cosmetic-copy select{
    margin-bottom:10px;
}



/* FAKE MODEL */

.fake-player{
    position:relative;

    width:96px;
    height:180px;
}


.fake-player .head{
    position:absolute;

    left:26px;
    top:0;

    width:44px;
    height:44px;

    border-radius:10px;

    background:#1e3442;

    border:
        1px solid
        #315568;
}


.fake-player .body{
    position:absolute;

    left:22px;
    top:52px;

    width:52px;
    height:70px;

    border-radius:10px;

    background:#172a36;

    border:
        1px solid
        #315568;
}


.fake-player .arms i,
.fake-player .legs i{
    position:absolute;

    background:#132630;

    border:
        1px solid
        #315568;

    border-radius:9px;
}


.fake-player .arms i:first-child{
    left:5px;
    top:57px;

    width:15px;
    height:66px;

    transform:
        rotate(5deg);
}


.fake-player .arms i:last-child{
    right:5px;
    top:57px;

    width:15px;
    height:66px;

    transform:
        rotate(-5deg);
}


.fake-player .legs i:first-child{
    left:25px;
    top:124px;

    width:20px;
    height:55px;
}


.fake-player .legs i:last-child{
    right:25px;
    top:124px;

    width:20px;
    height:55px;
}


.cape-shape{
    width:92px;
    height:150px;

    border-radius:
        18px
        18px
        28px
        28px;

    background:

        linear-gradient(
            180deg,
            #176a92,
            #0e3043
        );

    border:
        1px solid
        rgba(
            104,
            218,
            255,
            .30
        );

    box-shadow:
        0
        18px
        45px
        rgba(
            16,
            142,
            194,
            .16
        );
}


.chibi-orb{
    width:110px;
    height:110px;

    border-radius:50%;

    display:grid;

    place-items:center;

    font-size:38px;

    color:#71e0ff;

    background:

        radial-gradient(
            circle at 35% 30%,
            rgba(
                104,
                227,
                255,
                .38
            ),
            rgba(
                7,
                77,
                111,
                .44
            ) 48%,
            rgba(
                4,
                20,
                28,
                .76
            )
        );

    border:
        1px solid
        rgba(
            102,
            218,
            255,
            .24
        );

    box-shadow:
        0
        0
        55px
        rgba(
            50,
            192,
            241,
            .18
        );
}



/* SECURITY */

.security-card{
    border-radius:28px;

    padding:30px;
}


.security-card h2{
    margin:
        5px
        0
        10px;

    font-size:34px;
}


.security-card > div > p{
    color:
        var(--muted);

    margin:
        0
        0
        25px;
}


.password-form{
    max-width:520px;
}



/* MOBILE */

@media(max-width:900px){

    .top-links{
        display:none;
    }


    .shell{
        grid-template-columns:1fr;
    }


    .sidebar{
        min-height:auto;

        flex-direction:row;

        overflow:auto;
    }


    .sidebar-spacer{
        display:none;
    }


    .side-item{
        width:auto;

        white-space:nowrap;
    }


    .cards-grid{
        grid-template-columns:1fr;
    }


    .cosmetic-card{
        grid-template-columns:1fr;
    }

}


@media(max-width:560px){

    .container{
        width:
            min(
                100% - 20px,
                1260px
            );
    }


    .glass-nav{
        border-radius:22px;
    }


    .brand span{
        display:none;
    }


    .shell{
        padding-top:14px;
    }


    .panel-heading{
        align-items:flex-start;

        flex-direction:column;
    }


    .account-chip{
        width:100%;
    }


    .auth-card{
        padding:22px;

        border-radius:24px;
    }


    .auth-head h1{
        font-size:34px;
    }


    .hero-card{
        grid-template-columns:1fr;

        padding:24px;
    }


    .hero-mark{
        display:none;
    }


    .cosmetic-card{
        padding:13px;
    }

}