.sqhead { display:flex; align-items:center; gap:6px; padding:12px 0; }
.sqhead .menus { display:flex; align-items:center; gap:4px; }
.sqhead .menu { position:relative; }
.sqhead .menu-btn, .sqhead a.plain { display:inline-flex; align-items:center; gap:5px; background:none; border:1px solid transparent;
  border-radius:7px; padding:6px 11px; cursor:pointer; color:var(--fg, #e6ebf2); font:inherit; font-size:14px; text-decoration:none; }
.sqhead .menu-btn .caret { font-size:10px; color:var(--dim, #8a94a3); }
.sqhead .menu-btn:hover, .sqhead a.plain:hover, .sqhead .menu.open .menu-btn { background:var(--panel, #121821); border-color:var(--line, #1e2733); text-decoration:none; }
.sqhead .menu-list { position:absolute; left:0; top:calc(100% + 4px); z-index:60; min-width:180px;
  background:var(--panel, #121821); border:1px solid var(--line, #1e2733); border-radius:9px; padding:5px;
  box-shadow:var(--shadow-pop); }
.sqhead .menu-list[hidden] { display:none; }
.sqhead .menu-list a { display:block; padding:7px 11px; border-radius:6px; color:var(--fg, #e6ebf2); text-decoration:none; font-size:14px; }
.sqhead .menu-list a:hover { background:var(--bg-hover); text-decoration:none; }

.sqhead .area { position:relative; margin-left:auto; }
.sqhead .area-btn { display:inline-flex; align-items:center; gap:5px; background:none; border:1px solid transparent;
  border-radius:6px; padding:3px 8px; cursor:pointer; color:var(--dim, #8a94a3); font:inherit;
  font-size:12px; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.sqhead .area-btn i { color:var(--acc, #3b9df0); font-style:normal; }
.sqhead .area-btn .caret { font-size:9px; color:var(--faint, #5b6675); }
.sqhead .area-btn:hover, .sqhead .area.open .area-btn { border-color:var(--line, #1e2733); background:var(--panel, #121821); color:var(--fg, #e6ebf2); }
.sqhead .area-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:250px;
  background:var(--panel, #121821); border:1px solid var(--line, #1e2733); border-radius:10px; padding:6px;
  box-shadow:var(--shadow-pop); }
.sqhead .area-menu[hidden] { display:none; }
.sqhead .area-menu .umbrella { padding:4px 12px 8px; font-size:10.5px; color:var(--faint, #5b6675); letter-spacing:.06em; text-transform:uppercase; }
.sqhead .area-menu a { display:block; padding:9px 12px; border-radius:7px; text-decoration:none; color:var(--fg, #e6ebf2); }
.sqhead .area-menu a:hover { background:var(--bg-hover); text-decoration:none; }
.sqhead .area-menu a b { display:block; font-size:15px; }
.sqhead .area-menu a b i { color:var(--acc, #3b9df0); font-style:normal; }
.sqhead .area-menu a small { display:block; color:var(--dim, #8a94a3); font-size:12.5px; margin-top:1px; }
.sqhead .navtoggle { display:none; background:none; border:0; color:var(--fg, #e6ebf2); font-size:22px; line-height:1; cursor:pointer; padding:4px 6px; }
@media (max-width:760px) {
  .sqhead { position:relative; }
  .sqhead .navtoggle { display:block; }
  .sqhead .menus { display:none; position:absolute; top:100%; left:0; z-index:50; flex-direction:column; align-items:stretch; gap:0;
    min-width:240px; background:var(--panel, #121821); border:1px solid var(--line, #1e2733); border-radius:10px; padding:6px;
    box-shadow:var(--shadow-pop); }
  .sqhead .menus.open { display:flex; }
  .sqhead .menu-list { position:static; box-shadow:none; border:0; padding:0 0 4px 12px; }
  .sqhead .menu-btn, .sqhead a.plain { width:100%; justify-content:flex-start; }
}

body.has-beta-chip .sqhead { padding-left:54px; }

.sqhead.sonar .menu-btn .wm i { color:var(--acc, #3b9df0); font-style:normal; font-weight:600; }
.sqhead.sonar .menu-btn .wm { color:var(--dim, #8a94a3); font-weight:600; }
.sqhead.sonar .menu-btn .caret { font-size:16px; line-height:1; color:var(--acc, #3b9df0); margin-left:4px; }
.sqhead.sonar .menu-list a { color:var(--acc, #3b9df0); }
.sqhead.sonar a.plain { color:var(--acc, #3b9df0); }
.sqhead.sonar a.plain.signin { margin-left:auto; }