/* =====================================================
   UnityMix Settings UI
   Global Settings Styling
===================================================== */


/* Main settings container */

.settings-page,
.settings-card{

background:#ffffff;
border-radius:18px;
padding:25px;

}



/* Section headers */

.settings-title{

font-size:22px;
font-weight:700;
margin-bottom:6px;

}


.settings-description{

color:#777;
font-size:14px;
margin-bottom:25px;

}



/* Settings blocks */

.settings-block{

background:#fafafa;
border-radius:16px;
padding:20px;
margin-bottom:18px;

}



.settings-block h4{

font-size:16px;
font-weight:700;
margin-bottom:15px;

}



/* Forms */

.form-control,
.form-select{

height:46px;
border-radius:12px;
border:1px solid #e2e2e2;
background:#fff;
padding:0 15px;

}


.form-control:focus,
.form-select:focus{

border-color:#00c853;
box-shadow:none;

}



/* Textarea */

textarea.form-control{

height:auto;
padding:15px;

}



/* Labels */

.form-label{

font-weight:600;
font-size:14px;
margin-bottom:8px;

}



/* Buttons */

.btn-primary{

background:#00c853;
border:none;
border-radius:50px;
padding:11px 25px;
font-weight:600;

}


.btn-primary:hover{

background:#00a844;

}


.btn-secondary{

border-radius:50px;

}



/* Cards inside settings */

.settings-card{

border:1px solid #eeeeee;

}



/* Dividers */

.settings-divider{

height:1px;
background:#eeeeee;
margin:25px 0;

}



/* =====================================================
   Switch Toggle
===================================================== */


.form-switch{

padding-left:3.2em;

}


.form-switch .form-check-input{

width:48px;
height:26px;
cursor:pointer;

}



.form-switch .form-check-input:checked{

background-color:#00c853;
border-color:#00c853;

}



/* =====================================================
   Profile Settings
===================================================== */


.profile-avatar-settings{

display:flex;
align-items:center;
gap:20px;

}


.profile-avatar-settings img{

width:90px;
height:90px;
border-radius:50%;
object-fit:cover;

}



/* Upload buttons */

.avatar-upload{

background:#f5f5f5;
border-radius:50px;
padding:10px 20px;
font-weight:600;
cursor:pointer;

}




/* =====================================================
   Tabs
===================================================== */


.settings-tabs{

display:flex;
gap:10px;
border-bottom:1px solid #eee;
margin-bottom:20px;

}


.settings-tabs a{

padding:12px 18px;
border-radius:12px 12px 0 0;
color:#666;
font-weight:600;

}


.settings-tabs a.active{

background:#00c853;
color:#fff;

}
/* =====================================================
   NOTIFICATIONS SETTINGS
===================================================== */


.notification-list{

display:flex;
flex-direction:column;
gap:12px;

}


.notification-item{

display:flex;
align-items:center;
justify-content:space-between;
background:#fafafa;
border-radius:16px;
padding:18px;

}


.notification-info{

display:flex;
align-items:center;
gap:15px;

}


.notification-icon{

width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#f1f1f1;
font-size:18px;

}


.notification-title{

font-weight:700;
font-size:15px;

}


.notification-description{

font-size:13px;
color:#777;
margin-top:3px;

}



/* =====================================================
   PRIVACY SETTINGS
===================================================== */


.privacy-option{

background:#fafafa;
padding:18px;
border-radius:16px;
margin-bottom:12px;

}


.privacy-option-header{

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

}


.privacy-option-title{

font-weight:700;

}


.privacy-option-text{

font-size:13px;
color:#777;
margin-top:5px;

}



.privacy-select{

max-width:240px;

}



/* =====================================================
   SECURITY SETTINGS
===================================================== */


.security-card{

background:#fafafa;
border-radius:18px;
padding:22px;
margin-bottom:18px;

}



.security-header{

display:flex;
align-items:center;
gap:15px;
margin-bottom:15px;

}



.security-icon{

width:45px;
height:45px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#e9fff1;
color:#00c853;

}



.security-title{

font-size:17px;
font-weight:700;

}



.security-description{

font-size:14px;
color:#777;

}




/* =====================================================
   PASSWORD FORM
===================================================== */


.password-strength{

height:6px;
border-radius:10px;
background:#eee;
overflow:hidden;
margin-top:10px;

}


.password-strength span{

display:block;
height:100%;
width:50%;
background:#00c853;

}




.password-rules{

background:#fafafa;
padding:18px;
border-radius:15px;
font-size:14px;

}


.password-rules li{

margin-bottom:8px;

}



/* =====================================================
   TWO FACTOR AUTHENTICATION
===================================================== */


.two-factor-box{

text-align:center;
background:#fafafa;
padding:30px;
border-radius:20px;

}



