/* ---------- glass dropdowns ----------
   The native <select> stays in the DOM as the source of truth and is hidden
   rather than removed; see js/select.js for why the list has to be replaced
   instead of styled. */
.xsel-native{position:absolute!important;opacity:0;pointer-events:none;
  width:0;height:0;margin:0;padding:0;border:0;overflow:hidden}

.xsel{width:100%;display:flex;align-items:center;gap:10px;
  font-family:'Source Sans 3',sans-serif;font-size:13.5px;text-align:left;
  padding:9px 12px;border-radius:10px;cursor:pointer;
  color:var(--tx);
  border:.5px solid var(--panel-line);
  background:var(--panel-bg);background-image:var(--panel-img);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--glass-top);
  transition:background .22s,border-color .22s,box-shadow .22s}
.xsel:hover{background:var(--hover)}
.xsel:focus-visible{outline:none;box-shadow:0 0 0 1.5px var(--accent)}
.xsel.on{border-color:transparent;box-shadow:0 0 0 1.5px var(--accent)}
.xsel-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xsel-caret{flex:0 0 auto;display:flex;color:var(--tx-3);
  transition:transform .28s cubic-bezier(.32,.72,0,1),color .22s}
.xsel.on .xsel-caret{transform:rotate(180deg);color:var(--accent)}

.xmenu{position:fixed;z-index:120;min-width:150px;max-width:min(420px,92vw);
  padding:6px;border-radius:14px;overflow-y:auto;
  border:.5px solid var(--panel-line);
  background:var(--panel-bg);background-image:var(--panel-img);
  -webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  box-shadow:var(--panel-shadow),inset 0 1px 0 var(--glass-top);
  opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top center;
  transition:opacity .18s ease,transform .24s cubic-bezier(.32,.72,0,1)}
.xmenu.on{opacity:1;transform:none}
.xmenu::-webkit-scrollbar{width:5px}
.xmenu::-webkit-scrollbar-track{background:transparent}
.xmenu::-webkit-scrollbar-thumb{background:var(--chip-line);border-radius:4px}
.xmenu{scrollbar-width:thin;scrollbar-color:var(--chip-line) transparent}

.xitem{display:block;width:100%;text-align:left;cursor:pointer;
  font-family:'Source Sans 3',sans-serif;font-size:13.5px;
  padding:9px 12px;border-radius:9px;border:0;background:transparent;
  color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .16s,color .16s}
.xitem:hover{background:var(--hover);color:var(--tx)}
.xitem.on{background:var(--accent);color:#fff;font-weight:500}