/* ==========================================================
GTRADES-AXIS™
PROFILE PAGE
========================================================== */

:root{

--primary:#0094ff;
--secondary:#0072ff;

--background:#0d1117;

--card:#161b22;

--card2:#1d242d;

--border:#2b3542;

--text:#ffffff;

--muted:#9ca3af;

--success:#16c784;

--danger:#ea3943;

--warning:#f0b90b;

--radius:18px;

--shadow:0 12px 35px rgba(0,0,0,.35);

}

/* ==========================================================
BODY
========================================================== */

body{

margin:0;

padding:0;

background:var(--background);

color:var(--text);

font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;

}

/* ==========================================================
TOPBAR
========================================================== */

.topbar{

height:75px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 40px;

background:#111827;

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

position:sticky;

top:0;

z-index:100;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

width:48px;

height:48px;

border-radius:12px;

}

.logo h2{

margin:0;

font-size:22px;

}

.logo small{

color:var(--muted);

}

.top-actions{

display:flex;

align-items:center;

gap:15px;

}

.top-actions button{

background:var(--card);

border:none;

color:white;

cursor:pointer;

padding:12px 18px;

border-radius:12px;

transition:.25s;

}

.top-actions button:hover{

background:var(--primary);

}

/* ==========================================================
WRAPPER
========================================================== */

.profile-wrapper{

width:95%;

max-width:1600px;

margin:auto;

padding:30px 0 60px;

}

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

.profile-header{

background:var(--card);

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

margin-bottom:30px;

}

.profile-cover{

height:180px;

background:

linear-gradient(

135deg,

#0066ff,

#00bfff,

#111827

);

}

.profile-info{

display:flex;

align-items:flex-end;

padding:30px;

margin-top:-80px;

gap:30px;

}

.profile-avatar{

position:relative;

width:160px;

height:160px;

}

.profile-avatar img{

width:160px;

height:160px;

border-radius:50%;

border:6px solid var(--card);

object-fit:cover;

background:#222;

}

.profile-avatar button{

position:absolute;

right:0;

bottom:5px;

width:42px;

height:42px;

border-radius:50%;

background:var(--primary);

border:none;

color:white;

cursor:pointer;

font-size:18px;

}

.profile-details{

flex:1;

}

.profile-details h1{

margin:0;

font-size:34px;

}

.profile-details p{

margin-top:8px;

color:var(--muted);

font-size:17px;

}

/* ==========================================================
BADGES
========================================================== */

.profile-badges{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:18px;

}

.badge{

padding:10px 20px;

border-radius:50px;

font-size:13px;

font-weight:700;

letter-spacing:.5px;

}

.badge.member{

background:#1f2937;

color:#fff;

}

.badge.admin{

background:#7c3aed;

}

.badge.free{

background:#374151;

}

.badge.premium{

background:#f0b90b;

color:black;

}

.badge.active{

background:#16c784;

}

.badge.pending{

background:#ff9800;

}

.badge.suspended{

background:#ea3943;

}

/* ==========================================================
STATISTICS
========================================================== */

.stats-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-bottom:35px;

}

.stat-card{

background:var(--card);

padding:30px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

transition:.3s;

}

.stat-card:hover{

transform:translateY(-6px);

}

.stat-card i{

font-size:34px;

color:var(--primary);

margin-bottom:18px;

}

.stat-card h2{

font-size:34px;

margin:0;

}

.stat-card p{

margin-top:12px;

color:var(--muted);

font-size:15px;

}

/* ==========================================================
CONTENT
========================================================== */

.profile-content{

display:grid;

grid-template-columns:

380px

1fr;

gap:30px;

}

.profile-left,

.profile-right{

display:flex;

flex-direction:column;

gap:25px;

}
/* ==========================================================
PROFILE CARDS
========================================================== */

.profile-card{

background:var(--card);

border-radius:18px;

padding:28px;

box-shadow:var(--shadow);

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

}

.profile-card h3{

margin:0 0 25px;

font-size:20px;

display:flex;

align-items:center;

gap:10px;

color:white;

}

.profile-card h3 i{

color:var(--primary);

}

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

.membership-card{

background:

linear-gradient(
135deg,
#111827,
#1e293b,
#0f172a);

border:2px solid #2b3542;

}

.membership-box{

text-align:center;

}

.membership-box h2{

font-size:32px;

margin-bottom:15px;

}

.membership-box p{

color:var(--muted);

line-height:1.7;

margin-bottom:30px;

}

.membership-price{

display:flex;

justify-content:center;

align-items:flex-end;

gap:10px;

margin-bottom:30px;

}

.membership-price h1{

font-size:60px;

margin:0;

color:#f0b90b;

}

.membership-price span{

margin-bottom:12px;

font-size:18px;

color:#9ca3af;

}

.upgrade-btn{

display:block;

padding:16px;

border-radius:12px;

background:linear-gradient(135deg,#0072ff,#00bfff);

color:white;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.upgrade-btn:hover{

transform:translateY(-3px);

}

/* ==========================================================
GOALS
========================================================== */

.goal-item{

margin-bottom:20px;

}

.goal-item label{

display:block;

margin-bottom:8px;

font-weight:600;

color:#d1d5db;

}

.goal-item input{

width:100%;

padding:14px;

background:#0f172a;

border:1px solid #2b3542;

border-radius:10px;

color:white;

font-size:15px;

box-sizing:border-box;

}

.goal-item input:focus{

outline:none;

border-color:#0094ff;

}

.save-btn{

width:100%;

margin-top:10px;

padding:15px;

background:#0094ff;

border:none;

border-radius:10px;

color:white;

font-weight:bold;

cursor:pointer;

transition:.25s;

}

.save-btn:hover{

background:#0072ff;

}

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

.info-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 0;

border-bottom:1px solid #2b3542;

}

.info-row:last-child{

border:none;

}

.info-row span{

color:#9ca3af;

}

.info-row strong{

font-weight:600;

text-align:right;

}

.uid{

font-size:12px;

word-break:break-all;

}

/* ==========================================================
PERFORMANCE
========================================================== */

.performance-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(180px,1fr));

gap:18px;

}

