/* Millivibe - ダークでかっこいいディスコ */
:root {
  --grad-duration: 4s;
  --bpm-grad: none;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
body.millivibe {
  background: #0a0e1a;
  background-image: radial-gradient(ellipse at 20% 20%, rgba(79,195,247,0.12), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(183,140,242,0.10), transparent 60%), linear-gradient(180deg, #0a0e1a, #16102a);
  color: #e4e6eb;
  overflow-x: hidden;
}
body.millivibe.bpm-theme {
  background-image: var(--bpm-grad), radial-gradient(ellipse at 20% 20%, rgba(79,195,247,0.12), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(183,140,242,0.10), transparent 60%), linear-gradient(180deg, #0a0e1a, #16102a);
  background-size: cover, cover, cover, cover;
  transition: background-image 0.6s ease;
}
body.millivibe.bpm-theme[data-bpm-theme="rainbow"] {
  background-image: linear-gradient(120deg, rgba(79,195,247,0.22), rgba(183,140,242,0.22), rgba(247,143,192,0.22), rgba(255,220,120,0.22), rgba(122,240,200,0.22)), radial-gradient(ellipse at 20% 20%, rgba(79,195,247,0.12), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(183,140,242,0.10), transparent 60%), linear-gradient(180deg, #0a0e1a, #16102a);
}
@media (prefers-reduced-motion: reduce) {
  .vibe-record { animation: none !important; }
}
body.millivibe header {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
body.millivibe .tab-item {
  background: rgba(255,255,255,0.08);
  color: #9aa3c0;
  border: 1px solid rgba(255,255,255,0.08);
}
body.millivibe .tab-item.active {
  background: linear-gradient(120deg, #4fc3f7, #b48cf2, #f78fc0);
  color: #fff;
  border-color: transparent;
}
body.millivibe .vibe-section {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, opacity 0.2s ease;
  will-change: transform, opacity;
}
body.millivibe .vibe-section:hover { transform: translateY(-1px); }
body.millivibe .site-footer { color: #7a83a8; border-top-color: rgba(255,255,255,0.08); }

/* レイアウト：左ナビ＋メイン */
.vibe-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 0 16px;
}
.vibe-side-nav {
  position: sticky;
  top: 80px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.vibe-nav-item {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #9aa3c0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.vibe-nav-item:hover { background: rgba(255,255,255,0.08); transform: translateX(2px); }
.vibe-nav-item.active {
  background: linear-gradient(120deg, #4fc3f7, #b48cf2, #f78fc0);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(183,140,242,0.35);
}
.vibe-main { min-width: 0; }
.vibe-now-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
}
.vibe-nav-item { display:flex; align-items:center; gap:10px; }
.nav-ico { width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-ico .ic { width:18px; height:18px; }
.nav-label { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pinned-trigger { position:relative; }
.pinned-badge { position:absolute; top:6px; right:8px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:linear-gradient(120deg,#f78fc0,#b48cf2); color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
@media (max-width: 900px) {
  .vibe-layout { display:block; padding:0 8px; }
  .vibe-side-nav { position:fixed; top:72px; left:8px; width:64px; height:calc(100svh - 72px - 8px - 68px - env(safe-area-inset-bottom)); height:calc(100dvh - 72px - 8px - 68px - env(safe-area-inset-bottom)); max-height:calc(100svh - 72px - 8px); max-height:calc(100dvh - 72px - 8px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.15) transparent; touch-action:pan-y; display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:8px 6px; padding-bottom:calc(16px + env(safe-area-inset-bottom) + 8px); z-index:10; min-height:0; }
  .vibe-side-nav::-webkit-scrollbar { width:4px; }
  .vibe-side-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:999px; }
  .vibe-side-nav::-webkit-scrollbar-track { background:transparent; }
  .vibe-side-nav .nav-label { display:none; }
  .vibe-side-nav .nav-divider { display:none; }
  .vibe-nav-item { justify-content:center; padding:10px 6px; gap:0; flex:0 0 auto; }
  .vibe-nav-item .nav-ico { width:26px; height:26px; }
  .pinned-trigger .nav-ico { width:26px; height:26px; }
  .vibe-main { margin-left:72px; min-width:0; }
  .vibe-now-grid { grid-template-columns:1fr; }
  #serviceNav { display:none !important; }
  #btnAutoNextMenu .auto-status, #btnQualityMenu .quality-status, #btnDataSaverMenu .auto-status { display:none !important; }
}
@media (max-width: 560px) {
  .vibe-layout { display:block; padding:0 6px; }
  .vibe-side-nav { left:6px; width:58px; height:calc(100svh - 72px - 6px - 68px - env(safe-area-inset-bottom)); height:calc(100dvh - 72px - 6px - 68px - env(safe-area-inset-bottom)); max-height:calc(100svh - 72px - 6px); max-height:calc(100dvh - 72px - 6px); padding:6px 4px; padding-bottom:calc(16px + env(safe-area-inset-bottom) + 8px); }
  .vibe-main { margin-left:64px; min-width:0; }
}
@media (min-width: 901px) {
  .vibe-layout { display:block; }
  .vibe-side-nav { position:fixed; top:80px; left:max(16px, calc((100vw - 1200px)/2 + 16px)); width:220px; height:calc(100svh - 80px - 64px - env(safe-area-inset-bottom)); height:calc(100dvh - 80px - 64px - env(safe-area-inset-bottom)); max-height:calc(100svh - 80px - 16px); max-height:calc(100dvh - 80px - 16px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.15) transparent; touch-action:pan-y; z-index:10; }
  .vibe-side-nav::-webkit-scrollbar { width:4px; }
  .vibe-side-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:999px; }
  .vibe-side-nav::-webkit-scrollbar-track { background:transparent; }
  .vibe-main { margin-left:236px; min-width:0; }
}

/* レコード：大きく・より見やすく */
.vibe-record-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(79,195,247,0.08), rgba(183,140,242,0.10), rgba(247,143,192,0.08));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.vibe-record-wrap .record-info { text-align: center; }
#nowTitle {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, #fff, #e0d4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 2px 12px rgba(183,140,242,0.35);
  line-height: 1.3;
}
#nowArtist {
  font-size: 13px !important;
  font-weight: 600;
  color: #b8c0e0 !important;
}
.vibe-record {
  width: 280px; height: 280px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #111, #333, #111, #222, #111);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), inset 0 0 0 2px rgba(255,255,255,0.08);
  animation: spin 4s linear infinite;
  animation-play-state: paused;
  will-change: transform;
  flex-shrink: 0;
}
.vibe-record .record-vinyl {
  aspect-ratio: 1 / 1;
}
@media (max-width: 900px) {
  .vibe-record { width: 200px; height: 200px; max-width: 58vw; max-height: 58vw; aspect-ratio: 1 / 1; }
  .vibe-record .record-vinyl { width: 180px; height: 180px; max-width: 52vw; max-height: 52vw; aspect-ratio: 1 / 1; }
  #recordThumb { width: 72px; height: 72px; aspect-ratio: 1 / 1; }
  #nowTitle { font-size:16px !important; }
  .vibe-record-wrap { padding:12px; gap:8px; }
  .vibe-player-wrap.small { max-width: 220px; }
}
.vibe-record.playing { animation-play-state: running; }
.vibe-record .record-vinyl {
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #1a1a1a 0%, #0e0e0e 60%, #000 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.vibe-record .record-vinyl::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center, transparent 0 3px, rgba(255,255,255,0.04) 3px 4px);
}
#recordThumb {
  width: 110px; height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.6);
  z-index: 1;
}
.record-center {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #333;
  z-index: 2;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* プレイヤー：小さく（240x135） */
.vibe-player-wrap {
  position: relative;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}
.vibe-player-wrap.small {
  max-width: 240px;
  aspect-ratio: 16 / 9;
}
.vibe-player-wrap iframe, #vibePlayer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* コントロールバー */
.vibe-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
}
.vibe-controls button {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.10);
  color: #e4e6eb;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.vibe-controls button:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.vibe-controls button.play-main {
  width: 48px; height: 48px;
  background: linear-gradient(120deg, #4fc3f7, #b48cf2, #f78fc0);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(183,140,242,0.4);
}
.vibe-controls button.active {
  background: linear-gradient(120deg, #4fc3f7, #b48cf2);
  color: #fff;
}
/* AUTOMIX: OFFでも横幅を確保（文字潰れ防止） */
#btnAutomix {
  width: auto !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800;
}
.vibe-controls #btnAutomix.active {
  background: linear-gradient(120deg, #f78fc0, #b48cf2);
  color: #fff;
  font-weight: 800;
  width: auto;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 11px;
}
#btnAutomix[data-on="0"] {
  background: rgba(255,255,255,0.10);
  color: #9aa3c0;
}
#btnAutoNext.active {
  background: linear-gradient(120deg,#4fc3f7,#b48cf2) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 4px 14px rgba(183,140,242,0.35);
}
#btnAutoNext.active .auto-icon { background:rgba(255,255,255,0.20) !important; }
#btnQualityMenu.active {
  background: linear-gradient(120deg,#4fc3f7,#b48cf2) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 4px 14px rgba(183,140,242,0.35);
}
#btnQualityMenu.active .quality-status { background:rgba(255,255,255,0.20) !important; color:#fff !important; border-color:transparent !important; }
#btnDataSaverMenu.active {
  background: linear-gradient(120deg,#7af0c8,#4fc3f7) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 4px 14px rgba(122,240,200,0.35);
}
#btnDataSaverMenu.active .auto-status { background:rgba(255,255,255,0.20) !important; color:#fff !important; border-color:transparent !important; }
@media (max-width: 900px) {
  #btnDataSaverMenu .auto-status { display:none !important; }
}
.vibe-controls input[type="range"] { accent-color: #b48cf2; }
.vol-vertical { flex-shrink:0; }
.vol-vertical input[type="range"] { touch-action: none; }
.vol-popup-wrap { position:relative; }
.vol-popup {
  display:none;
  opacity:0;
  transform:translateX(-50%) translateY(6px) scale(0.98);
  transition:opacity 0.16s ease, transform 0.16s ease;
}
.vol-popup.open {
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
}
.sheet-vol-wrap { position:relative; }
.sheet-vol-popup {
  display:none;
  opacity:0;
  transform:translateY(6px) scale(0.98);
  transition:opacity 0.16s ease, transform 0.16s ease;
}
.sheet-vol-popup.open {
  opacity:1;
  transform:translateY(0) scale(1);
}
/* 音量スライダーのつまみを●に */
input[type="range"]#volSlider:not([orient="vertical"]),
input[type="range"]#sheetVolSlider:not([orient="vertical"]) {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  outline: none;
}
input[type="range"][orient="vertical"] {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 6px;
  height: 80px;
  background: transparent;
  outline: none;
}
input[type="range"]#volSlider::-webkit-slider-thumb,
input[type="range"]#sheetVolSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #b48cf2;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  cursor: pointer;
}
input[type="range"]#volSlider::-moz-range-thumb,
input[type="range"]#sheetVolSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #b48cf2;
  cursor: pointer;
}

/* キュー・リスト - より見やすく */
.queue-wrap { background: rgba(255,255,255,0.06); border-radius: 14px; padding: 10px; border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
#queueList .queue-item, #allSongs .song-item, #rankingList .rank-item, #customPlaylists .pl-item, #presetPlaylists .preset-card, #searchResults .song-card, #libFavorites .song-card, #pinnedGrid .pin-card, #pinnedBar .pin-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.15s, transform 0.2s, opacity 0.2s, box-shadow 0.2s;
  will-change: transform, opacity;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#queueList .queue-item.active { background: rgba(183,140,242,0.18); border-color: rgba(183,140,242,0.35); }
#queueList .queue-item:hover, #allSongs .song-item:hover, #searchResults .song-card:hover { background: rgba(255,255,255,0.10); transform: translateY(-1px); }
.drag-handle {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #7a83a8;
  cursor: grab;
  font-size: 14px;
  flex-shrink: 0;
  touch-action: none;
}
.drag-handle:active { cursor: grabbing; }
.queue-item.dragging { opacity: 0.5; transform: scale(0.98); }
.song-thumb { width: 56px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #222; }
.song-card .song-thumb { width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 10px; }
.song-card { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; cursor: pointer; text-align: left; }
.song-card .song-meta { padding: 8px 10px; text-align: left; align-items: flex-start; }
.song-meta { flex: 1; min-width: 0; text-align: left; }
.song-title { font-size: 12px; font-weight: 700; color: #e4e6eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.song-artist { font-size: 11px; color: #9aa3c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.song-artist-wrap { min-width: 0; text-align: left; justify-content: flex-start; }
.song-artist--collab, .song-artist--group { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 100%; white-space: normal; line-height: 1.4; }
.song-artist--collab .artist-collapsed, .song-artist--group .artist-collapsed,
.song-artist--collab .artist-expanded, .song-artist--group .artist-expanded { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.song-artist .artist-count { font-size: 10px; color: #7a83a8; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); padding: 1px 6px; border-radius: 999px; }
.song-artist .artist-toggle { padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.08); color: #9aa3c0; font-size: 10px; cursor: pointer; line-height: 1; transition: background 0.15s; }
.song-artist .artist-toggle:hover { background: rgba(183,140,242,0.22); color: #e4e6eb; }
.song-artist .artist-name { font-size: 11px; color: #9aa3c0; }
.song-artist .artist-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.song-artist .artist-chip { padding: 2px 6px; border-radius: 999px; background: rgba(183,140,242,0.18); border: 1px solid rgba(183,140,242,0.28); font-size: 10px; color: #e4e6eb; white-space: nowrap; }
#nowArtist .song-artist, #miniArtist .song-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#nowArtist .song-artist[data-collapsed="0"], #miniArtist .song-artist[data-collapsed="0"] { white-space: normal; overflow: visible; }
#rankingList .song-artist, #historyListInline .song-artist, #libHistory .song-artist { font-size: 10px; }
.song-card .song-artist-wrap { overflow: hidden; }
.preset-card {
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(79,195,247,0.12), rgba(183,140,242,0.12));
}
.preset-card:hover { transform: translateY(-2px); }
.preset-title { font-size: 13px; font-weight: 800; color: #e4e6eb; }
.preset-desc { font-size: 11px; color: #9aa3c0; margin-top: 4px; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; }
#searchResults { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; }
#libFavorites { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; }
#pinnedGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; }
.flying-thumb {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: transform 0.45s cubic-bezier(0.2,0,0,1), opacity 0.45s;
  will-change: transform;
}
/* ピン留めポップオーバー */
.pinned-popover {
  position: fixed;
  z-index: 130;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: rgba(16,20,36,0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.pinned-popover.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.pinned-overlay {
  position: fixed;
  inset: 0;
  z-index: 125;
  background: transparent;
}
@media (max-width: 900px) {
  .pinned-popover { width: 280px; max-width: calc(100vw - 80px); }
}
/* ハンバーガードロワー */
.vibe-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s, visibility 0.22s;
}
.vibe-drawer-overlay.open { opacity:1; visibility:visible; }
.vibe-drawer {
  position: fixed;
  top: 0;
  right: -360px;
  width: 320px;
  max-width: 86vw;
  height: 100%;
  z-index: 210;
  background: rgba(16,20,36,0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -8px 0 32px rgba(0,0,0,0.45);
  overflow-y: auto;
  transition: right 0.24s cubic-bezier(0.2,0,0,1);
  display: flex;
  flex-direction: column;
}
.vibe-drawer.open { right:0; display:flex !important; }
.vibe-drawer-link:hover { background:rgba(255,255,255,0.08) !important; }
.vibe-drawer-link.active { box-shadow:0 4px 14px rgba(183,140,242,0.35); }
/* カード ︙ メニュー */
.song-card { position:relative; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.song-card .song-title, .song-card .song-artist-wrap { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.card-more {
  position:absolute;
  top:6px;
  right:6px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(10,14,26,0.65);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#e4e6eb;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  transition: background 0.15s, transform 0.15s;
}
.card-more:hover { background:rgba(255,255,255,0.12); transform:scale(1.05); }
.card-menu {
  position: fixed;
  z-index: 220;
  min-width: 180px;
  max-width: calc(100vw - 24px);
  background: rgba(16,20,36,0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  overflow: hidden;
  padding: 6px;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}
.card-menu.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.card-menu-item {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 12px; border-radius:10px;
  border:none; background:transparent; color:#e4e6eb;
  font-size:12px; font-weight:700; text-align:left; cursor:pointer;
}
.card-menu-item:hover { background:rgba(255,255,255,0.08); }
.card-menu-item:active { background:rgba(255,255,255,0.12); }
.card-menu-overlay { position:fixed; inset:0; z-index:215; background:transparent; }
.song-card .queue-add, .song-card .queue-push, .song-card .pin-btn { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
@media (max-width: 900px) {
  .song-card .card-desktop-actions { display:none !important; }
}
@media (min-width: 901px) {
  .song-card .card-desktop-actions { display:flex !important; }
}
/* キュー確認モーダル */
.queue-confirm-overlay {
  position:fixed; inset:0; z-index:230;
  background:rgba(0,0,0,0.45);
  opacity:0; visibility:hidden;
  transition:opacity 0.18s, visibility 0.18s;
}
.queue-confirm-overlay.open { opacity:1; visibility:visible; }
.queue-confirm-modal {
  position:fixed; inset:0; z-index:235;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity 0.18s, visibility 0.18s;
  pointer-events:none;
}
.queue-confirm-modal.open { opacity:1; visibility:visible; pointer-events:auto; }
.queue-confirm-card { transform:translateY(8px) scale(0.98); transition:transform 0.18s ease; }
.queue-confirm-modal.open .queue-confirm-card { transform:translateY(0) scale(1); }
/* キュー/再生中の折り畳み・被り修正 */
.queue-wrap {
  max-height: calc(100svh - 160px);
  max-height: calc(100dvh - 160px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  scrollbar-width: thin;
}
@media (max-width: 900px) {
  .queue-wrap { max-height: calc(100svh - 120px); padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  #miniPlayer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .vibe-now-grid { gap:12px; }
  #queueList .queue-item, #queueSheetList .queue-item, #queueSheetHistoryList .queue-item { padding:6px 8px; gap:6px; border-radius:10px; }
  #queueList .queue-item .song-thumb, #queueSheetList .queue-item .song-thumb, #queueSheetHistoryList .queue-item .song-thumb { width:40px; height:30px; border-radius:6px; }
  #queueList .queue-item .song-meta .song-title, #queueSheetList .queue-item .song-meta .song-title { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #queueList .queue-item .qplay, #queueList .queue-item .qdel, #queueSheetList .queue-item .qplay, #queueSheetList .queue-item .qdel { padding:3px 7px; font-size:10px; border-radius:999px; }
  #queueList .queue-item .drag-handle, #queueSheetList .queue-item .drag-handle { width:16px; height:16px; font-size:12px; }
  .vibe-controls { gap:6px; padding:8px 10px; }
  .vibe-controls button { width:32px; height:32px; }
  .vibe-controls button.play-main { width:42px; height:42px; }
  .vol-vertical { padding:6px 4px !important; }
  .vol-vertical > div { height:70px !important; }
  /* 再生中タブ: SPではレコード+iframeのみ、スクロール禁止 */
  #vibeNowSec { max-height: calc(100svh - 72px); max-height: calc(100dvh - 72px); display:flex; flex-direction:column; overflow:hidden !important; overscroll-behavior:none; touch-action:none; }
  .vibe-now-grid { flex:1; min-height:0; overflow:hidden !important; display:flex; flex-direction:column; gap:10px; align-items:center; touch-action:none; }
  .vibe-now-left { flex-shrink:0; max-height: none; overflow:hidden !important; width:100%; display:flex; flex-direction:column; align-items:center; gap:12px; overscroll-behavior:none; touch-action:none; }
  body.sp-nowplaying-lock { overflow:hidden; overscroll-behavior:none; touch-action:none; }
  .vibe-now-right { flex-shrink:0; width:100%; display:flex; flex-direction:column; gap:10px; align-items:stretch; }
  /* キュー/コントロールはSPでは非表示（シートに移設 → miniPlayer + queueSheetへ） */
  #queueWrap { display:none !important; }
  .vibe-now-right .vibe-controls { display:none !important; }
  .vibe-now-right .vol-popup-wrap { display:none !important; }
  #queueHistoryDetails { flex-shrink:0; }
  #queueHistoryDetails[open] { max-height: 140px; display:flex; flex-direction:column; overflow:hidden; }
  #queueHistoryDetails[open] #historyListInline { flex:1; min-height:0; overflow-x:auto; overflow-y:hidden; }
  #queueHistoryDetails:not([open]) #historyListInline { display:none !important; }
  /* ミニプレイヤーのタップ領域を明示 */
  #miniInfo, #miniThumb { cursor:pointer; }
}
#miniExpand .mini-expand-icon { display:inline-flex; align-items:center; justify-content:center; }
#miniExpand .mini-queue-icon { display:none; align-items:center; justify-content:center; }
@media (max-width: 900px) {
  #miniExpand .mini-expand-icon { display:none !important; }
  #miniExpand .mini-queue-icon { display:inline-flex !important; }
  #miniExpand[aria-expanded="true"] { background:rgba(183,140,242,0.18) !important; border-color:rgba(183,140,242,0.35) !important; color:#e4e6eb !important; }
}
#queueHistoryDetails { transition: background 0.15s; }
#queueHistoryDetails[open] summary span:last-child { transform:rotate(180deg); }

/* SP: ダブルタップ拡大禁止 + コピー選択制限 */
html, body { touch-action: manipulation; }
@media (max-width: 900px) {
  body.millivibe { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  #nowTitle { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important; }
  #nowArtist, .queue-sheet, .queue-sheet * { -webkit-user-select: none; user-select: none; }
  #queueSheetSearch, #songSearch, input, textarea { -webkit-user-select: text !important; user-select: text !important; }
  /* レコードタイトル以外は選択不可、ダブルタップズーム抑止 */
  .vibe-record, .vibe-player-wrap, #miniPlayer, .queue-sheet-handle-wrap { touch-action: manipulation; }
}

/* === キュー ボトムシート (SP: ミニプレイヤーからスライド) === */
.queue-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 135;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.queue-sheet-overlay.open { opacity:1; visibility:visible; }
.queue-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 138;
  height: 78dvh;
  max-height: 78dvh;
  background: rgba(16,20,36,0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-left: 1px solid rgba(255,255,255,0.06);
  border-right: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
  transform: translateY(105%);
  transition: transform 0.28s cubic-bezier(0.2,0,0,1), height 0.28s ease, max-height 0.28s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* miniPlayer(64px程度)ぶん浮かせて重ならない */
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  touch-action: pan-y;
}
.queue-sheet.open { transform: translateY(0); }
.queue-sheet.half { height: 55dvh; max-height: 55dvh; }
.queue-sheet.expanded { height: 92dvh; max-height: 92dvh; }
.queue-sheet-handle-wrap {
  display:flex; align-items:center; justify-content:center;
  padding: 10px 0 8px;
  margin:0;
  cursor:grab;
  touch-action:none;
  flex-shrink:0;
}
.queue-sheet-handle {
  width: 36px; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
  pointer-events:none;
}
.queue-sheet-handle-wrap:active { cursor:grabbing; }
.queue-sheet-handle-wrap:active .queue-sheet-handle { background: rgba(255,255,255,0.4); }
.queue-sheet-head {
  display: flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  touch-action: none;
}
.queue-sheet-body {
  flex:1; min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding: 8px 10px 12px;
  display:flex; flex-direction:column; gap:8px;
  scrollbar-width: thin;
}
#queueSheetList .queue-item { cursor:grab; }
#queueSheetList .queue-item.active { background: rgba(183,140,242,0.18); border-color: rgba(183,140,242,0.35); }
#queueSheetHistoryDetails { transition: background 0.15s; flex-shrink:0; }
#queueSheetHistoryDetails[open] summary span:last-child { transform:rotate(180deg); }
.queue-sheet-controls {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:8px 10px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  flex-shrink:0;
}
.sheet-ctrl-btn {
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background: rgba(255,255,255,0.10);
  color:#e4e6eb;
  font-size:12px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background 0.15s, transform 0.15s;
}
.sheet-ctrl-btn:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.sheet-ctrl-btn.active { background: linear-gradient(120deg,#4fc3f7,#b48cf2); color:#fff; }
#sheetBtnAutomix { width:auto; padding:0 12px; border-radius:999px; font-size:11px; font-weight:800; }
#sheetBtnAutomix[data-on="0"] { background: rgba(255,255,255,0.10); color:#9aa3c0; }
#sheetBtnAutomix[data-on="1"], #sheetBtnAutomix.active { background: linear-gradient(120deg,#f78fc0,#b48cf2); color:#fff; }
#sheetBtnRepeat.active { background: linear-gradient(120deg,#4fc3f7,#b48cf2); color:#fff; }
.sheet-vol-wrap input[type="range"] { accent-color:#b48cf2; }
#queueSheetSearch { outline:none; transition: border-color 0.15s, background 0.15s; }
#queueSheetSearch:focus { border-color: rgba(183,140,242,0.4); background: rgba(255,255,255,0.12); }
#queueSheetEmptySuggest .sheet-suggest-card {
  display:flex; gap:8px; align-items:center;
  padding:8px; border-radius:10px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
  transition: background 0.15s;
}
#queueSheetEmptySuggest .sheet-suggest-card:hover { background: rgba(255,255,255,0.10); }
.sheet-suggest-thumb { width:40px; height:30px; border-radius:6px; object-fit:cover; flex-shrink:0; background:#222; }
/* 共有シート（Milli Unishareと同型） */
.share-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 300;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.share-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; }
.share-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto;
  background: #1d1d1f; border-radius: 16px 16px 0 0; z-index: 310;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform 0.25s;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.share-overlay.open .share-sheet { transform: translateY(0); }
.share-sheet-title { font-size: 12px; color: #9aa3c0; text-align: center; margin: 2px 0 10px; }
.share-item {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 12px;
  border: none; background: none; border-radius: 12px; font-size: 15px; color: #e4e6eb;
  cursor: pointer; text-align: left; text-decoration: none; box-sizing: border-box;
}
.share-item:hover { background: rgba(255,255,255,0.08); }
.share-ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink:0; }
.share-item-done { color: #16a34a; }
.share-cancel {
  display: block; width: 100%; margin-top: 8px; padding: 13px; border: none;
  border-top: 1px solid rgba(255,255,255,0.08); border-radius: 0; background: none;
  font-size: 15px; color: #9aa3c0; cursor: pointer;
}
/* 使い方ガイド */
.howto-card{ max-width:560px; width:92%; max-height:85dvh; max-height:85svh; display:flex; flex-direction:column; background:rgba(16,20,36,0.98); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.10); border-radius:20px; box-shadow:0 16px 40px rgba(0,0,0,0.45); overflow:hidden; }
.howto-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0; }
.howto-head h3{ margin:0; font-size:15px; font-weight:900; color:#e4e6eb; display:flex; align-items:center; gap:8px; }
.howto-head-ico{ width:28px; height:28px; border-radius:50%; background:linear-gradient(120deg,#4fc3f7,#b48cf2,#f78fc0); display:inline-flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.howto-head-ico svg{ width:16px; height:16px; }
#howtoCloseBtn{ width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06); color:#9aa3c0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; }
#howtoCloseBtn:hover{ background:rgba(255,255,255,0.12); }
.howto-tabs{ display:flex; gap:6px; padding:10px 12px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; }
.howto-tabs::-webkit-scrollbar{ display:none; }
.howto-tab{ padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06); color:#9aa3c0; font-size:11px; font-weight:800; white-space:nowrap; cursor:pointer; flex-shrink:0; transition:background 0.15s,color 0.15s,border-color 0.15s; }
.howto-tab.active{ background:linear-gradient(120deg,#4fc3f7,#b48cf2); color:#fff; border-color:transparent; box-shadow:0 2px 8px rgba(183,140,242,0.25); }
.howto-tab:hover{ border-color:rgba(255,255,255,0.18); }
.howto-body{ flex:1; overflow-y:auto; overflow-x:hidden; padding:14px 16px; min-height:240px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.12) transparent; }
.howto-body::-webkit-scrollbar{ width:6px; }
.howto-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.12); border-radius:999px; }
.howto-page{ display:none; }
.howto-page.active{ display:block; animation:fadeIn 0.18s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none; } }
.howto-lead{ margin:0 0 12px; font-size:12px; line-height:1.6; color:#b8c0e0; text-align:center; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:8px 10px; }
.howto-row{ display:flex; gap:12px; align-items:flex-start; padding:10px 12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:14px; margin-bottom:10px; text-align:left; }
.howto-ico{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:#e4e6eb; font-size:14px; }
.howto-ico svg{ width:18px; height:18px; }
.howto-text{ flex:1; min-width:0; }
.howto-title{ font-size:12px; font-weight:800; color:#e4e6eb; margin-bottom:3px; line-height:1.4; }
.howto-desc{ font-size:11px; color:#9aa3c0; line-height:1.6; }
.howto-kbd{ display:inline-block; padding:1px 6px; border-radius:6px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#e4e6eb; font-size:10px; font-weight:700; line-height:1.4; white-space:nowrap; }
.howto-note{ margin:10px 0 0; font-size:11px; line-height:1.6; color:#7a83a8; background:rgba(183,140,242,0.08); border:1px solid rgba(183,140,242,0.12); border-radius:10px; padding:8px 10px; }
.howto-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; border-top:1px solid rgba(255,255,255,0.08); flex-shrink:0; }
.howto-dots{ display:flex; gap:6px; align-items:center; }
.howto-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.18); display:inline-block; transition:all 0.15s; }
.howto-dots span.active{ background:linear-gradient(120deg,#4fc3f7,#b48cf2); width:16px; border-radius:999px; }
#howtoPrev,#howtoNext{ padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06); color:#e4e6eb; font-size:12px; font-weight:800; cursor:pointer; transition:opacity 0.15s,background 0.15s; }
#howtoPrev:hover,#howtoNext:hover{ background:rgba(255,255,255,0.10); }
#howtoPrev:disabled,#howtoNext:disabled{ opacity:0.35; pointer-events:none; }
#howtoNext:not(:disabled){ background:linear-gradient(120deg,#4fc3f7,#b48cf2); border-color:transparent; color:#fff; box-shadow:0 2px 8px rgba(183,140,242,0.25); }
@media(max-width:560px){ .howto-card{ width:96%; max-height:90dvh; max-height:90svh; } .howto-body{ padding:12px; } .howto-row{ padding:8px 10px; gap:10px; } .howto-head{ padding:12px; } .howto-foot{ padding:10px 12px; } .howto-ico{ width:32px; height:32px; } .howto-ico svg{ width:16px; height:16px; } }

/* ── Millivibe用カーソル選択（Unishareと同期・darkヘッダー用上書き） ── */
body.millivibe .cursor-top-btn {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: #e4e6eb;
}
body.millivibe .cursor-top-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(122,79,196,0.4);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.millivibe .cursor-top-btn[aria-expanded="true"] {
  background: rgba(122,79,196,0.22);
  border-color: #7a4fc4;
  color: #e4e6eb;
}
body.millivibe .cursor-dropdown {
  background: rgba(16,20,36,0.98);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
body.millivibe .cursor-dropdown-item { color: #e4e6eb; }
body.millivibe .cursor-dropdown-item:hover { background: rgba(255,255,255,0.08); }
body.millivibe .cursor-dropdown-item.active { background: rgba(183,140,242,0.18); }
body.millivibe .cursor-dropdown-item img { border-color: rgba(255,255,255,0.12); }
body.millivibe .cursor-dropdown-item.active img { border-color: #7a4fc4; }
body.millivibe .cursor-dropdown-item span { color: #e4e6eb; }
body.millivibe .cursor-dropdown-item .check { color: #7a4fc4; }

/* デスクトップではシート非表示 */
@media (min-width: 901px) {
  .queue-sheet, .queue-sheet-overlay { display:none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .vibe-record { animation: none !important; }
  .vibe-section, #queueList .queue-item { transition: none !important; }
  .queue-sheet { transition: none !important; }
}