/* ==========================================================================
   风格实验室 · 播放器（唱片机）与固定热区
   --------------------------------------------------------------------------
   四件「家具」全部 position:fixed，坐标写死，任何风格重构都不会搬动它们：
     ① .vinyl   右上角唱片播放器    right:24px  top:14px    96×32
     ② .dock    左下角三个热区      left:24px   bottom:24px
   它们用中性深色 chrome，不跟随皮肤换色，只把「当前风格的强调色」借给
   进度环和唱片标签，保证十种风格下都读得清。
   ========================================================================== */

.vinyl,
.dock {
  --vc: #e6371e;            /* 当前风格强调色，由 JS 写到内联样式 */
  --vc-ink: #fff;
  position: fixed;
  z-index: 9999;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------- 唱机 ---------------- */
/* ---------------- 唱机：一排唱片 + 左右箭头 ---------------- */
.vinyl {
  top: 14px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px 0 4px;
  border-radius: 999px;
  background: rgba(22, 22, 24, .8);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  font: 500 11px/1 ui-monospace, "DM Mono", monospace;
  color: #f4f4f2;
}

.vinyl__nav {
  flex: 0 0 18px;
  width: 18px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #fff;
  cursor: pointer;
  opacity: .8;
  transition: opacity .2s, transform .2s;
}
.vinyl__nav:hover { opacity: 1; transform: scale(1.15); }
.vinyl__nav:active { transform: scale(.94); }
.vinyl__nav svg { width: 11px; height: 11px; fill: currentColor; }

/* 左侧「第几首 · 名字」 */
.vinyl__now {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 8px 0 4px;
  margin-right: 2px;
  border-right: 1px solid rgba(255, 255, 255, .16);
  white-space: nowrap;
}
.vinyl__now b { font-weight: 700; font-size: 11px; letter-spacing: .02em; color: #fff; }
.vinyl__now i { font-style: normal; font-size: 9px; letter-spacing: .1em; color: rgba(255, 255, 255, .5); }

/* 十张唱片：一直摊开 */
.vinyl__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vinyl__item {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
.vinyl__item:hover { transform: translateY(-2px); }
.vinyl__item:hover .vinyl__art { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.vinyl__item:active { transform: translateY(0) scale(.94); }

.vinyl__art {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16) 0 1px, transparent 1px 3px),
    #24242a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  animation: vinyl-spin 30s linear infinite;
  animation-play-state: paused;
}
.vinyl__art::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--chip, #888);
  transition: background .4s linear;
}
.vinyl.is-playing .vinyl__item[aria-current="true"] .vinyl__art { animation-play-state: running; }
.vinyl__item[aria-current="true"] .vinyl__art {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), 0 0 10px rgba(255, 255, 255, .12);
}