.two-factor-icon{

width:70px;
height:70px;
border-radius:50%;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
background:#e9fff1;
color:#00c853;

}



.qr-code{

max-width:180px;
margin:20px auto;

}




/* =====================================================
   CONNECTED ACCOUNTS
===================================================== */


.connected-account{

display:flex;
align-items:center;
justify-content:space-between;
background:#fafafa;
border-radius:16px;
padding:16px;
margin-bottom:12px;

}



.connected-left{

display:flex;
align-items:center;
gap:15px;

}



.connected-logo{

width:45px;
height:45px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
font-size:20px;

}



.connected-name{

font-weight:700;

}



.connected-status{

font-size:13px;
color:#777;

}



/* Connect button */

.connect-btn{

border-radius:50px;
padding:9px 20px;
font-weight:600;

}



.connect-btn.connected{

background:#e9fff1;
color:#00c853;

}



.connect-btn.disconnect{

background:#fff0f0;
color:#e53935;

}



/* =====================================================
   LINKED SOCIAL ACCOUNTS
===================================================== */


.social-account-grid{

display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:15px;

}



.social-account-card{

background:#fafafa;
border-radius:18px;
padding:20px;
text-align:center;

}



.social-account-card .icon{

font-size:30px;
margin-bottom:12px;

}



.social-account-card h5{

font-weight:700;
margin-bottom:8px;

}



.social-account-card p{

font-size:13px;
color:#777;

}



/* =====================================================
   EMPTY STATES
===================================================== */


.settings-empty{

text-align:center;
padding:40px 20px;

}


.settings-empty i{

font-size:45px;
color:#ccc;
margin-bottom:15px;

}


.settings-empty h4{

font-weight:700;

}


.settings-empty p{

color:#777;

}



/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:768px){


.notification-item,
.connected-account,
.privacy-option-header{

flex-direction:column;
align-items:flex-start;
gap:15px;

}



.social-account-grid{

grid-template-columns:1fr;

}



.security-card{

padding:18px;

}


}
/* =====================================================
   CREATOR HUB
   Monetization / Membership / Earnings
===================================================== */


/* Creator dashboard wrapper */

.creator-dashboard{

display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:18px;
margin-bottom:25px;

}



/* Creator stat cards */

.creator-stat-card{

background:#fafafa;
border-radius:20px;
padding:22px;

}



.creator-stat-header{

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

}



.creator-stat-icon{

width:48px;
height:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;

background:#e9fff1;
color:#00c853;

font-size:20px;

}



.creator-stat-value{

font-size:28px;
font-weight:800;
margin-top:15px;

}



.creator-stat-label{

font-size:14px;
color:#777;

}



/* =====================================================
   MEMBERSHIP PLANS
===================================================== */


.membership-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:20px;

}



.membership-card{

background:#fff;
border-radius:22px;
padding:25px;
border:1px solid #eee;
position:relative;

}



.membership-card.featured{

border:2px solid #00c853;

}



.membership-badge{

position:absolute;
top:15px;
right:15px;

background:#00c853;
color:#fff;

padding:5px 14px;
border-radius:30px;

font-size:12px;
font-weight:700;

}



.membership-title{

font-size:20px;
font-weight:800;

}



.membership-price{

font-size:32px;
font-weight:900;
margin:15px 0;

}



.membership-price span{

font-size:14px;
font-weight:500;
color:#777;

}



.membership-features{

margin:20px 0;

}



.membership-features li{

padding:8px 0;
font-size:14px;

}



.membership-features li i{

color:#00c853;
margin-right:8px;

}




/* =====================================================
   MONETIZATION SETTINGS
===================================================== */


.monetization-box{

background:#fafafa;
border-radius:20px;
padding:22px;
margin-bottom:18px;

}



.monetization-header{

display:flex;
align-items:center;
gap:15px;

}



.monetization-icon{

width:50px;
height:50px;

border-radius:50%;

background:#e9fff1;
color:#00c853;

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

font-size:22px;

}



.monetization-title{

font-size:18px;
font-weight:800;

}



.monetization-description{

font-size:14px;
color:#777;

}



/* =====================================================
   EARNINGS
===================================================== */


.earnings-card{

background:#fafafa;
border-radius:20px;
padding:25px;

}



.earnings-total{

font-size:38px;
font-weight:900;

}



.earnings-label{

color:#777;
font-size:14px;

}



.earnings-row{

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

padding:15px 0;

border-bottom:1px solid #eee;

}



.earnings-row:last-child{

border-bottom:none;

}



.earnings-name{

font-weight:600;

}



.earnings-value{

font-weight:800;

color:#00c853;

}




/* =====================================================
   PAYMENTS
===================================================== */


