/* ============================================================
   星海音乐 Web · layout.css（v6.26 · 从 style.css 结构化拆分）
   内容：#app 栅格 / 侧边栏 / 主区域顶栏 / 视图容器
   【v6.24】侧栏指示胶囊光线质感 v2（三层光/底缘透光/双层图标光晕）+ 玻璃挂载时悬停扁平底色退场（指示胶囊独占落位反馈）
   ⚠ 级联顺序即加载顺序（app.html 按本文件在链中的位置引入），
     调整 @media / 覆盖关系时请保持文件间相对顺序不变。
   ============================================================ */

/* ================= 布局 ================= */
#app {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100vh;
  /* 【v6.8】部分手机浏览器动态工具栏/软键盘占位后 100vh 大于可视视口，
     顶部内容被顶出可视区“看不到顶部的搜索”；dvh 随真实视口收缩（老浏览器回退 100vh） */
  height: 100dvh;
}

/* ================= 侧边栏 ================= */
.sidebar {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(14px);
  padding: 22px 14px 18px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 20px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
.logo-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.45);
}
.logo-mark .icon { width: 20px; height: 20px; }
.logo-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav { display: flex; flex-direction: column; gap: 4px; position: relative; }
/* 【v6.14】桌面侧栏长按拖动切换（配合 JS makeDragSwitcher）：
   禁选字/长按菜单；touch-action 按断点区分拖动轴（见下方规则） */
.nav {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  /* ≤920px 侧栏横排（x 轴拖动）：pan-y 保住竖滑滚屏；>920px 列布局（y 轴拖动）
     置 none 防浏览器抢走纵向 pointermove（桌面触屏场景少，滚屏靠滚轮） */
  touch-action: pan-y;
}
@media (min-width: 921px) {
  .nav { touch-action: none; }
}
/* 拖动中：外壳脱离过渡改为跟手，内层提亮（发光玻璃的“通电”态）；
   v6.23 形变（抓取挤压/速度拉伸）由 JS 写入 .ind-skin 内联 transform */
.nav.dragging #navIndicator { transition: none; }
.nav.dragging #navIndicator .ind-skin {
  background:
    radial-gradient(140% 100% at 50% -50%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.07) 40%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(90% 130% at 50% 120%, rgba(var(--lg-glow-rgb), 0.40) 0%, rgba(var(--lg-glow-rgb), 0) 60%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(var(--lg-glow-rgb), 0.18) 36%,
      rgba(var(--lg-glow-rgb), 0.34) 78%,
      rgba(var(--lg-glow-rgb), 0.44) 100%);
  box-shadow:
    0 0 12px 1px rgba(var(--lg-glow-rgb), 0.42),
    0 3px 22px rgba(var(--lg-glow-rgb), 0.52),
    0 8px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -8px 14px -8px rgba(var(--lg-glow-rgb), 0.60),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.nav-item.drag-hot { color: var(--text); }
.nav-item.drag-hot .icon { color: var(--accent); }
/* 【v6.22】侧栏滑动指示胶囊（JS 注入 #navIndicator）：发光液态玻璃。
   与手机 #bnIndicator 同配方（顶部受光穹顶 + 玻璃体积光 + 顶缘镜面高光
   + 外发光晕 + 磨砂采样），keyframes indSweep/indBreath/indJellyX/Y 定义在
   mobile.css 顶层（跨文件共用）；--lg-glow-rgb 由 glass.js 按当前玻璃样式写到宿主。
   无 JS/加载失败时自动回落静态 active 背景。
   【v6.23】双层结构：外壳 #navIndicator 只管定位平移（JS inline transform），
   内层 .ind-skin 承担视觉与果冻形变（抓取挤压/速度拉伸/落位回弹），
   并用 overflow:hidden 裁住落位流光——亮光只在胶囊表面掠过，
   不再漫到侧栏外。外发光晕是 box-shadow，不受自身 overflow 裁剪影响。 */
