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

.account-grid{

display:grid;

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

gap:24px;

margin-top:36px;

}

/* =========================================
ACCOUNT CARD
========================================= */

.account-card{

background:
rgba(
    255,
    255,
    255,
    0.03
);

border:1px solid
rgba(
    255,
    255,
    255,
    0.08
);

border-radius:24px;

padding:28px;

backdrop-filter:blur(14px);

transition:0.25s ease;

}

.account-card:hover{

transform:
translateY(-4px);

border-color:
rgba(
    124,
    92,
    255,
    0.35
);

box-shadow:
0 20px 40px
rgba(
    0,
    0,
    0,
    0.25
);

}

.account-card h2{

font-size:1.25rem;

font-weight:700;

margin-bottom:22px;

}

/* =========================================
PROFILE
========================================= */

.profile-section{

display:flex;

flex-direction:column;

align-items:center;

gap:16px;

margin-bottom:24px;

}

.profile-avatar{

width:110px;

height:110px;

border-radius:50%;

overflow:hidden;

border:3px solid
rgba(
    124,
    92,
    255,
    0.3
);

}

.profile-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

/* =========================================
ACCOUNT INFO
========================================= */

.account-info{

display:flex;

flex-direction:column;

gap:18px;

}

.info-row{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

padding-bottom:14px;

border-bottom:1px solid
rgba(
    255,
    255,
    255,
    0.06
);

}

.info-row:last-child{

border:none;

padding-bottom:0;

}

.info-row span{

color:#a5a5a5;

}

.info-row strong{

color:white;

font-weight:600;

}

/* =========================================
BIO
========================================= */

.bio-section{

margin-top:24px;

display:flex;

flex-direction:column;

gap:10px;

}

.bio-section label{

font-weight:600;

}

.bio-section textarea{

width:100%;

min-height:110px;

resize:none;

padding:16px;

border-radius:16px;

background:
rgba(
    255,
    255,
    255,
    0.03
);

border:1px solid
rgba(
    255,
    255,
    255,
    0.08
);

color:white;

font-family:inherit;

outline:none;

transition:0.25s ease;

}

.bio-section textarea:focus{

border-color:#7c5cff;

}

/* =========================================
BUTTONS
========================================= */

.account-btn{

width:100%;

display:flex;

justify-content:center;

align-items:center;

margin-top:20px;

}

.logout-btn{

width:100%;

}

/* =========================================
PLAN BOX
========================================= */

.plan-box{

background:
linear-gradient(

    135deg,

    rgba(
        124,
        92,
        255,
        0.15
    ),

    rgba(
        255,
        255,
        255,
        0.02
    )

);

border:1px solid
rgba(
    124,
    92,
    255,
    0.25
);

border-radius:20px;

padding:22px;

}

.plan-badge{

display:inline-block;

padding:6px 12px;

border-radius:999px;

background:
rgba(
    124,
    92,
    255,
    0.2
);

color:#cfc4ff;

font-size:0.8rem;

margin-bottom:12px;

}

.plan-box h3{

font-size:1.6rem;

margin-bottom:16px;

}

/* =========================================
PLAN FEATURES
========================================= */

.plan-features{

list-style:none;

padding:0;

margin:0;

}

.plan-features li{

padding:12px 0;

border-bottom:1px solid
rgba(
    255,
    255,
    255,
    0.05
);

color:#d6d6d6;

}

.plan-features li:last-child{

border:none;

}

/* =========================================
QUICK LINKS
========================================= */

.quick-links{

display:flex;

flex-direction:column;

gap:12px;

}

.quick-links a{

text-decoration:none;

color:white;

padding:14px;

border-radius:14px;

background:
rgba(
    255,
    255,
    255,
    0.03
);

border:1px solid
rgba(
    255,
    255,
    255,
    0.05
);

transition:0.25s ease;

}

.quick-links a:hover{

border-color:#7c5cff;

transform:
translateX(4px);

}

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

#verificationStatus{

color:#52d273;

}

/* =========================================
LOGOUT
========================================= */

.logout-text{

color:#b8b8b8;

line-height:1.8;

}

/* =========================================
DANGER ZONE
========================================= */

.danger-card{

border-color:
rgba(
    255,
    90,
    90,
    0.2
);

}

.danger-card h2{

color:#ff7a7a;

}

.danger-list{

margin-top:16px;

margin-bottom:20px;

padding-left:20px;

line-height:2;

}

.danger-btn{

width:100%;

padding:14px;

border:none;

border-radius:14px;

font-weight:700;

cursor:pointer;

color:white;

background:
linear-gradient(

    135deg,

    #ff5252,

    #ff7a7a

);

transition:0.25s ease;

}

.danger-btn:hover{

transform:
translateY(-2px);

}

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

@media(max-width:768px){

.account-grid{

    grid-template-columns:1fr;
}

.account-card{

    padding:22px;
}

.info-row{

    flex-direction:column;

    align-items:flex-start;
}

}

/* =========================================
ACCOUNT PAGE FINAL POLISH
========================================= */

/* PROFILE AVATAR */

.avatar-placeholder{

width:100%;

height:100%;

display:flex;

align-items:center;

justify-content:center;

font-size:3rem;

color:#d5d5d5;

}

.profile-avatar{

position:relative;

background:rgba(
    255,
    255,
    255,
    0.04
);

}

.profile-avatar img{

width:100%;

height:100%;

object-fit:cover;

border-radius:50%;

}

/* PLAN STATUS */

.plan-status{

margin-top:8px;

margin-bottom:18px;

font-size:0.9rem;

color:#58d67c;

font-weight:600;

}

/* USAGE OVERVIEW CARD */

#blueprintsUsage,
#profileUsage,
#reelUsage,
#trendUsage{

color:#ffffff;

font-weight:700;

}

/* ACCOUNT ACTIONS */

.logout-text{

margin-bottom:18px;

line-height:1.8;

color:#b7b7b7;

}

.logout-btn{

margin-top:auto;

}

/* SECURITY CARD */

#verificationStatus{

color:#58d67c;

}

/* ACCOUNT CARD HOVER */

.account-card{

transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;

}

.account-card:hover{

box-shadow:
0 20px 45px rgba(
    0,
    0,
    0,
    0.18
);

}

/* DANGER ZONE */

.danger-card{

border:1px solid rgba(
    255,
    92,
    92,
    0.18
);

}

.danger-card h2{

color:#ff7878;

}

.danger-btn{

width:100%;

}

.danger-btn:hover{

transform:
translateY(-2px);

}

/* PROFILE BUTTON */

#saveProfileBtn{

margin-top:20px;

}

/* SUBSCRIPTION CARD */

.plan-box{

position:relative;

}

.plan-badge{

letter-spacing:0.5px;

}

/* MOBILE */

@media(max-width:768px){

.profile-avatar{

    width:90px;

    height:90px;
}

.avatar-placeholder{

    font-size:2.4rem;
}

}