.payment-method{

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

background:#fafafa;

padding:18px;

border-radius:18px;

margin-bottom:12px;

}



.payment-info{

display:flex;
align-items:center;
gap:15px;

}



.payment-icon{

width:45px;
height:45px;

border-radius:50%;

background:#fff;

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

font-size:20px;

}



.payment-status{

padding:6px 15px;
border-radius:30px;

font-size:12px;
font-weight:700;

}



.payment-status.active{

background:#e9fff1;
color:#00c853;

}



.payment-status.pending{

background:#fff8e1;
color:#f9a825;

}



/* =====================================================
   WITHDRAWAL REQUEST
===================================================== */


.withdraw-box{

background:#00c853;
color:#fff;

border-radius:22px;

padding:25px;

}



.withdraw-box h3{

font-weight:800;

}



.withdraw-box p{

opacity:.9;

}



.withdraw-btn{

background:#fff;
color:#00a844;

border-radius:50px;

padding:12px 25px;

font-weight:700;

}




/* =====================================================
   AFFILIATES
===================================================== */


.affiliate-card{

background:#fafafa;

border-radius:18px;

padding:20px;

display:flex;

align-items:center;

justify-content:space-between;

}



.affiliate-count{

font-size:30px;

font-weight:900;

}



.affiliate-label{

color:#777;

}



/* =====================================================
   POINTS SYSTEM
===================================================== */


.points-balance{

text-align:center;

background:#fafafa;

border-radius:22px;

padding:35px;

}



.points-number{

font-size:45px;

font-weight:900;

color:#00c853;

}



.points-label{

color:#777;

}



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


@media(max-width:768px){


.creator-dashboard{

grid-template-columns:1fr;

}


.membership-grid{

grid-template-columns:1fr;

}


.payment-method,
.affiliate-card{

flex-direction:column;

align-items:flex-start;

gap:15px;

}


}
/* =====================================================
   MARKETPLACE SETTINGS
===================================================== */


.marketplace-card{

background:#fafafa;
border-radius:20px;
padding:22px;
margin-bottom:18px;

}



.marketplace-header{

display:flex;
align-items:center;
gap:15px;

}



.marketplace-icon{

width:50px;
height:50px;

border-radius:50%;

background:#e9fff1;
color:#00c853;

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

font-size:22px;

}



.marketplace-title{

font-size:18px;
font-weight:800;

}



.marketplace-description{

color:#777;
font-size:14px;

}



/* Product settings */

.product-settings{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:15px;

}



.product-box{

background:#fff;

border-radius:18px;

padding:20px;

border:1px solid #eee;

}



.product-box h5{

font-weight:800;

}




/* =====================================================
   FUNDING SETTINGS
===================================================== */


.funding-card{

background:#fafafa;

border-radius:20px;

padding:25px;

}



.funding-progress{

height:10px;

background:#eee;

border-radius:20px;

overflow:hidden;

margin:15px 0;

}



.funding-progress span{

display:block;

height:100%;

background:#00c853;

border-radius:20px;

}



.funding-stats{

display:flex;

justify-content:space-between;

margin-top:20px;

}



.funding-stat strong{

display:block;

font-size:22px;

font-weight:800;

}



.funding-stat small{

color:#777;

}



/* =====================================================
   DEVELOPER APPS
===================================================== */


.app-card{

display:flex;

align-items:center;

justify-content:space-between;

background:#fafafa;

padding:20px;

border-radius:18px;

margin-bottom:12px;

}



.app-info{

display:flex;

align-items:center;

gap:15px;

}



.app-icon{

width:50px;

height:50px;

border-radius:15px;

background:#e9fff1;

color:#00c853;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

}



.app-name{

font-weight:800;

}



.app-description{

font-size:13px;

color:#777;

}



/* API KEY */

.api-key-box{

background:#212121;

color:#fff;

border-radius:15px;

padding:18px;

font-family:monospace;

word-break:break-all;

}



.api-copy{

margin-top:12px;

}



/* =====================================================
   ADDRESS SETTINGS
===================================================== */


.address-card{

background:#fafafa;

border-radius:18px;

padding:20px;

margin-bottom:15px;

}



.address-header{

display:flex;

align-items:center;

justify-content:space-between;

}



.address-title{

font-weight:800;

}



.address-details{

margin-top:10px;

color:#777;

font-size:14px;

}




/* =====================================================
   ACCOUNT INFORMATION
===================================================== */


.info-download-box{

background:#fafafa;

border-radius:20px;

padding:25px;

text-align:center;

}



.info-download-box i{

font-size:45px;

color:#00c853;

margin-bottom:15px;

}



/* =====================================================
   DELETE ACCOUNT
===================================================== */


