header{
padding:16px var(--gap) 0;
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
max-width:1000px;
margin:0 auto;
}
.header-right{
display:flex;
align-items:center;
gap:8px;
}
.logo{
display:flex;
align-items:center;
gap:8px;
font-size:1.6rem;
font-weight:700;
color:var(--cl1);
letter-spacing:-0.5px;
font-family:var(--ff2);
text-decoration:none;
}
.logo-img{
height:40px;
width:auto;
}
.logo:hover{
text-decoration:none;
}
.logo span{
color:var(--ac1);
}
.menu-wrap{
position:relative;
}
.menu-btn{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
background:none;
border:none;
border-radius:50%;
color:var(--cl2);
cursor:pointer;
transition:background 100ms,color 100ms;
}
.menu-btn:hover{
background:var(--bg3);
color:var(--cl1);
}
.menu-btn svg{
width:26px;
height:26px;
}
.menu-dropdown{
position:absolute;
top:50px;
right:0;
background:var(--bg2);
border:1px solid var(--bg3);
border-radius:var(--br1);
min-width:200px;
box-shadow:var(--box);
z-index:1000;
display:none;
flex-direction:column;
overflow:hidden;
}
.menu-dropdown.open{
display:flex;
}
.menu-dropdown a{
display:flex;
align-items:center;
gap:10px;
padding:10px 16px;
color:var(--cl2);
text-decoration:none;
font-size:1rem;
transition:background 100ms,color 100ms;
font-family:var(--ff2);
}
.menu-dropdown a:hover{
background:var(--bg3);
color:var(--cl1);
}
.menu-dropdown a svg{
width:18px;
height:18px;
flex-shrink:0;
opacity:0.6;
}
.login-btn{
padding:10px 28px;
background:var(--ac1);
color:#fff;
border:none;
border-radius:100px;
font-size:1rem;
font-weight:600;
font-family:var(--ff2);
cursor:pointer;
transition:opacity 150ms;
}
.login-btn:hover{
opacity:0.85;
}
.user-pill{
display:flex;
align-items:center;
gap:8px;
padding:4px 12px 4px 4px;
background:var(--bg2);
border:1px solid var(--bg3);
border-radius:100px;
cursor:pointer;
position:relative;
transition:background 100ms;
}
.user-pill:hover{
background:var(--bg3);
}
.user-pill-pic{
width:32px;
height:32px;
border-radius:50%;
background:var(--ac1);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
position:relative;
flex-shrink:0;
}
.user-pill-initial{
color:#fff;
font-size:0.85rem;
font-weight:700;
font-family:var(--ff2);
}
.user-pill-img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
}
.user-pill-name{
font-size:0.85rem;
font-weight:600;
color:var(--cl1);
font-family:var(--ff2);
white-space:nowrap;
}
.user-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
background:var(--bg2);
border:1px solid var(--bg3);
border-radius:var(--br1);
min-width:220px;
box-shadow:var(--box);
z-index:1000;
display:none;
flex-direction:column;
overflow:hidden;
}
.user-dropdown.open{
display:flex;
}
.user-dropdown-info{
padding:12px 16px;
border-bottom:1px solid var(--bg3);
}
.user-dropdown-name{
font-weight:600;
color:var(--cl1);
font-size:0.9rem;
font-family:var(--ff2);
}
.user-dropdown-email{
color:var(--cl3);
font-size:0.8rem;
margin-top:2px;
font-family:var(--ff2);
}
.user-dropdown-item{
display:flex;
align-items:center;
gap:10px;
padding:10px 16px;
color:var(--cl2);
text-decoration:none;
font-size:0.9rem;
font-family:var(--ff2);
border:none;
background:none;
width:100%;
cursor:pointer;
transition:background 100ms,color 100ms;
text-align:left;
}
.user-dropdown-item:hover{
background:var(--bg3);
color:var(--cl1);
}
.user-dropdown-item svg{
width:18px;
height:18px;
flex-shrink:0;
opacity:0.6;
}
.login-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.6);
z-index:2000;
display:none;
align-items:center;
justify-content:center;
backdrop-filter:blur(4px);
}
.login-modal.open{
display:flex;
}
.login-modal-content{
background:var(--bg2);
border:1px solid var(--bg3);
border-radius:16px;
padding:32px;
max-width:380px;
width:90%;
position:relative;
box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.login-modal-close{
position:absolute;
top:12px;
right:16px;
background:none;
border:none;
color:var(--cl3);
font-size:1.5rem;
cursor:pointer;
padding:4px;
line-height:1;
}
.login-modal-close:hover{
color:var(--cl1);
}
.login-modal-header{
text-align:center;
margin-bottom:24px;
}
.login-modal-logo{
height:48px;
margin-bottom:12px;
}
.login-modal-header h2{
font-size:1.3rem;
font-weight:700;
color:var(--cl1);
font-family:var(--ff2);
margin:0 0 6px;
}
.login-modal-header p{
color:var(--cl3);
font-size:0.9rem;
margin:0;
font-family:var(--ff2);
}
.login-modal-buttons{
display:flex;
flex-direction:column;
gap:10px;
}
.login-oauth-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 16px;
border-radius:10px;
font-size:0.95rem;
font-weight:600;
font-family:var(--ff2);
text-decoration:none;
transition:opacity 150ms,transform 100ms;
cursor:pointer;
border:1px solid var(--bg3);
}
.login-oauth-btn:hover{
opacity:0.9;
transform:translateY(-1px);
}
.login-google{
background:#fff;
color:#333;
}
.login-microsoft{
background:#2f2f2f;
color:#fff;
}
.login-yahoo{
background:#6001D2;
color:#fff;
}
.model-badge{
font-size:0.65rem;
padding:2px 8px;
border-radius:100px;
font-weight:600;
letter-spacing:0.5px;
font-family:var(--ff2);
text-transform:uppercase;
margin-left:auto;
}
.model-badge[data-model="haiku"]{
background:rgba(130,200,130,0.15);
color:#6ab06a;
}
.model-badge[data-model="sonnet"]{
background:rgba(130,160,220,0.15);
color:#7a9fd4;
}
.model-badge[data-model="opus"]{
background:rgba(180,130,220,0.15);
color:#b07ad4;
}