/* 当前那首的环形进度 */
.vinyl__ring {
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  transform: rotate(-90deg);
  overflow: visible;
  opacity: 0;
  transition: opacity .28s ease;
}
.vinyl__item[aria-current="true"] .vinyl__ring { opacity: 1; }
.vinyl__ring circle { fill: none; stroke-width: 2; }
.vinyl__ring .track { stroke: rgba(255, 255, 255, .14); }
.vinyl__ring .bar { stroke: #fff; stroke-linecap: round; }

@keyframes vinyl-spin { to { transform: rotate(360deg); } }

/* 转场中：整体置灰 + 禁止再点 */
.vinyl.is-busy { pointer-events: none; }
.vinyl.is-busy .vinyl__nav,
.vinyl.is-busy .vinyl__item { opacity: .38; filter: grayscale(1); cursor: default; }

@media (max-width: 1180px) {
  .vinyl__now { display: none; }
}

/* ---------------- 左下角固定热区 ---------------- */
.dock {
  left: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  z-index: 9999;
}
.dock__btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(22, 22, 24, .78);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.dock__btn:hover { transform: scale(1.08); background: rgba(34, 34, 38, .9); }
.dock__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dock__btn[aria-expanded="true"] { background: var(--vc); }

/* ---------------- 遮罩面板（导航 / 搜索） ---------------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12, 12, 14, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s;
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet__box {
  width: min(560px, 100%);
  max-height: min(76vh, 620px);
  overflow: auto;
  padding: 26px 26px 22px;
  border-radius: 16px;
  background: #fbfaf6;
  color: #1b1b19;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  transform: translateY(10px) scale(.985);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  font-family: "Manrope", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.sheet.is-open .sheet__box { transform: none; }
.sheet__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.sheet__title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.sheet__hint { font-size: 11px; color: #8a877d; letter-spacing: .06em; }
.sheet__close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #efeee9;
  color: #444;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.sheet__input {
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 14px;
  border: 1px solid #ddd9cd;
  border-radius: 10px;
  background: #fff;
  font: 500 14px/1.4 inherit;
  color: #1b1b19;
}
.sheet__input:focus { outline: 2px solid #1b1b19; outline-offset: 1px; }
.sheet__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.sheet__hit {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: inherit;
  text-align: left;
  font: 600 14px/1.3 inherit;
  cursor: pointer;
}
.sheet__hit:hover,
.sheet__hit:focus-visible { background: #efeee9; }
.sheet__hit small { font-weight: 500; color: #8a877d; font-size: 11px; letter-spacing: .08em; }
.sheet__hit b { font-weight: 800; }
.sheet__empty { padding: 10px 12px; font-size: 13px; color: #8a877d; }

/* ---------------- 转场时的背景补片 ---------------- */
#bgSnap {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity .9s linear;
}
#bgSnap.is-empty { display: none; }

/* 小屏：唱机缩到贴边，面板改成贴顶横滚 */
@media (max-width: 640px) {
  .vinyl { right: 12px; top: 10px; }
  .dock { left: 12px; bottom: 12px; }
  .vinyl {
    top: 56px;
    right: 10px;
    height: 28px;
    padding: 0 6px 0 2px;
  }
  .vinyl__list { gap: 3px; }
  .vinyl__nav { width: 16px; flex-basis: 16px; }
  .vinyl__item,
  .vinyl__art,
  .vinyl__ring { width: 16px; height: 16px; }
  .vinyl__art::after { inset: 4px; }
}

