.creator-settings{
    max-width:900px;
    margin:auto;
}

.creator-header{
    margin-bottom:30px;
}

.creator-header h2{
    color:#fff;
    font-size:28px;
    display:flex;
    align-items:center;
    gap:12px;
}

.creator-header p{
    color:#999;
    margin-top:8px;
}

.settings-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.settings-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    background:#181818;
    border:1px solid #2d2d2d;
    border-radius:14px;
    cursor:pointer;
    transition:.25s;
}

.settings-item:hover{
    border-color:#d4af37;
    transform:translateY(-2px);
}

.settings-left{
    display:flex;
    align-items:center;
    gap:18px;
}

.settings-left>i{
    width:48px;
    height:48px;
    border-radius:12px;
    background:#d4af37;
    color:#111;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
}

.settings-left h3{
    color:#fff;
    margin:0;
    font-size:18px;
}

.settings-left span{
    color:#999;
    font-size:14px;
}

.settings-item>.fa-chevron-right{
    color:#777;
    font-size:18px;
}

.modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.75);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:9999;

}

.modal.show{

    display:flex;

}

.settings-window{

    width:650px;
    max-width:95%;

    background:#161616;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #333;

}

.settings-window-header{

    padding:20px 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #2a2a2a;

}

.settings-window-body{

    padding:25px;

}

.settings-close{

    border:none;

    background:none;

    color:#fff;

    font-size:22px;

    cursor:pointer;

}

.switch-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #2b2b2b;
}

.switch-row:last-child{
    border-bottom:none;
}

.switch-row span{
    color:#fff;
}

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    color:#ddd;
}

.form-group input,
.form-group select{
    width:100%;
    padding:12px;
    background:#222;
    border:1px solid #333;
    border-radius:10px;
    color:#fff;
}

.settings-window-body .primary-btn{
    margin-top:25px;
    width:100%;
}
.account-avatar{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-bottom:25px;

}

.account-avatar img{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #d4af37;

    margin-bottom:20px;

}

.settings-actions{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:30px;

}

.secondary-btn{

    background:#2b2b2b;

    color:#fff;

    border:none;

    padding:14px;

    border-radius:10px;

    cursor:pointer;

}

.danger-btn{

    background:#a71d2a;

    color:#fff;

    border:none;

    padding:14px;

    border-radius:10px;

    cursor:pointer;

}

.secondary-btn:hover{

    background:#3a3a3a;

}

.danger-btn:hover{

    background:#c62839;

}

.about-card{

    background:#202020;

    padding:20px;

    border-radius:12px;

    margin-bottom:20px;

}

.about-links{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.about-links a{

    color:#d4af37;

    text-decoration:none;

}

.about-links a:hover{

    text-decoration:underline;

}
/* ==========================================
   SETTINGS 2.0 POLISH
========================================== */

.account-avatar-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.settings-hint{
    padding:14px 16px;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:#aaa;
    line-height:1.5;
    margin-top:4px;
}

.settings-window-body .primary-btn i,
.settings-window-body .secondary-btn i,
.settings-window-body .danger-btn i{
    margin-right:8px;
}

@media(max-width:900px){
    .settings-window{
        width:100%;
        max-width:100%;
        max-height:88vh;
        border-radius:24px 24px 0 0;
        align-self:flex-end;
        overflow:auto;
    }

    .modal.show{
        align-items:flex-end;
    }

    .settings-window-body{
        padding:20px;
    }
}

/* ==========================================
   MOBILE SAFE AREA FOR SETTINGS WINDOWS
========================================== */
@media(max-width:900px){
    .settings-window{
        width:100% !important;
        max-width:100% !important;
        max-height:calc(100dvh - 24px - env(safe-area-inset-bottom)) !important;
        border-radius:24px 24px 0 0 !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
    }

    .settings-window-body{
        padding:20px !important;
        padding-bottom:calc(64px + env(safe-area-inset-bottom)) !important;
    }

    .settings-window-body .primary-btn,
    .settings-actions button{
        margin-bottom:calc(14px + env(safe-area-inset-bottom)) !important;
    }

    .account-avatar{
        margin-bottom:18px;
    }
}

/* ==========================================
   MOBILE / ACCOUNT AVATAR SAVE FIX
========================================== */

.account-avatar-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    align-items:center;
    margin-top:14px;
}

.account-avatar-save{
    margin:0;
}

#saveAvatarQuick:disabled,
#saveAccount:disabled{
    opacity:.65;
    cursor:not-allowed;
}