#navIndicator {
  position: absolute; left: 0; top: 0;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.3s, height 0.3s;
}
#navIndicator .ind-skin {
  position: absolute; inset: 0;
  border-radius: 11px;
  overflow: hidden;
  /* 【v6.24】光线质感 v2：①顶部受光穹顶（更锐的白光）②底部聚焦漫射光
     （玻璃体积内的一次次表面散射，光从底缘“透”出来）③纵向体积光三层
     叠加；外发光晕分三层（近距亮晕 + 主题主晕 + 投影分离），底缘加内
     透光（caustic）——光感从“涂了一层渐变”升级为“真的在发光” */
  background:
    radial-gradient(140% 100% at 50% -50%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(90% 130% at 50% 118%, rgba(var(--lg-glow-rgb), 0.30) 0%, rgba(var(--lg-glow-rgb), 0) 62%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(var(--lg-glow-rgb), 0.10) 36%,
      rgba(var(--lg-glow-rgb), 0.22) 78%,
      rgba(var(--lg-glow-rgb), 0.30) 100%);
  box-shadow:
    0 0 10px 1px rgba(var(--lg-glow-rgb), 0.30),
    0 2px 16px rgba(var(--lg-glow-rgb), 0.34),
    0 6px 20px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -7px 12px -7px rgba(var(--lg-glow-rgb), 0.52),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(5px) saturate(158%);
  -webkit-backdrop-filter: blur(5px) saturate(158%);
  /* 果冻形变的弹性滞后（JS 每次指针事件更新目标值 → 过渡平滑追赶） */
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 顶光呼吸：静置时玻璃内存留的光缓慢明暗（v6.24 对比略增） */
#navIndicator .ind-skin::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 40%);
  animation: indBreath 4.6s ease-in-out infinite;
  pointer-events: none;
}
/* 落位流光：切换视图时一道斜向亮光扫过胶囊（JS 注入 .land 重触发；
   被 .ind-skin overflow:hidden 裁在胶囊内，不再飘出侧栏） */
#navIndicator .ind-skin::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  /* 【v6.24】流光增强：白核提亮 + 主题色随行光带（白光扫过时拖一道
     彩色余辉，光在玻璃内“折射”出的颜色感） */
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 26%,
    rgba(var(--lg-glow-rgb), 0.24) 42%,
    rgba(255, 255, 255, 0.58) 50%,
    rgba(var(--lg-glow-rgb), 0.30) 58%,
    rgba(255, 255, 255, 0) 76%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}
#navIndicator.land .ind-skin::after {
  animation: indSweep 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
/* 【v6.23】果冻落位/回弹（JS 注入 .jelly-y/.jelly-x，keyframes 在 mobile.css） */
#navIndicator .ind-skin.jelly-y { animation: indJellyY 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; }
#navIndicator .ind-skin.jelly-x { animation: indJellyX 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; }
.nav.has-indicator .nav-item { position: relative; z-index: 1; }
.nav.has-indicator .nav-item.active { background: none; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--sub);
  font-size: 14.5px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { background: var(--hover); color: var(--text); }
  /* 【v6.24 双块冲突修复】玻璃面板已挂载时悬停扁平底色退场：
     液态跟手光斑（.lg-glow hover 态）提供悬停反馈，而这块扁平色块
     会盖在滑入的指示胶囊上（z 序在胶囊之上）——点击切换视图的瞬间
     “胶囊 + 悬停色块”两块方块叠影。仅在 .glass-on 作用域内抑制
     （无 WebGL2 回退时悬停底色照常，反馈不丢失） */
  .nav.has-indicator.glass-on .nav-item:hover { background: none; }
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-2-rgb), 0.08));
  color: var(--text);
  font-weight: 600;
}
.nav-item.active .icon { color: var(--accent); }
/* 【v6.12】侧栏激活图标微动效：上浮 + 轻光晕（与手机底部导航一致）
   【v6.22】光晕改用 --lg-glow-rgb（与指示胶囊/玻璃样式同色系）
   【v6.24】双层光晕：白核（ specular 高光点）+ 主题色弥散晕——
   图标像被胶囊里的灯照亮的实物，而不是单纯染了一层色 */
.nav-item .icon { transition: transform 0.25s, filter 0.25s; }
.nav-item.active .icon {
  transform: translateY(-1px) scale(1.05);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.38)) drop-shadow(0 0 7px rgba(var(--lg-glow-rgb), 0.55));
}
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--sub);
  background: var(--hover);
  border-radius: 10px;
  padding: 2px 6px;
}
.nav-badge:empty { display: none; }
/* 【v6.26】计数变化时的弹跳确认（JS 对比旧值后 retrigger .pop） */
.nav-badge.pop { animation: badge-pop 0.36s cubic-bezier(0.3, 1.6, 0.4, 1); }
@keyframes badge-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-badge.pop { animation: none; }
}