/* --- 切换中：每个风格一套妆 --- */
.style-stage {
  font-family: var(--display, var(--sans));
  overflow: hidden;
}
.style-stage__box { position: relative; z-index: 3; }
.style-stage::before,
.style-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.style-stage[data-theme="collage"] { background: var(--sky); color: #41423a; }
.style-stage[data-theme="collage"]::before {
  width: 44vmin; height: 44vmin; border-radius: 50%;
  background: var(--pink); opacity: .5; right: -6%; bottom: -14%;
}
.style-stage[data-theme="collage"]::after {
  width: 30vmin; height: 30vmin; border-radius: 50%;
  border: 10px solid var(--rose); opacity: .35; left: 8%; top: 12%;
}
.style-stage[data-theme="bauhaus"] { background: #ece5d3; color: #141414; }
.style-stage[data-theme="bauhaus"]::before {
  width: 54vmin; height: 54vmin; border-radius: 50%;
  background: #e6371e; left: 4%; top: 50%; transform: translateY(-50%);
}
.style-stage[data-theme="bauhaus"]::after {
  width: 24vmin; height: 24vmin; background: #1b4e9b; right: 9%; top: 10%;
}
.style-stage[data-theme="swiss"] { background: #f1f1ed; color: #141414; }
.style-stage[data-theme="swiss"]::before {
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(20,20,19,.16) 0 1px, transparent 1px 12.5%);
}
.style-stage[data-theme="swiss"]::after {
  width: 20vmin; height: 20vmin; background: #f61c13; right: 7%; top: 8%;
}
.style-stage[data-theme="pop"] { background: #ffdb4f; color: #141414; }
.style-stage[data-theme="pop"]::before {
  width: 150vmax; height: 150vmax; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, #ff547f 0 9deg, #ff7301 9deg 18deg, #00a5aa 18deg 27deg, #7b4bd8 27deg 36deg);
  opacity: .5;
}
.style-stage[data-theme="pop"] .style-stage__name {
  color: #fff; -webkit-text-stroke: 3px #141414; paint-order: stroke fill;
  text-shadow: 7px 7px 0 #141414;
}
.style-stage[data-theme="memphis"] { background: #fff4e4; color: #141414; }
.style-stage[data-theme="memphis"]::before {
  inset: auto 0 20% 0; height: 12px;
  background-image: repeating-linear-gradient(90deg, transparent 0 6px, #2f5bff 6px 18px);
  transform: rotate(-4deg); opacity: .9;
}
.style-stage[data-theme="memphis"]::after {
  width: 32vmin; height: 32vmin; background: #03a4a4;
  transform: rotate(12deg); right: 6%; top: 6%;
  box-shadow: 10px 10px 0 #ff72a2;
}
.style-stage[data-theme="y2k"] { background: #00043f; color: #c0c0c0; }
.style-stage[data-theme="y2k"]::before {
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 62% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 82% 42%, #ffe600, transparent),
    radial-gradient(1.5px 1.5px at 32% 72%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 74% 82%, #00e5ff, transparent),
    radial-gradient(1.5px 1.5px at 46% 46%, #fff, transparent);
  opacity: .9;
}
.style-stage[data-theme="y2k"] .style-stage__name {
  background: linear-gradient(90deg, #ff7a18, #ffe600, #43e97b, #38b6ff, #b56cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(3px 3px 0 #141414);
}
.style-stage[data-theme="skeuo"] { background: #633d1d; color: #4a3218; }
.style-stage[data-theme="skeuo"]::before {
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.34));
}
.style-stage[data-theme="skeuo"] .style-stage__box {
  background: #faeec3;
  background-image: repeating-linear-gradient(180deg, transparent 0 30px, rgba(120,150,190,.4) 30px 31px);
  border-radius: 10px;
  padding: 26px 40px 30px;
  box-shadow: 0 14px 30px rgba(0,0,0,.4), inset 0 1px 0 #fff;
  transform: rotate(-1.2deg);
  color: #4a3218;
}
.style-stage[data-theme="flat"] { background: #fbfbfb; color: #212121; }
.style-stage[data-theme="flat"]::before {
  inset: auto 0 0 0; height: 46%;
  background: linear-gradient(90deg, #00abd3 0 25%, #ff6352 25% 50%, #ffbc08 50% 75%, #45a151 75% 100%);
  opacity: .2;
}
.style-stage[data-theme="flat"]::after {
  width: 14vmin; height: 14vmin; background: #00abd3; right: 8%; top: 10%;
}
.style-stage[data-theme="glass"] { background: #e2e8f0; color: #2a2450; }
.style-stage[data-theme="glass"]::before {
  inset: -20%;
  background:
    radial-gradient(closest-side at 24% 30%, #ff8fe8, transparent 70%),
    radial-gradient(closest-side at 78% 26%, #ffc98a, transparent 70%),
    radial-gradient(closest-side at 30% 78%, #6fe3d0, transparent 70%),
    radial-gradient(closest-side at 76% 74%, #9b8bff, transparent 70%);
  filter: blur(34px) saturate(120%);
}
.style-stage[data-theme="glass"] .style-stage__box {
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 22px;
  padding: 26px 46px 30px;
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 22px 50px rgba(120,140,190,.28);
}
.style-stage[data-theme="ai"] { background: #f4f5f0; color: #1a1a22; }
.style-stage[data-theme="ai"]::before {
  width: 46vmin; height: 46vmin; border-radius: 50%;
  right: -6%; top: -8%;
  background: conic-gradient(from 200deg, #7aa2ff, #b78bff, #ff9ad8, #ffd0a8, #8ff0de, #7aa2ff);
  filter: blur(2px);
  opacity: .9;
}
.style-stage[data-theme="ai"]::after {
  inset: 0;
  background: radial-gradient(closest-side at 18% 82%, rgba(160,107,255,.28), transparent 70%);
}