@media(max-width:900px){
    .account-avatar-actions{
        flex-direction:column;
        width:100%;
    }

    .account-avatar-actions .primary-btn,
    .account-avatar-actions .secondary-btn,
    .settings-actions .primary-btn{
        width:100%;
        justify-content:center;
        text-align:center;
        display:flex;
        align-items:center;
        gap:8px;
    }

    .settings-actions{
        position:sticky;
        bottom:0;
        z-index:5;
        padding:14px 0 calc(14px + env(safe-area-inset-bottom));
        background:linear-gradient(180deg, rgba(27,29,34,0), #1b1d22 28%, #1b1d22 100%);
    }
}

/* ==========================================
   MOBILE SETTINGS SAVE BUTTON VISIBILITY FIX
========================================== */
@media(max-width:900px){
    :root{
        --sn-mobile-player:104px;
        --sn-mobile-nav:60px;
        --sn-mobile-form-safe:calc(var(--sn-mobile-player) + var(--sn-mobile-nav) + 96px + env(safe-area-inset-bottom));
    }

    .settings-window,
    .settings-window-body{
        overflow:visible !important;
        max-height:none !important;
    }

    .settings-window-body{
        padding-bottom:calc(var(--sn-mobile-form-safe) + 28px) !important;
        margin-bottom:var(--sn-mobile-form-safe) !important;
    }

    .settings-actions,
    .account-avatar-actions{
        width:100%;
    }

    .settings-actions{
        position:sticky !important;
        bottom:calc(var(--sn-mobile-player) + var(--sn-mobile-nav) + 14px + env(safe-area-inset-bottom)) !important;
        z-index:100 !important;
        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
        padding:14px 0 18px !important;
        margin-top:20px !important;
        background:linear-gradient(180deg, rgba(27,29,34,0), #1b1d22 30%, #1b1d22 100%) !important;
    }

    .modal .settings-actions{
        bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .settings-actions button,
    .settings-actions .primary-btn,
    .account-avatar-actions .primary-btn,
    .account-avatar-actions .secondary-btn,
    #saveAvatarQuick,
    #saveAccount,
    #saveNotifications,
    #savePrivacy,
    #saveAppearance{
        width:100% !important;
        min-height:48px !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        margin-bottom:0 !important;
    }

    .account-avatar{
        margin-bottom:22px !important;
    }
}

/* ==========================================
   MOBILE SETTINGS SCROLL RESTORE
========================================== */
@media(max-width:900px){
    :root{
        --sn-mobile-player:104px;
        --sn-mobile-nav:60px;
        --sn-mobile-safe-bottom:calc(var(--sn-mobile-player) + var(--sn-mobile-nav) + 92px + env(safe-area-inset-bottom));
    }

    .settings-window,
    .settings-window-body{
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
        max-height:none !important;
    }

    .settings-window-body{
        padding-bottom:var(--sn-mobile-safe-bottom) !important;
        margin-bottom:0 !important;
    }

    .settings-actions{
        position:static !important;
        bottom:auto !important;
        z-index:auto !important;
        background:transparent !important;
        padding:16px 0 calc(34px + env(safe-area-inset-bottom)) !important;
        margin-top:22px !important;
    }

    .settings-actions button,
    .settings-actions .primary-btn,
    .account-avatar-actions .primary-btn,
    .account-avatar-actions .secondary-btn,
    #saveAvatarQuick,
    #saveAccount,
    #saveNotifications,
    #savePrivacy,
    #saveAppearance{
        width:100% !important;
        min-height:48px !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
    }
}

/* ==========================================
   MOBILE FINAL SETTINGS SCROLL FIX
========================================== */
@media(max-width:900px){
    :root{
        --sn-mobile-player:104px;
        --sn-mobile-nav:60px;
        --sn-mobile-bottom-space:calc(var(--sn-mobile-player) + var(--sn-mobile-nav) + 90px + env(safe-area-inset-bottom));
    }

    .settings-window,
    .settings-window-body{
        height:auto !important;
        max-height:none !important;
        overflow:visible !important;
        -webkit-overflow-scrolling:auto !important;
    }

    .settings-window-body{
        padding-bottom:var(--sn-mobile-bottom-space) !important;
        margin-bottom:0 !important;
    }

    .settings-actions,
    .account-avatar-actions{
        position:static !important;
        bottom:auto !important;
        z-index:auto !important;
        background:transparent !important;
        padding:16px 0 22px !important;
        margin:18px 0 0 !important;
        width:100% !important;
    }

    .modal.show .settings-window,
    .modal.show .settings-window-body{
        max-height:calc(100dvh - 24px - env(safe-area-inset-bottom)) !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
    }
}