/* Compact navigation card shared by Home and account pages. */
.header,.header.scrolled,.account-header{
 width:calc(100% - 28px);max-width:720px;height:50px;min-height:50px;
 padding:0 23px;gap:26px;border:1px solid #ffffff17;border-radius:16px;
 background:linear-gradient(180deg,#14141680 0%,#0b0b0d66 100%);
 box-shadow:inset 0 1px 0 #ffffff06,0 8px 25px #0002;
 backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.header,.header.scrolled{top:14px}
.account-header{position:relative;margin:14px auto 0}
.header .brand,.account-header>a{display:flex;align-items:center;flex:none}
.header .brand img,.account-header>a img{width:23px;height:32px;object-fit:contain;border-radius:0}
.header nav,.account-header nav{
 display:flex;position:absolute;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);
 width:max-content;flex:none;min-width:0;align-items:center;
 flex-direction:row;justify-content:center;gap:10px;padding:0;
 background:none;border:0;backdrop-filter:none;
}
.header nav>a,.account-header nav>a,.header #account-nav>a,.account-header #account-nav>a{
 display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
 padding:5px 13px;min-height:29px;border:1px solid transparent;border-radius:999px;
 font-size:12px;line-height:17px;font-weight:500;color:#9c9ba3;
 transition:color .18s,background .18s,border-color .18s;
}
.header nav>a:hover,.account-header nav>a:hover,.header #account-nav>a:hover,.account-header #account-nav>a:hover{color:#f0f0f2;background:#ffffff06;border-color:#ffffff0b}
.header nav>a.nav-current{
 background:linear-gradient(#252527,#18181a);border-color:#ffffff16;color:#f1f1f3;
 box-shadow:inset 0 1px 0 #ffffff08;font-weight:600;
}
.header nav #account-nav,.account-header nav #account-nav{width:auto;margin-left:0;min-width:0}
.header .nav-actions{display:none}
.header nav .account-menu,.account-header .account-menu{width:auto;min-width:0}
.header nav .account-menu>summary,.account-header .account-menu>summary{padding:0;gap:8px;font-size:12px;font-weight:600;line-height:29px}
.account-menu .account-name{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-chevron{display:inline-flex;align-items:center;margin-left:3px;color:#e8e8eb}
.account-chevron svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .18s}
.account-menu[open] .account-chevron svg{transform:rotate(180deg)}
.header nav .account-dropdown{left:auto;right:0}
/* At the top, restore the open header and center the navigation as one group. */
.header:not(.scrolled){
 top:22px;width:min(1120px,calc(100% - 80px));max-width:1120px;height:64px;
 background:transparent;border-color:transparent;box-shadow:none;
 backdrop-filter:none;-webkit-backdrop-filter:none;
}
@media(max-width:760px){
 .header,.header.scrolled,.account-header{width:calc(100% - 24px);padding:0 15px;gap:17px;height:50px}
 .header nav,.header nav.open,.account-header nav{display:flex;gap:0}
 .header nav>a,.account-header nav>a,.header #account-nav>a,.account-header #account-nav>a{padding:5px 10px;font-size:11px}
 .account-menu .account-name{max-width:105px}
 .header nav .account-menu>summary,.account-header .account-menu>summary{font-size:11px;gap:6px}
 .header:not(.scrolled){top:12px;width:calc(100% - 24px);height:50px}
 .header:not(.scrolled) nav{gap:0}
 .header:has(.account-menu) nav,.account-header:has(.account-menu) nav{position:static;transform:none;width:auto;flex:1;justify-content:flex-end}
}
@media(max-width:380px){
 .header,.header.scrolled,.account-header{padding:0 11px;gap:10px}
 .account-menu .account-name{max-width:70px}
 .account-avatar{width:25px;height:25px}
}
/* Signed-in profiles occupy the right edge; Home and Discord stay centered. */
.header nav:has(.account-menu),.account-header nav:has(.account-menu){
 position:absolute;inset:0;transform:none;width:auto;justify-content:center;pointer-events:none;
}
.header nav:has(.account-menu)>*,.account-header nav:has(.account-menu)>*{pointer-events:auto}
.header nav #account-nav:has(.account-menu),.account-header nav #account-nav:has(.account-menu){
 position:absolute;right:23px;top:50%;transform:translateY(-50%);
}
@media(max-width:760px){
 .header nav:has(.account-menu),.account-header nav:has(.account-menu){position:static;inset:auto;flex:1;width:auto;justify-content:flex-start}
 .header nav #account-nav:has(.account-menu),.account-header nav #account-nav:has(.account-menu){position:relative;inset:auto;transform:none;margin-left:auto}
 .account-menu .account-name{max-width:70px}
}
@media(max-width:380px){.account-menu .account-name{max-width:53px}}