/*
============================================================
NOYTRIX SETTINGS V100
FINAL SETTINGS UI
============================================================
*/


/* ============================================================
   REAL SETTINGS PANEL
   ============================================================ */

#screen-profile-v56
[data-p56-panel="settings"][data-nx-settings-v100],

#screen-profile-v56
[data-p56-panel="settings"][data-nx-settings-v100="1"] {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        100% !important;

    min-height:
        0 !important;

    padding:
        4px 5px 22px !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    box-sizing:
        border-box !important;
}


/* ============================================================
   PAGE
   ============================================================ */

.nx100-page {

    width:
        100%;

    max-width:
        1180px;

    margin:
        0 auto;

    padding:
        6px 4px 24px;

    box-sizing:
        border-box;
}


/* ============================================================
   HEADER
   ============================================================ */

.nx100-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        18px;

    padding:
        2px 2px 4px;
}


.nx100-eyebrow {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #ffbd24;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .12em;
}


.nx100-header h1 {

    margin:
        0;

    color:
        #f5f8ff;

    font-size:
        27px;

    font-weight:
        820;

    letter-spacing:
        -.035em;

    line-height:
        1.1;
}


.nx100-header p {

    margin:
        7px 0 0;

    color:
        #869bb5;

    font-size:
        13px;

    font-weight:
        570;

    line-height:
        1.4;
}


.nx100-save-state {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        9px;

    padding:
        7px 10px;

    color:
        #7e95ae;

    font-size:
        10px;

    font-weight:
        700;

    border:
        1px solid #1b3c5d;

    border-radius:
        999px;

    background:
        rgba(6, 22, 42, .72);
}


.nx100-save-state span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #59748f;
}


.nx100-save-state.is-saved {

    color:
        #8be7ba;

    border-color:
        rgba(56, 177, 119, .32);
}


.nx100-save-state.is-saved span {

    background:
        #42d48d;

    box-shadow:
        0 0 10px rgba(66, 212, 141, .45);
}


/* ============================================================
   MAIN CARD
   ============================================================ */

.nx100-card {

    width:
        100%;

    margin-bottom:
        14px;

    overflow:
        hidden;

    border:
        1px solid #173d60;

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 27, 51, .97),
            rgba(5, 20, 39, .98)
        );

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


.nx100-card-head {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        16px 18px;

    border-bottom:
        1px solid rgba(35, 78, 113, .55);
}


.nx100-section-icon {

    flex:
        0 0 auto;

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    color:
        #ffbd24;

    font-size:
        15px;

    font-weight:
        900;

    border:
        1px solid rgba(255, 189, 36, .26);

    border-radius:
        9px;

    background:
        rgba(255, 189, 36, .055);
}


.nx100-card-head h2 {

    margin:
        0;

    color:
        #edf4ff;

    font-size:
        15px;

    font-weight:
        790;

    line-height:
        1.2;
}


.nx100-card-head p {

    margin:
        3px 0 0;

    color:
        #7087a1;

    font-size:
        10px;

    font-weight:
        600;
}


/* ============================================================
   SETTINGS ROW
   ============================================================ */

.nx100-row {

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        13px 18px;

    border-bottom:
        1px solid rgba(28, 65, 97, .46);

    box-sizing:
        border-box;
}


.nx100-row:last-child {

    border-bottom:
        0;
}


.nx100-row-copy {

    min-width:
        0;

    flex:
        1 1 auto;
}


.nx100-row-copy strong {

    display:
        block;

    color:
        #e8f0fb;

    font-size:
        12px;

    font-weight:
        760;

    line-height:
        1.3;
}


.nx100-row-copy span {

    display:
        block;

    max-width:
        610px;

    margin-top:
        4px;

    color:
        #7289a4;

    font-size:
        10px;

    font-weight:
        570;

    line-height:
        1.35;
}


/* ============================================================
   SELECT
   ============================================================ */

.nx100-select-wrap,

.nx100-select-slot {

    flex:
        0 0 210px;
}


.nx100-select,

.nx100-select-slot select,

.nx100-native-language {

    width:
        100% !important;

    min-width:
        180px !important;

    height:
        38px !important;

    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 34px 0 12px !important;

    color:
        #e8f1fc !important;

    font-size:
        11px !important;

    font-weight:
        690 !important;

    border:
        1px solid #24547d !important;

    border-radius:
        9px !important;

    outline:
        none !important;

    background-color:
        #081e38 !important;

    box-shadow:
        none !important;

    cursor:
        pointer !important;

    box-sizing:
        border-box !important;
}


