.account-page{
background:var(--bgc);
color:var(--cl1);
min-height:100vh;
}
.acct-wrap{
max-width:var(--pw2);
margin:var(--gap) auto;
padding:0 20px 80px;
}
.acct-top{
height:var(--gt2);
display:flex;
align-items:center;
margin-bottom:28px;
}
.acct-card{
background:var(--cbg);
border:var(--bt1) solid var(--cbo);
border-radius:var(--br1);
box-shadow:var(--csh);
padding:28px;
margin-bottom:16px;
}
.acct-avatar-row{
display:flex;
align-items:center;
gap:18px;
}
.acct-avatar{
width:68px;
height:68px;
border-radius:var(--br2);
overflow:hidden;
background:#0a0a0a;
border:var(--bt1) solid var(--cbo);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
position:relative;
}
.acct-avatar img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
inset:0;
border-radius:var(--br2);
}
.acct-avatar-fallback{
font-size:var(--fz1);
font-weight:700;
color:var(--cl2);
}
.acct-identity{
min-width:0;
}
.acct-name{
font-size:var(--fz1);
font-weight:700;
color:#fff;
margin-bottom:2px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.acct-email{
font-size:var(--fz4);
color:var(--cl2);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.acct-provider{
font-size:var(--fz5);
color:#555;
margin-top:4px;
font-weight:500;
}
.acct-section{
background:var(--cbg);
border:var(--bt1) solid var(--cbo);
border-radius:var(--br1);
box-shadow:var(--csh);
padding:22px 28px;
margin-bottom:16px;
}
.acct-section-title{
font-size:var(--fz5);
font-weight:700;
text-transform:uppercase;
letter-spacing:.8px;
color:var(--cl2);
margin-bottom:16px;
}
.acct-display-input{
width:100%;
background:var(--ooo);
border:2px solid #333;
border-radius:var(--br2);
padding:14px 16px;
color:var(--cl1);
font-size:var(--fz4);
font-family:inherit;
transition:border-color 100ms,box-shadow 100ms;
}
.acct-display-input:focus{
border-color:var(--ac1);
box-shadow:0 0 0 3px rgba(240,85,51,0.15);
}
.acct-display-input::placeholder{
color:#555;
}
.acct-save-btn{
background:var(--ac1);
color:#fff;
border:none;
border-radius:var(--br2);
padding:14px 24px;
font-size:var(--fz4);
font-weight:600;
font-family:inherit;
cursor:pointer;
white-space:nowrap;
transition:background 100ms,transform 100ms;
}
.acct-save-btn:hover{
background:var(--ac1-light);
}
.acct-save-btn:active{
transform:scale(0.97);
}
.acct-save-btn:disabled{
opacity:.4;
cursor:default;
transform:none;
}
.acct-field{
margin-bottom:18px;
}
.acct-field:last-child{
margin-bottom:0;
}
.acct-field-label{
display:flex;
align-items:center;
gap:8px;
font-size:var(--fz5);
font-weight:600;
color:var(--cl2);
margin-bottom:8px;
}
.acct-field-disabled{
opacity:.45;
}
.acct-input-disabled{
cursor:not-allowed;
}
.acct-profile-save{
margin-top:22px;
padding-top:18px;
}
.acct-field-hint{
font-size:var(--fz5);
color:#444;
margin-top:6px;
}
.acct-badge-soon{
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.5px;
color:#555;
background:#1a1a1a;
border:1px solid #2a2a2a;
border-radius:6px;
padding:3px 8px;
}
.acct-display-status{
font-size:var(--fz5);
margin-top:10px;
min-height:16px;
font-weight:500;
}
.acct-display-status.success{
color:#10b981;
}
.acct-display-status.error{
color:#ef4444;
}
.acct-storage-wrap{
margin-bottom:14px;
}
.acct-storage-bar{
height:8px;
background:#222;
border-radius:4px;
overflow:hidden;
margin-bottom:10px;
}
.acct-storage-fill{
height:100%;
background:var(--ac1);
border-radius:4px;
transition:width 600ms ease;
width:0;
}
.acct-storage-fill.warning{
background:var(--ac2);
}
.acct-storage-fill.danger{
background:#ef4444;
}
.acct-storage-text{
font-size:var(--fz5);
color:var(--cl2);
}
.acct-plan-row{
display:flex;
align-items:center;
gap:12px;
}
.acct-plan-badge{
display:inline-flex;
align-items:center;
gap:0;
font-size:var(--fz5);
font-weight:600;
color:var(--cl2);
background:#0a0a0a;
border:var(--bt1) solid var(--cbo);
border-radius:var(--br2);
padding:6px 14px;
}
.acct-plan-sep{
display:inline-block;
width:4px;
height:4px;
background:#444;
border-radius:50%;
margin:0 10px;
}
.acct-upgrade-btn{
display:inline-flex;
align-items:center;
padding:6px 16px;
font-size:var(--fz5);
font-weight:700;
font-family:inherit;
color:#fff;
background:var(--ac1);
border:none;
border-radius:var(--br2);
cursor:pointer;
letter-spacing:.3px;
transition:filter 120ms;
}
.acct-upgrade-btn:hover{
filter:brightness(1.15);
}
.acct-upgrade-btn:active{
filter:brightness(.9);
}
.acct-stats-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}
.acct-stat{
text-align:center;
padding:16px 8px 12px;
background:#0a0a0a;
border:var(--bt1) solid var(--cbo);
border-radius:14px;
position:relative;
overflow:hidden;
}
.acct-stat-val{
display:block;
font-size:var(--fz1);
font-weight:700;
color:#fff;
margin-bottom:2px;
}
.acct-stat-label{
display:block;
font-size:var(--fz5);
font-weight:600;
color:#555;
text-transform:uppercase;
letter-spacing:.4px;
margin-bottom:10px;
}
.acct-stat-bar{
height:4px;
background:#1a1a1a;
border-radius:2px;
overflow:hidden;
margin:0 6px;
}
.acct-stat-bar-fill{
height:100%;
border-radius:2px;
width:0;
transition:width 800ms cubic-bezier(.4,0,.2,1);
}
.acct-stat[data-color="orange"] .acct-stat-bar-fill{background:#f05533;}
.acct-stat[data-color="blue"] .acct-stat-bar-fill{background:#3b82f6;}
.acct-stat[data-color="purple"] .acct-stat-bar-fill{background:#a855f7;}
.acct-stat[data-color="green"] .acct-stat-bar-fill{background:#10b981;}
.acct-stat[data-color="red"] .acct-stat-bar-fill{background:#ef4444;}
.acct-stat[data-color="cyan"] .acct-stat-bar-fill{background:#06b6d4;}
.acct-activity-wrap{
display:flex;
flex-direction:column;
gap:0;
}
.acct-activity-row{
display:flex;
align-items:center;
gap:12px;
padding:10px 0;
}
.acct-activity-dot{
width:8px;
height:8px;
border-radius:50%;
flex-shrink:0;
}
.acct-activity-text{
flex:1;
font-size:var(--fz4);
font-weight:500;
color:#ccc;
}
.acct-activity-date{
font-size:var(--fz5);
font-weight:600;
color:#999;
white-space:nowrap;
}
.acct-placeholder-row{
display:flex;
gap:10px;
}
.acct-placeholder-btn{
flex:1;
background:#0a0a0a;
border:var(--bt1) solid var(--cbo);
border-radius:var(--br2);
padding:14px;
color:#444;
font-size:var(--fz4);
font-family:inherit;
font-weight:500;
cursor:not-allowed;
transition:border-color 100ms;
}
.acct-placeholder-note{
font-size:var(--fz5);
color:#444;
margin-top:10px;
text-align:center;
font-style:italic;
}
.acct-bottom{
margin-top:28px;
text-align:center;
}
.acct-logout-btn{
display:inline-block;
color:#ef4444;
text-decoration:none;
font-size:var(--fz4);
font-weight:600;
padding:12px 28px;
border:2px solid rgba(239,68,68,.25);
border-radius:var(--br2);
transition:background 100ms,border-color 100ms;
}
.acct-logout-btn:hover{
background:rgba(239,68,68,.08);
border-color:rgba(239,68,68,.4);
}
@media(max-width:480px){
.acct-wrap{
padding:0 16px 60px;
}
.acct-card{
padding:22px;
}
.acct-section{
padding:18px 20px;
}
.acct-stats-grid{
grid-template-columns:repeat(2,1fr);
}
.acct-avatar{
width:52px;
height:52px;
}
.acct-avatar-fallback{
font-size:var(--fz2);
}
.acct-display-name-row{
flex-direction:column;
}
.acct-save-btn{
padding:12px;
}
}.acct-session-row{
display:flex;
gap:10px;
align-items:center;
}
.acct-session-input{
flex:1;
background:var(--ooo);
border:2px solid #333;
border-radius:var(--br2);
padding:14px 16px;
color:var(--cl2);
font-size:var(--fz5);
font-family:'Courier New',monospace;
letter-spacing:.5px;
cursor:text;
-webkit-user-select:text;
user-select:text;
}
.acct-session-copy{
background:var(--ac1);
color:#fff;
border:none;
border-radius:var(--br2);
padding:14px 20px;
font-size:var(--fz5);
font-weight:700;
font-family:inherit;
cursor:pointer;
white-space:nowrap;
transition:background 100ms,transform 100ms;
}
.acct-session-copy:hover{
background:var(--ac1-light);
}
.acct-session-copy:active{
transform:scale(0.97);
}
.acct-plan-price{
font-size:var(--fz5);
font-weight:600;
color:var(--ac1);
}