.account-layout{
max-width:var(--pw2);
margin:var(--gap) auto;
}
.account-main{
min-width:0;
background:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
padding:var(--gap);
overflow:hidden;
box-shadow:var(--fbs);
}
.account-auth-wrap{
display:flex;
}
.account-auth-form{
width:100%;
}
.account-form-title{
font-family:var(--ff2);
font-size:26px;
font-weight:700;
margin:0 0 6px;
color:var(--tx1);
}
.account-form-subtitle{
font-size:15px;
color:var(--tx2);
margin:0 0 24px;
}
.account-field{
margin-bottom:16px;
}
.account-field label{
display:block;
font-size:13px;
font-weight:700;
color:var(--tx2);
margin-bottom:6px;
font-family:var(--ff2);
text-transform:uppercase;
letter-spacing:.3px;
}
.account-field input[type="text"],
.account-field input[type="email"],
.account-field input[type="password"],
.account-field input[type="url"]{
width:100%;
padding:12px 16px;
background:var(--bg3);
color:var(--tx1);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br4);
font-family:var(--ff1);
font-size:16px;
outline:none;
}
.account-field input:focus{
border-color:var(--cl1);
}
.account-field input::placeholder{
color:var(--tx2);
}
.account-field-hint{
display:block;
font-size:13px;
color:var(--tx3);
margin-top:6px;
}
.account-submit{
display:inline-block;
padding:12px 30px;
background:var(--cl1);
color:var(--blk);
border:none;
border-radius:50px;
font-family:var(--ff2);
font-size:16px;
font-weight:700;
cursor:pointer;
text-decoration:none;
text-align:center;
}
.account-submit:hover{
background:var(--oh1);
}
.account-submit:active{
transform:scale(.97);
}
.account-submit:disabled{
background:var(--bc2);
color:var(--tx3);
cursor:default;
}
.account-submit:disabled:hover{
background:var(--bc2);
}
.account-submit:disabled:active{
transform:none;
}
.account-error{
background:var(--rb1);
color:var(--rd1);
padding:12px 16px;
border-radius:var(--br5);
margin-bottom:16px;
font-size:15px;
font-weight:600;
}
.account-success{
background:var(--gb1);
color:var(--gn1);
padding:12px 16px;
border-radius:var(--br5);
margin-bottom:16px;
font-size:15px;
font-weight:600;
}
.account-auth-alt{
text-align:center;
margin-top:20px;
font-size:15px;
color:var(--tx2);
}
.account-auth-alt a{
color:var(--cl1);
font-weight:700;
text-decoration:none;
}
.account-auth-alt a:hover{
text-decoration:underline;
}
.account-hp{
position:absolute;
left:-9999px;
opacity:0;
height:0;
width:0;
overflow:hidden;
}
.account-profile-header{
display:flex;
align-items:center;
gap:20px;
margin-bottom:var(--gap);
}
.account-avatar{
width:64px;
height:64px;
min-width:64px;
border-radius:50%;
background:var(--cl1);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.account-avatar span{
font-family:var(--ff2);
font-size:26px;
font-weight:800;
color:#fff;
}
.account-avatar.account-avatar-admin{
background:var(--rd1);
}
.account-avatar.account-avatar-writer{
background:var(--lnk);
}
.account-avatar.account-avatar-pic{
background-size:cover;
background-position:center;
background-color:var(--bg3);
}
.account-profile-info{
min-width:0;
}
.account-profile-name{
font-family:var(--ff2);
font-size:26px;
font-weight:700;
margin:0;
color:var(--tx1);
}
.account-profile-meta{
font-size:14px;
color:var(--tx3);
margin:4px 0 0;
}
.account-section{
margin-top:var(--gd2);
}
.account-section-title{
font-family:var(--ff2);
font-size:18px;
font-weight:700;
margin:0 0 16px;
color:var(--tx2);
text-transform:uppercase;
letter-spacing:.3px;
}
.account-divider{
margin:24px 0;
}
.account-form-actions{
display:flex;
align-items:center;
gap:var(--gd2);
margin-top:8px;
}
.account-logout-link{
color:var(--tx3);
font-size:16px;
font-family:var(--ff2);
font-weight:700;
text-decoration:none;
}
.account-logout-link:hover{
color:var(--rd1);
}
.account-username-wrap{
display:flex;
align-items:center;
background:var(--bg3);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br4);
overflow:hidden;
}
.account-username-wrap:focus-within{
border-color:var(--cl1);
}
.account-username-at{
padding:12px 0 12px 16px;
font-family:var(--ff2);
font-size:18px;
font-weight:700;
color:var(--tx3);
user-select:none;
flex-shrink:0;
}
.account-username-wrap input[type="text"]{
border:none;
background:transparent;
padding:12px 16px 12px 4px;
border-radius:0;
}
.account-username-wrap input[type="text"]:focus{
border-color:transparent;
}
.account-toggle{
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px;
}
.account-toggle-ctrl{
display:flex;
align-items:center;
cursor:pointer;
flex-shrink:0;
}
.account-toggle-ctrl input{
display:none;
}
.account-toggle-switch{
width:42px;
height:24px;
background:var(--bc2);
border-radius:50px;
position:relative;
flex-shrink:0;
transition:background .2s;
}
.account-toggle-switch::after{
content:'';
position:absolute;
top:3px;
left:3px;
width:18px;
height:18px;
background:var(--bg2);
border-radius:50%;
transition:transform .2s;
}
.account-toggle input:checked+.account-toggle-switch{
background:var(--cl1);
}
.account-toggle input:checked+.account-toggle-switch::after{
transform:translateX(18px);
}
.account-toggle-label{
font-size:14px;
color:var(--tx2);
}
@media(max-width:1100px){
.account-layout{
padding:0 var(--gap);
}
}
@media(max-width:700px){
.account-layout{
padding:0 var(--gd2);
}
.account-main{
padding:var(--gd2);
}
.account-profile-header{
flex-direction:column;
align-items:flex-start;
gap:12px;
}
.account-form-title{
font-size:22px;
}
}