.nx100-select:focus,

.nx100-select-slot select:focus {

    border-color:
        #408dbe !important;

    box-shadow:
        0 0 0 3px rgba(64, 141, 190, .10) !important;
}


/* ============================================================
   SWITCH
   ============================================================ */

.nx100-switch {

    flex:
        0 0 auto;

    width:
        42px;

    height:
        23px;

    position:
        relative;

    padding:
        0;

    border:
        1px solid #2a4b68;

    border-radius:
        999px;

    background:
        #0a1d30;

    cursor:
        pointer;

    transition:
        background .16s ease,
        border-color .16s ease;
}


.nx100-switch span {

    width:
        17px;

    height:
        17px;

    position:
        absolute;

    top:
        2px;

    left:
        3px;

    border-radius:
        50%;

    background:
        #758aa1;

    transition:
        transform .16s ease,
        background .16s ease;
}


.nx100-switch.is-on {

    border-color:
        #3388bd;

    background:
        rgba(26, 111, 164, .38);
}


.nx100-switch.is-on span {

    transform:
        translateX(18px);

    background:
        #59beff;

    box-shadow:
        0 0 10px rgba(89, 190, 255, .32);
}


/* ============================================================
   LEGAL
   ============================================================ */

.nx100-link-row {

    min-height:
        66px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        12px 18px;

    color:
        inherit;

    text-decoration:
        none;

    border-bottom:
        1px solid rgba(28, 65, 97, .46);

    transition:
        background .14s ease;
}


.nx100-link-row:last-child {

    border-bottom:
        0;
}


.nx100-link-row:hover {

    background:
        rgba(20, 67, 103, .14);
}


.nx100-link-row strong {

    display:
        block;

    color:
        #e7effa;

    font-size:
        12px;

    font-weight:
        750;
}


.nx100-link-row small {

    display:
        block;

    margin-top:
        4px;

    color:
        #7088a3;

    font-size:
        10px;

    font-weight:
        570;
}


.nx100-link-row b {

    color:
        #53b8f5;

    font-size:
        17px;

    font-weight:
        750;
}


/* ============================================================
   RESET
   ============================================================ */

.nx100-footer {

    min-height:
        66px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        13px 17px;

    border:
        1px solid rgba(104, 62, 69, .5);

    border-radius:
        12px;

    background:
        rgba(37, 15, 23, .18);
}


.nx100-footer strong {

    display:
        block;

    color:
        #d9e2ee;

    font-size:
        11px;

    font-weight:
        720;
}


.nx100-footer span {

    display:
        block;

    margin-top:
        3px;

    color:
        #73889e;

    font-size:
        9px;

    font-weight:
        570;
}


.nx100-reset {

    flex:
        0 0 auto;

    min-width:
        82px;

    height:
        34px;

    padding:
        0 14px;

    color:
        #f1a5ad;

    font-size:
        10px;

    font-weight:
        760;

    border:
        1px solid rgba(185, 75, 88, .48);

    border-radius:
        8px;

    background:
        rgba(110, 29, 40, .16);

    cursor:
        pointer;
}


.nx100-reset:hover {

    color:
        #ffc0c6;

    border-color:
        rgba(221, 85, 101, .72);

    background:
        rgba(132, 34, 48, .26);
}


/* ============================================================
   REDUCED MOTION — REAL SETTING
   ============================================================ */

html.nx-v100-reduce-motion *,
html.nx-v100-reduce-motion *::before,
html.nx-v100-reduce-motion *::after {

    animation-duration:
        .01ms !important;

    animation-iteration-count:
        1 !important;

    transition-duration:
        .01ms !important;

    scroll-behavior:
        auto !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .nx100-header {

        display:
            block;
    }


    .nx100-save-state {

        width:
            max-content;

        margin-top:
            12px;
    }


    .nx100-row {

        align-items:
            flex-start;

        gap:
            15px;
    }


    .nx100-select-wrap,

    .nx100-select-slot {

        flex-basis:
            150px;
    }


    .nx100-page {

        padding-left:
            0;

        padding-right:
            0;
    }

}