.danger-zone{

background:#fff5f5;

border-radius:22px;

padding:25px;

border:1px solid #ffd6d6;

}



.danger-zone h3{

color:#e53935;

font-weight:800;

}



.danger-zone p{

color:#777;

}



.btn-danger{

border-radius:50px;

padding:12px 25px;

font-weight:700;

background:#e53935;

border:none;

}



.btn-danger:hover{

background:#c62828;

}



/* =====================================================
   GLOBAL SETTINGS IMPROVEMENTS
===================================================== */


/* Remove old heavy shadows */

.settings-card,
.card{

box-shadow:none!important;

}



/* Rounded dropdowns */

.dropdown-menu{

border-radius:16px;

border:none;

padding:10px;

}



/* Better links */

.settings-page a{

transition:.2s;

}



/* Loading */

.settings-loading{

display:flex;

justify-content:center;

padding:40px;

}



/* =====================================================
   MOBILE FINAL POLISH
===================================================== */


@media(max-width:768px){


.settings-header{

padding:18px;

}


.quick-actions a{

width:100%;

text-align:center;

}



.settings-block,
.monetization-box,
.marketplace-card{

padding:18px;

}



.funding-stats{

flex-direction:column;

gap:15px;

}



.app-card{

flex-direction:column;

align-items:flex-start;

gap:15px;

}



.address-header{

flex-direction:column;

align-items:flex-start;

gap:10px;

}



}

/* ==========================================
   UNITYMIX SETTINGS DESIGN SYSTEM
========================================== */


/* Settings Sections */

.settings-block {
    padding: 5px 0 20px;
}


.settings-header {
    margin-bottom: 25px;
}


.settings-title {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}


.settings-description {
    margin-top: 5px;
    color: #777;
    font-size: 13px;
}



/* Sub Settings Cards */

.settings-sub-block {

    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;

}



/* Security QR / Authenticator */

.security-card {

    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;

}


.security-card h6 {

    font-weight: 600;
    margin-bottom: 15px;

}


.security-card img {

    max-width: 180px;
    height: auto;

}



/* Security Lists */

.settings-sub-block ol {

    padding-left: 20px;

}


.settings-sub-block ol li {

    margin-bottom: 10px;

}




/* Header Layout */

.card-header.with-icon {

    display:flex;
    align-items:center;
    gap:10px;

}


.card-header.with-icon .ms-auto {

    margin-left:auto;

}




/* Form Improvements */


.settings-block .form-control,
.settings-block .form-select {

    border-radius:10px;

}


.settings-block .input-group-text {

    background:transparent;

}



/* Buttons */

.settings-block .btn,
.card-footer .btn {

    border-radius:10px;

}



/* Tables */

.settings-block .table {

    margin-bottom:0;

}


.settings-block .table thead th {

    font-size:13px;
    font-weight:600;
    white-space:nowrap;

}


.settings-block .table tbody td {

    vertical-align:middle;

}




/* Session Badge */

.settings-block .badge {

    font-size:11px;
    padding:5px 10px;

}




/* Toggle Row */


.form-table-row {

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

}



/* Mobile */

@media(max-width:768px){


.card-header.with-icon {

    flex-wrap:wrap;

}


.card-header.with-icon .ms-auto {

    width:100%;
    margin-left:0;
    margin-top:15px;

}


.settings-title {

    font-size:16px;

}



.form-table-row {

    flex-direction:column;
    align-items:flex-start;
    gap:15px;

}



.settings-sub-block {

    padding:15px;

}



.table-responsive {

    font-size:13px;

}


}
/* ==========================================
   MONETIZATION NEW UI
========================================== */


.monetization-page{
    background:#fff;
}



.monetization-header{

    display:flex;
    align-items:center;
    gap:15px;

}



.monetization-hero{

    display:flex;
    gap:20px;
    align-items:center;

    background:#e9fff1;

    border-radius:22px;

    padding:25px;

    margin-bottom:25px;

}



.monetization-icon-large{

    width:80px;
    height:80px;

    border-radius:50%;

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

    background:#00c853;

    color:#fff;

}



.monetization-hero h3{

    font-size:22px;
    font-weight:800;
    margin-bottom:8px;

}



.monetization-hero p{

    color:#555;

}



.commission-box{

    margin-top:10px;

    display:inline-flex;

    gap:10px;

    background:#fff;

    padding:8px 15px;

    border-radius:50px;

}



.settings-section-title{

    font-size:18px;

    font-weight:800;

    margin:25px 0;

    display:flex;

    align-items:center;

    gap:10px;

}



.settings-section-title i{

    color:#00c853;

}



@media(max-width:768px){


.monetization-hero{

    flex-direction:column;

    text-align:center;

}


}