.user-menu{
position:relative;
width:var(--gx2);
height:var(--gx2);
border:var(--bw1) solid #000;
border-radius:var(--br1);
box-shadow:0 0 3px #000;
}
.user-avatar{
border-radius:var(--br1);
width:100%;
height:100%;
cursor:pointer;
object-fit:cover;
display:block;
background:#0f0f0f;
}
.user-avatar-fallback{
display:flex;
align-items:center;
justify-content:center;
background:#0f0f0f;
position:relative;
}
.user-avatar-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:13px;
font-weight:700;
color:#666;
text-transform:uppercase;
letter-spacing:0.5px;
}
.user-avatar-img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:var(--br1);
}
.user-dropdown{
position:absolute;
top:calc(100% + var(--gd2));
right:0;
background:#1a1a1a;
border:2px solid #333;
border-radius:var(--br1);
min-width:200px;
display:none;
z-index:1000;
box-shadow:0 2px 4px rgba(0,0,0,0.4);
overflow:hidden;
}
.user-menu.act .user-dropdown{
display:block;
}
.user-info{
padding:14px 18px;
border-bottom:1px solid #333;
}
.user-info:empty,
.user-name:empty,
.user-email:empty{
display:none;
}
.user-name{
font-weight:600;
color:#fff;
font-size:var(--fz2);
margin-bottom:2px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.user-email{
color:#888;
font-size:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.user-dropdown-item{
display:block;
padding:14px 18px;
color:#ccc;
text-decoration:none;
font-size:var(--fz2);
font-weight:500;
transition:background 0.15s,color 0.15s;
}
.user-dropdown-item:hover{
background:#252525;
color:#fff;
}
.user-view-toggle{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 18px;
border-bottom:1px solid #333;
cursor:pointer;
transition:background 0.15s;
}
.user-view-toggle:hover{
background:#252525;
}
.user-view-label{
display:flex;
align-items:center;
gap:10px;
color:#ccc;
font-size:var(--fz2);
font-weight:500;
}
.user-view-label svg{
width:20px;
height:20px;
fill:#888;
}
.user-view-switch{
position:relative;
width:50px;
height:26px;
background:#333;
border-radius:13px;
transition:background 0.2s;
}
.user-view-switch::after{
content:'';
position:absolute;
top:3px;
left:3px;
width:20px;
height:20px;
background:#888;
border-radius:50%;
transition:transform 0.2s,background 0.2s;
}
.user-view-toggle.list-active .user-view-switch{
background:#3b82f6;
}
.user-view-toggle.list-active .user-view-switch::after{
transform:translateX(24px);
background:#fff;
}
.user-view-icons{
display:flex;
align-items:center;
gap:6px;
margin-right:10px;
}
.user-view-icon{
width:18px;
height:18px;
fill:#666;
transition:fill 0.2s;
}
.user-view-toggle:not(.list-active) .user-view-icon.icon-grid{
fill:#fff;
}
.user-view-toggle.list-active .user-view-icon.icon-list{
fill:#fff;
}
.login-btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 16px;
background:#fff;
color:#333;
border-radius:6px;
text-decoration:none;
font-size:var(--fz2);
font-weight:500;
transition:background 0.2s;
}
.login-btn:hover{
background:#eee;
}
.login-btn svg{
width:18px;
height:18px;
}
.login-page{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:var(--ooo);
}
.login-box{
text-align:center;
padding:48px 40px;
max-width:420px;
width:100%;
background:var(--bgc);
border:2px solid var(--br1-color,#282828);
border-radius:var(--br1);
}
.login-logo{
width:auto;
height:46px;
margin-bottom:32px;
}
.login-title{
font-size:28px;
font-weight:700;
color:var(--cl1);
margin-bottom:32px;
}
.referral-gate{
margin-bottom:24px;
text-align:left;
transition:opacity 0.3s,transform 0.3s;
}
.referral-gate.success{
opacity:0;
transform:translateY(-10px);
}
.referral-label{
font-size:14px;
color:var(--cl2);
margin:0 auto 12px;
display:table;
}
.referral-input{
width:100%;
padding:14px 16px;
font-size:16px;
font-family:inherit;
background:var(--ooo);
border:2px solid var(--br1-color,#282828);
border-radius:var(--br0);
color:var(--cl1);
outline:none;
transition:border-color 0.2s,box-shadow 0.2s;
box-sizing:border-box;
}
.referral-input:focus{
border-color:var(--ac1);
box-shadow:0 0 0 3px rgba(240,85,51,0.15);
}
.referral-input.shake{
animation:shake 0.5s ease-in-out;
border-color:#e74c3c;
}
@keyframes shake{
0%,100%{transform:translateX(0);}
20%,60%{transform:translateX(-8px);}
40%,80%{transform:translateX(8px);}
}
.referral-btn{
padding:14px 24px;
font-size:16px;
display:block;
font-weight:600;
font-family:inherit;
background:var(--ac1);
color:#fff;
border:none;
border-radius:var(--br0);
cursor:pointer;
margin:20px auto 0;
transition:background 0.2s,transform 0.1s;
}
.referral-btn:hover{
background:var(--ac1-light,#ff6b4a);
}
.referral-btn:active{
transform:scale(0.98);
}
.referral-error{
display:none;
color:#e74c3c;
font-size:14px;
margin-top:12px;
text-align:center;
}
.referral-error.show{
display:block;
}
.login-buttons{
display:none;
flex-direction:column;
gap:12px;
}
.login-buttons.show{
display:flex;
}
.login-buttons.fade-in{
animation:fadeIn 0.3s ease-out;
}
@keyframes fadeIn{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}
.login-btn-large{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:14px 24px;
font-size:16px;
font-weight:600;
text-decoration:none;
border-radius:var(--br0);
transition:transform 0.1s,box-shadow 0.2s;
}
.login-btn-large:hover{
box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.login-google{
background:#fff;
color:#333;
}
.login-microsoft{
background:#2f2f2f;
color:#fff;
}
.login-yahoo{
background:#720e9e;
color:#fff;
}
.login-icon{
width:20px;
height:20px;
}