/* ═══════════════════════════════════════════════════════════════
   Aqua Sort v2 · 前台资源栏的「排序」下拉按钮
   只服务 window.YRSort（v2）写出来的那一颗按钮＋五档菜单。
   v1 是整条五颗胶囊的横栏，右边一大片空、还跟分类条叠成两层；v2 收成
   分类条右端的一颗玻璃按钮：按钮上写当前档，点开展五档菜单，选中那档带勾。
   按钮与菜单跟分类胶囊同一套玻璃语言（浅玻璃＋选中渐变蓝），四个资源页共用。
   ═══════════════════════════════════════════════════════════════ */

/* 分类条与排序按钮同一行：分类占满剩下的宽度，排序钉在右端 */
.yr-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 26px;
}
.yr-bar > .filter-bar { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }

.yr-sort { position: relative; margin-left: auto; flex: 0 0 auto; }
.yr-sort[hidden] { display: none; }

.yr-sort-btn {
  appearance: none; cursor: pointer; font: inherit;
  display: flex; align-items: center; gap: 9px;
  padding: 12px 19px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(150deg, rgba(255, 255, 255, .86), rgba(210, 232, 255, .5));
  box-shadow: 0 8px 20px rgba(26, 73, 196, .12), inset 0 1px 0 #fff;
  color: var(--azure-deep); font-size: 13px; font-weight: 800; letter-spacing: .06em;
  transition: transform .55s var(--e-spring), box-shadow .55s var(--e-expo), color .4s, background .5s var(--e-expo);
}
.yr-sort-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(26, 73, 196, .2), inset 0 1px 0 #fff; }
.yr-sort-btn:active { transform: translateY(-1px) scale(.98); }
.yr-sort-btn:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; }

.yr-sort-word { font-size: 11px; font-weight: 800; letter-spacing: .22em; color: var(--ink-faint); }
.yr-sort-cur { font-weight: 900; color: var(--azure-deep); }
.yr-sort-caret {
  width: 11px; height: 8px; color: var(--azure); flex: 0 0 auto;
  transition: transform .4s var(--e-expo), color .4s;
}
/* 菜单开着：按钮换成选中态的渐变蓝，箭头翻上去 */
.yr-sort[data-open="1"] .yr-sort-btn {
  color: #fff;
  background: linear-gradient(140deg, var(--sky), var(--azure) 58%, var(--azure-deep));
  border-color: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 30px rgba(26, 73, 196, .28), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.yr-sort[data-open="1"] .yr-sort-word { color: rgba(255, 255, 255, .78); }
.yr-sort[data-open="1"] .yr-sort-cur { color: #fff; }
.yr-sort[data-open="1"] .yr-sort-caret { transform: rotate(180deg); color: #fff; }

.yr-sort-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  min-width: 202px; display: flex; flex-direction: column; gap: 4px; padding: 8px;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .88);
  background: linear-gradient(160deg, rgba(255, 255, 255, .93), rgba(226, 240, 255, .84));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 48px rgba(26, 73, 196, .22), inset 0 1px 0 #fff;
  animation: yr-sort-in .3s var(--e-expo);
}
.yr-sort-menu[hidden] { display: none; }
@keyframes yr-sort-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.yr-sort-opt {
  appearance: none; cursor: pointer; font: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 13px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink-soft);
  font-size: 13px; font-weight: 800; letter-spacing: .04em; text-align: left;
  transition: background .3s, color .3s, transform .35s var(--e-expo);
}
.yr-sort-opt:hover { background: rgba(255, 255, 255, .78); color: var(--ink); transform: translateX(2px); }
.yr-sort-opt:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }
.yr-sort-opt[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(140deg, var(--sky), var(--azure) 58%, var(--azure-deep));
  box-shadow: 0 10px 22px rgba(26, 73, 196, .28), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.yr-sort-tick {
  width: 13px; height: 11px; flex: 0 0 auto; color: var(--azure);
  opacity: 0; transform: scale(.6);
  transition: opacity .3s, transform .4s var(--e-spring), color .3s;
}
.yr-sort-opt[aria-selected="true"] .yr-sort-tick { opacity: 1; transform: none; color: #fff; }

@media (max-width: 768px) {
  .yr-bar { gap: 10px; margin-bottom: 18px; }
  .yr-sort-btn { padding: 10px 15px; font-size: 12.5px; }
  .yr-sort-menu { min-width: 178px; }
}

@media (prefers-reduced-motion: reduce) {
  .yr-sort-btn, .yr-sort-caret, .yr-sort-opt, .yr-sort-tick { transition: none; }
  .yr-sort-btn:hover, .yr-sort-btn:active, .yr-sort-opt:hover { transform: none; }
  .yr-sort-menu { animation: none; }
}