.header_ctnr{width:100%;height:var(--headerH);padding:0px 8px;z-index:999;display:flex;align-items:center;position:fixed;left:0;top:0;background:var(--bar_bg);justify-content:center;}
*[data-theme="dark"] .header_ctnr{border-bottom:1px solid var(--semiFG_LL);}
*[data-theme="light"] .header_ctnr{box-shadow:var(--boxShadow);}
#header{width:100%;height:100%;z-index:999;display:flex;align-items:center;color:var(--bar_fg);max-width:100%;}
#header a{color:var(--fg);}
#header .gap{flex-grow:1;}
#header>*:not(:last-child){margin-right:16px;}
#header .header_btn{color:var(--bar_fg);cursor:pointer;}
#header .header_btn:hover{color:var(--bar_fg_hov);}

#header .theme{height:calc(100% - 30px);aspect-ratio:1;background:#000;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
#header .theme>.t{background:#000;height:calc(100% - 4px);aspect-ratio:1;border-radius:50%;position:absolute;top:-1px;left:-4px;}
#header .theme>.b{background:#e3f8fd;height:calc(100% - 4px);aspect-ratio:1;border-radius:50%;}
#header .theme.light>.t{animation:themeT 200ms ease-in-out;top:-10px;left:-10px;}
#header .theme.light>.b{animation:themeB 200ms ease-in-out;background:#fda;}
@keyframes themeT {0%{top:-1px;left:-4px;} 100%{top:-10px;left:-10px;}}
@keyframes themeB {0%{background:#e3f8fd;} 100%{background:#fda;}}

#header .msg{cursor:pointer;display:flex;align-items:center;position:relative;}
#header .msg:hover{color:var(--bg);}
#header .msg *{color:var(--fg_sub);}
#header .msg>svg{fill:var(--bar_fg);}
#header .msg.d::after{content:attr(data-msg);position:absolute;right:0;top:0;display:flex;justify-content:center;align-items:center;background:var(--red1);color:var(--white1);border-radius:4px;padding:1px 2px;font-size:calc(var(--fontSize)*0.7);}
#header .profile{position:relative;width:var(--headerH);height:var(--headerH);display:flex;justify-content:center;align-items:center;}
#header .profile .circle{background:var(--blue1);color:var(--black1);display:flex;width:calc(var(--headerH) - 12px);height:calc(var(--headerH) - 12px);min-width:calc(var(--headerH) - 12px);min-height:calc(var(--headerH) - 12px);border-radius:50%;justify-content:center;align-items:center;font-size:calc(var(--fontSize)* 1.2);font-weight:bold;cursor:pointer;position:relative;}
#header .profile .circle.vip{border:double 2px transparent;border-radius:80px;background-image:linear-gradient(#3af, #2190df), radial-gradient(circle at top left, #FFD700, #FFa500, #ff8c00);background-origin:border-box;background-clip:padding-box, border-box;}
#header .profile .circle.vip::after{content:'\e651';position:absolute;right:-4px;bottom:-2px;font-family:'mosfont';font-size:calc(var(--fontSize)*0.66);background:-webkit-linear-gradient(#ffc77d, #ff7300);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
#header .profile .dropdown{position:absolute;display:none;right:4px;top:calc(var(--headerH) - 1px);padding:0px;}
#header .profile.open .dropdown{display:flex;}
#header .dropdown ul{list-style:none;}
#header .dropdown>ul>li{display:flex;white-space:nowrap;cursor:pointer;}
#header .dropdown>ul>li>a{width:100%;padding:10px 20px;}
#header .dropdown>ul>li>a.aimg{padding:0px;}
#header .dropdown>ul>li>a.aimg>img:hover{border-color:var(--actFG);}
#header .dropdown>ul>li:hover{background:var(--semiFG_LL);}
#header .dropdown>ul>li:first-child{background:var(--bg);}
#header .dropdown>ul>li:not(:last-child){border-bottom:1px solid var(--semiFG_L);}
#header .dropdown .user{display:flex;align-items:center;padding:10px 20px;}
#header .dropdown .user img{width:50px;height:50px;margin-right:10px;}
#header .dropdown .user ul li{padding:4px 0px;}
#header .dropdown .user .username{font-weight:bold;text-overflow:ellipsis;max-width:160px;overflow:hidden;}
#header .dropdown .user .username:hover>a{color:var(--actFG);}
#header .dropdown .user .credits{color:var(--fg_sub);display:flex;cursor:auto;}
#header .dropdown .user .credits>.gap{min-width:20px;}
#header .dropdown .user .credits>*:not(:last-child){margin-right:8px;}
#header #btnCredits>*{color:var(--fg_sub);}
#header #btnCredits>*:hover{color:var(--actFG);}

#header .logo_ctnr{display:flex;align-items:center;justify-content:center;height:calc(100% - 2px);}
#header .logo_ctnr>img{height:calc(100% - 4px);}
#header .logo_ctnr>svg{fill:var(--white1);}

#header>.mid{flex-grow:1;display:flex;user-select:none;gap:8px;}
#header>.mid>.f{padding:0px 8px;border:1px solid rgba(0, 0, 0, 0);height:calc(var(--headerH) - 20px);line-height:calc(var(--headerH) - 16px);border-radius:4px;display:flex;align-items:center;color:var(--bar_fg);font-size:calc(var(--fontSize)*1.05);white-space:nowrap;}
#header>.mid>.f:hover{background:var(--bar_bg_hov);}

@media (max-width:1200px) {
    .header_ctnr{padding:0px 4px;}    
    #header>.mid>.f{font-size:var(--fontSize);}
}
@media (max-width:600px) {
    #header>*:not(:last-child){margin-right:2px;}
    #header>.mid{gap:0px;margin-left:4px;}
    #header>.mid>.f{padding:0px 4px;}
}