.sidebar-foot { margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid var(--border); }
.foot-title { font-size: 12px; color: var(--sub); margin-bottom: 8px; font-weight: 600; letter-spacing: 1px; }
.foot-text { font-size: 11.5px; line-height: 1.8; color: #5f6b85; }

/* ================= 主区域 ================= */
.main {
  overflow-y: auto;
  padding: 0 26px 30px;
  position: relative;
  /* 【v6.16】滚动槽永久预留：滚动条出现/消失不再引起页面宽度跳变
     （移动端滚动条为 overlay 式，此属性无副作用；v6.18 整页滑动
     机制已移除，保留它防御任何内容增减引起的宽度抖动） */
  scrollbar-gutter: stable;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 14px;
  /* 【v6.17】顶部搜索区满宽：负 margin 抵消 .main 的 26px 侧 padding，
     搜索条 + 平台选择拉满主区全宽（桌面/平板贴侧栏与右缘；手机端配合
     ≤768 块的 padding 归零贴屏幕左右缘），左右不再空出位置 */
  margin: 0 -26px;
  background: linear-gradient(to bottom, var(--bg) 78%, transparent);
}
.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 【v6.17】解除 640px 上限：顶栏满宽后搜索框随容器拉伸占满整行 */
  max-width: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 6px 0 14px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
/* 【v6.29.3】搜索框聚焦优化：旧版紫色实描边（accent 全饱和）+ 单层光晕
   过于生硬抢眼 —— 改为半透明描边 + 双层柔和光晕（内细外散），
   聚焦时搜索图标同步点亮，过渡 0.22s 更从容 */
.search-box:focus-within {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.12),
    0 0 18px rgba(var(--accent-rgb), 0.10);
}
.search-icon { color: var(--sub); flex: none; transition: color 0.22s; }
.search-box:focus-within .search-icon { color: var(--accent); }
.search-box input {
  flex: 1;
  height: 42px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  min-width: 0;
}
/* 【v6.29.3】搜索输入框排除全局 :focus-visible 紫环 —— 容器 .search-box
   的 :focus-within 已提供完整视觉焦点反馈（描边+光晕+图标点亮），
   input 再叠一圈 2px 紫描边 + 5px 光晕会形成双重边框（手机端点按
   聚焦时尤其明显），这就是"搜索紫色边框难看"的另一半来源 */