.performance-item{

background:#0f172a;

padding:25px;

border-radius:14px;

text-align:center;

transition:.3s;

}

.performance-item:hover{

transform:translateY(-5px);

background:#17202d;

}

.performance-item h2{

margin:0;

font-size:30px;

color:#00bfff;

}

.performance-item p{

margin-top:12px;

color:#9ca3af;

font-size:14px;

}

/* ==========================================================
PROGRESS BARS
========================================================== */

.progress-item{

margin-bottom:28px;

}

.progress-header{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-weight:600;

}

.progress-bar{

width:100%;

height:14px;

background:#0f172a;

border-radius:50px;

overflow:hidden;

}

.progress-fill{

width:0%;

height:100%;

background:linear-gradient(
90deg,
#0094ff,
#00d4ff);

transition:width .8s;

}

/* ==========================================================
ACHIEVEMENTS
========================================================== */

.achievement-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(180px,1fr));

gap:18px;

}

.achievement{

background:#0f172a;

padding:22px;

border-radius:16px;

text-align:center;

opacity:.45;

transition:.3s;

}

.achievement.unlocked{

opacity:1;

border:2px solid #16c784;

}

.achievement i{

font-size:40px;

margin-bottom:15px;

color:#f0b90b;

}

.achievement h4{

margin:10px 0;

}

.achievement p{

font-size:13px;

color:#9ca3af;

line-height:1.5;

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

.settings-list{

display:flex;

flex-direction:column;

gap:15px;

}

.settings-btn{

width:100%;

padding:16px 20px;

border:none;

border-radius:12px;

background:#111827;

color:white;

font-size:15px;

font-weight:600;

display:flex;

align-items:center;

gap:15px;

cursor:pointer;

transition:.30s;

}

.settings-btn i{

width:22px;

font-size:18px;

color:#00bfff;

}

.settings-btn:hover{

background:#1d2938;

transform:translateX(6px);

}

.settings-btn.logout{

background:#ea3943;

}

.settings-btn.logout:hover{

background:#c62828;

}

/* ==========================================================
ACCOUNT ACTIVITY
========================================================== */

.activity-list{

display:flex;

flex-direction:column;

gap:18px;

}

.activity-item{

display:flex;

align-items:center;

gap:18px;

padding:18px;

background:#0f172a;

border-radius:14px;

transition:.30s;

}

.activity-item:hover{

background:#162131;

}

.activity-item i{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#0094ff;

color:white;

font-size:20px;

}

.activity-item strong{

display:block;

margin-bottom:6px;

}

.activity-item small{

color:#9ca3af;

font-size:14px;

}

/* ==========================================================
QUOTE CARD
========================================================== */

.motivation-card{

text-align:center;

background:

linear-gradient(
135deg,
#0066ff,
#00bfff);

color:white;

}

.motivation-card i{

font-size:45px;

margin-bottom:25px;

opacity:.7;

}

.motivation-card h2{

font-size:28px;

font-weight:700;

line-height:1.5;

margin-bottom:20px;

}

.motivation-card p{

opacity:.85;

font-size:17px;

}

/* ==========================================================
FOOTER
========================================================== */

.profile-footer{

margin-top:50px;

padding:35px;

text-align:center;

color:#9ca3af;

font-size:15px;

border-top:1px solid #2b3542;

}

/* ==========================================================
SCROLLBAR
========================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0d1117;

}

::-webkit-scrollbar-thumb{

background:#0094ff;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#00bfff;

}

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

@media(max-width:1200px){

.profile-content{

grid-template-columns:1fr;

}

.profile-left{

order:2;

}

.profile-right{

order:1;

}

}

@media(max-width:900px){

.profile-info{

flex-direction:column;

align-items:center;

text-align:center;

margin-top:-60px;

}

.profile-details{

text-align:center;

}

.profile-badges{

justify-content:center;

}

.stats-grid{

grid-template-columns:

repeat(2,1fr);

}

.performance-grid{

grid-template-columns:

repeat(2,1fr);

}

.achievement-grid{

grid-template-columns:

repeat(2,1fr);

}

}

@media(max-width:650px){

.topbar{

padding:15px;

flex-direction:column;

height:auto;

gap:15px;

}

.logo{

flex-direction:column;

text-align:center;

}

.profile-avatar img{

width:130px;

height:130px;

}

.profile-avatar{

width:130px;

height:130px;

}

.profile-details h1{

font-size:28px;

}

.stats-grid{

grid-template-columns:1fr;

}

.performance-grid{

grid-template-columns:1fr;

}

.achievement-grid{

grid-template-columns:1fr;

}

.membership-price h1{

font-size:48px;

}

.profile-card{

padding:22px;

}

}

@media(max-width:450px){

.profile-wrapper{

width:94%;

}

.profile-cover{

height:120px;

}

.profile-details h1{

font-size:24px;

}

.motivation-card h2{

font-size:22px;

}

.profile-footer{

font-size:13px;

padding:25px;

}

}