.search-box input:focus-visible { outline: none; box-shadow: none; }
.search-box input::placeholder { color: #5f6b85; }
.btn-primary {
  /* 【v6.26 uiverse 风格】主操作按钮升级：渐变底 + 顶缘内受光 + 悬停主题光晕 +
     斜向扫光带（hover 时白光从左扫到右，::before 裁切在按钮内） */
  position: relative;
  overflow: hidden;
  flex: none;
  height: 34px;
  padding: 0 18px;
  border: none;
  border-radius: 9px;
  background: var(--grad);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: opacity 0.18s, transform 0.12s, box-shadow 0.22s;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: 0;
  width: 34px;
  background: linear-gradient(105deg,
    transparent 0%, rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.18) 65%, transparent 100%);
  transform: skewX(-18deg) translateX(-110px);
  opacity: 0;
  pointer-events: none;
}
.btn-primary:hover { opacity: 0.96; box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-primary:hover::before { animation: btn-sweep 0.68s cubic-bezier(0.3, 0, 0.2, 1); }
.btn-primary:active { transform: scale(0.97); }
@keyframes btn-sweep {
  0% { transform: skewX(-18deg) translateX(-110px); opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: skewX(-18deg) translateX(190px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before { animation: none !important; }
}

.selectors { display: flex; gap: 8px; flex: none; }
.selectors select {
  height: 36px;
  padding: 0 26px 0 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  /* 【v6.15】去掉原生控件外观：深色模式下 Chrome 会用自己的深灰底接管
     background（用户反馈“搜索框旁边的底色还是很深”的真凶），appearance:none
     后自定义背景才完全生效；原生下拉箭头同步消失，用背景 SVG 补一枚 */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2397a3c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.selectors select:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); }
/* 【v6.26】下拉箭头悬停换主题色（第二枚 SVG）+ 键盘聚焦光环 */
.selectors select:hover {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c8cff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.selectors select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22);
  outline: none;
}
/* 【v6.15】弹层选项同步深色主题（Android Chrome 支持 option 样式） */
.selectors select option, .settings-select option { background: #131c30; color: var(--text); }

/* ================= 视图 ================= */
/* 【v6.18】整页滑动切换已移除（四轮真机反馈修不完的两类结构性缺陷，
   详见 app.js 视图切换模块头注释）。新机制：旧页瞬时隐藏，新页挂
   .view-enter 做 190ms 小位移淡入 —— transform/opacity 纯合成器动画，
   不影响布局、无 DOM 搬移、无测量；data-dir 由 JS 按导航序与布局写入
   方向（手机 r/l、桌面 d/u）。无 JS / reduced-motion 时回落瞬时切换 */
.view-enter {
  --vx: 0px;
  --vy: 0px;
  animation: view-enter 190ms cubic-bezier(0.3, 0.72, 0, 1) both;
}
.view-enter[data-dir="r"] { --vx: 14px; }
.view-enter[data-dir="l"] { --vx: -14px; }
.view-enter[data-dir="d"] { --vy: 14px; }
.view-enter[data-dir="u"] { --vy: -14px; }
@keyframes view-enter {
  from { opacity: 0; transform: translate(var(--vx), var(--vy)); }
}
@media (prefers-reduced-motion: reduce) {
  .view-enter { animation: none; }
}
.hidden { display: none !important; }

.welcome {
  margin: 9vh auto 0;
  max-width: 560px;
  text-align: center;
  color: var(--sub);
}
.welcome h2 {
  font-size: 26px;
  margin-bottom: 18px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.welcome p { line-height: 2; font-size: 14.5px; }
.welcome .sub { font-size: 12.5px; color: #5f6b85; margin-top: 8px; }

.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px 14px;
}
.view-head h2 { font-size: 20px; font-weight: 700; }

.result-meta { padding: 4px 2px 12px; color: var(--sub); font-size: 13px; }

/* 【v6.29.9】搜索态返回条：搜索时置顶，退出后隐藏。
   目的很直接 —— 以前搜索完没有任何"回到推荐歌单"的入口，
   用户只能点底部导航重进。现在给一条明确的路。 */
.search-back {
  padding: 2px 2px 12px;
  display: flex; align-items: center;
}
.search-back .btn-ghost { display: inline-flex; align-items: center; gap: 6px; }
.search-back .icon { width: 15px; height: 15px; }

/* ===================== 【v6.29.4】自绘下拉（替换原生 select） =====================
   原生 <select> 保留在 .xsel 内（.xsel-native 隐藏），作为数据源；
   .xsel-btn 触发按钮 / .xsel-menu 自绘菜单（role=listbox）。
   视觉与原生版等高同宽（36px 顶栏档 / 设置页档），各断点镜像原 select 规则。
   顶栏（.selectors 内）为「搜索框拼接条」的右段：≤920 断点去掉左圆角与左边框。 */
.xsel { position: relative; display: inline-flex; min-width: 0; }
.xsel-native { display: none !important; }

.xsel-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 36px; padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
  color: var(--text);
  font-size: 13px; font-family: inherit; line-height: 1;
  cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.xsel-btn .xsel-val {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xsel-btn .xsel-caret {
  width: 12px; height: 12px; flex: none; color: #97a3c0;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.16s;
}
.xsel-btn:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); }
.xsel-btn:hover .xsel-caret { color: var(--accent); }
.xsel-btn:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22); }
/* 打开态：描边点亮 + 箭头翻转（与站内导航一致的弹性曲线） */
.xsel.open .xsel-btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22);
}
.xsel.open .xsel-btn .xsel-caret { transform: rotate(180deg); color: var(--accent); }

/* 菜单：液态玻璃浮层（同站内弹窗语言），默认向下弹、.up 向上弹 */
.xsel-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 140;
  min-width: 100%; max-height: 320px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 5px;
  background: rgba(15, 21, 38, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.16s;
}
.xsel-menu.up {
  top: auto; bottom: calc(100% + 6px);
  transform: translateY(4px) scale(0.98);
  transform-origin: bottom left;
}
.xsel.open .xsel-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

.xsel-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px;
  border: none; background: transparent;
  border-radius: 8px;
  color: var(--text); font-size: 13px; font-family: inherit; line-height: 1.4;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s;
}
.xsel-opt:hover, .xsel-opt.hot { background: rgba(var(--accent-rgb), 0.14); }
.xsel-opt .xsel-opt-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xsel-opt .xsel-check {
  width: 14px; height: 14px; flex: none; color: var(--accent);
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.14s, transform 0.18s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.xsel-opt.sel { color: var(--accent); font-weight: 600; }
.xsel-opt.sel .xsel-check { opacity: 1; transform: scale(1); }

/* 顶栏档（搜索框拼接条右段）：与旧 .selectors select 同尺寸 */
.selectors .xsel-btn { height: 36px; }
.selectors .xsel-btn .xsel-val { max-width: 118px; }

@media (prefers-reduced-motion: reduce) {
  .xsel-menu { transition: none; }
  .xsel-btn .xsel-caret, .xsel-opt .xsel-check { transition: none; }
}