/* ================================================================
 * ニーゴ楽曲9選
 * ================================================================ */

 .nigo-9sen {
  --n9-bg: #ffffff;
  --n9-bg-soft: #f7f8fb;
  --n9-border: #dce2ec;
  --n9-text: #333333;
  --n9-muted: #5c6a7e;
  --n9-accent: #5b4e8c;
  --n9-accent-dark: #463a6e;
  --n9-accent-light: #7b6eac;
  --n9-danger: #e74c3c;
  --n9-radius: 10px;
  --n9-radius-sm: 6px;
  --n9-shadow: 0 2px 8px rgba(91, 78, 140, 0.1);
  --n9-transition: 0.2s ease;
  color: var(--n9-text) !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* ----------------------------------------------------------------
 * ヘッダー
 * ---------------------------------------------------------------- */

.nigo-9sen__heading {
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--n9-text) !important;
}

.nigo-9sen__heading::before,
.nigo-9sen__heading::after {
  content: none !important;
  display: none !important;
}

.nigo-9sen__desc {
  text-align: center !important;
  color: var(--n9-muted) !important;
  font-size: 14px !important;
  margin: 0 0 20px !important;
}

/* ----------------------------------------------------------------
 * 検索パネル
 * ---------------------------------------------------------------- */

.nigo-9sen__search-panel {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

.nigo-9sen__search-input {
  flex: 1 1 200px !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--n9-border) !important;
  border-radius: var(--n9-radius-sm) !important;
  font-size: 14px !important;
  outline: none !important;
  background: var(--n9-bg) !important;
}

.nigo-9sen__search-input:focus {
  border-color: var(--n9-accent) !important;
  box-shadow: 0 0 0 2px rgba(91, 78, 140, 0.15) !important;
}

.nigo-9sen__selection-count {
  flex: 0 0 auto !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--n9-accent) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.nigo-9sen__filter-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.nigo-9sen__filter-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.nigo-9sen__filter-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--n9-muted) !important;
  flex-shrink: 0 !important;
  min-width: 5em !important;
}

.nigo-9sen__filter-options {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.nigo-9sen__filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border: 1px solid var(--n9-border) !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background var(--n9-transition), border-color var(--n9-transition) !important;
  user-select: none !important;
}

.nigo-9sen__filter-chip input {
  display: none !important;
}

.nigo-9sen__filter-chip:has(input:checked) {
  background: var(--n9-accent) !important;
  border-color: var(--n9-accent) !important;
  color: #fff !important;
}

.nigo-9sen__filter-chip--icon {
  padding: 4px 8px !important;
}

.nigo-9sen__filter-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* ----------------------------------------------------------------
 * 曲リスト
 * ---------------------------------------------------------------- */

.nigo-9sen__song-list {
  max-height: 360px !important;
  overflow-y: auto !important;
  border: 1px solid var(--n9-border) !important;
  border-radius: var(--n9-radius) !important;
  background: var(--n9-bg) !important;
  margin-bottom: 24px !important;
}

.nigo-9sen__song-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--n9-border) !important;
  cursor: pointer !important;
  transition: background var(--n9-transition) !important;
}

.nigo-9sen__song-item:last-child {
  border-bottom: none !important;
}

.nigo-9sen__song-item:hover {
  background: rgba(91, 78, 140, 0.04) !important;
}

.nigo-9sen__song-item--selected {
  background: rgba(91, 78, 140, 0.08) !important;
}

.nigo-9sen__song-thumb {
  width: 64px !important;
  height: 36px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  background: var(--n9-bg-soft) !important;
}

.nigo-9sen__song-info {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.nigo-9sen__song-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.nigo-9sen__song-type {
  font-size: 11px !important;
  color: var(--n9-muted) !important;
}

.nigo-9sen__song-toggle {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--n9-accent) !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--n9-transition), transform var(--n9-transition) !important;
  padding: 0 !important;
}

.nigo-9sen__song-toggle:hover {
  background: var(--n9-accent-dark) !important;
  transform: scale(1.1) !important;
}

.nigo-9sen__song-item--selected .nigo-9sen__song-toggle {
  background: var(--n9-danger) !important;
}

.nigo-9sen__song-empty {
  padding: 40px 20px !important;
  text-align: center !important;
  color: var(--n9-muted) !important;
  font-size: 14px !important;
}

/* ----------------------------------------------------------------
 * グリッド（3x3）
 * ---------------------------------------------------------------- */

.nigo-9sen__grid-heading {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--n9-text) !important;
}

.nigo-9sen__grid-heading::before,
.nigo-9sen__grid-heading::after {
  content: none !important;
  display: none !important;
}

.nigo-9sen__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.nigo-9sen__cell {
  aspect-ratio: 1 / 1 !important;
  border: 2px solid var(--n9-border) !important;
  border-radius: var(--n9-radius) !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: grab !important;
  background: var(--n9-bg-soft) !important;
  transition: box-shadow var(--n9-transition), border-color var(--n9-transition) !important;
}

.nigo-9sen__cell:hover {
  border-color: var(--n9-accent-light) !important;
}

.nigo-9sen__cell--empty {
  cursor: default !important;
  border-style: dashed !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nigo-9sen__cell--empty:hover {
  border-color: var(--n9-border) !important;
}

.nigo-9sen__cell-inner {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

.nigo-9sen__cell-thumb {
  width: 100% !important;
  height: 100% !important;
  flex: none !important;
  object-fit: cover !important;
  display: block !important;
  pointer-events: none !important;
  -webkit-touch-callout: none !important;
}

.nigo-9sen__song-thumb--placeholder,
.nigo-9sen__cell-thumb--placeholder {
  background: var(--n9-bg-soft) !important;
}

.nigo-9sen__cell-title {
  display: block !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: #fff !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.nigo-9sen__cell-remove {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 24px !important;
  height: 24px !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity var(--n9-transition) !important;
  padding: 0 !important;
}

.nigo-9sen__cell:hover .nigo-9sen__cell-remove {
  opacity: 1 !important;
}

.nigo-9sen__cell-placeholder {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--n9-border) !important;
}

/* SortableJS states */
.nigo-9sen__cell--ghost {
  opacity: 0.4 !important;
}

.nigo-9sen__cell--chosen {
  box-shadow: 0 0 0 3px var(--n9-accent) !important;
}

.nigo-9sen__cell--drag {
  opacity: 0.9 !important;
}

/* 閲覧モード（読み取り専用） */
.nigo-9sen__grid--readonly .nigo-9sen__cell {
  cursor: default !important;
}

.nigo-9sen__grid--readonly .nigo-9sen__cell[data-youtube] {
  cursor: pointer !important;
}

.nigo-9sen__grid--readonly .nigo-9sen__cell-remove {
  display: none !important;
}

.nigo-9sen__cell-play {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 36px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease !important;
}

.nigo-9sen__cell:hover .nigo-9sen__cell-play {
  opacity: 1 !important;
}

/* ----------------------------------------------------------------
 * ボタン
 * ---------------------------------------------------------------- */

.nigo-9sen__actions,
.nigo-9sen__view-actions,
.nigo-9sen__share-buttons {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin-top: 16px !important;
}

.nigo-9sen__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: var(--n9-radius-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--n9-transition), opacity var(--n9-transition) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

.nigo-9sen__btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.nigo-9sen__btn--share,
.nigo-9sen__btn--primary {
  background: var(--n9-accent) !important;
  color: #fff !important;
}

.nigo-9sen__btn--share:hover:not(:disabled),
.nigo-9sen__btn--primary:hover {
  background: var(--n9-accent-dark) !important;
  color: #fff !important;
}

.nigo-9sen__btn--x {
  background: #000 !important;
  color: #fff !important;
}

.nigo-9sen__btn--x:hover:not(:disabled) {
  background: #333 !important;
  color: #fff !important;
}

.nigo-9sen__btn--download {
  background: #2e7d32 !important;
  color: #fff !important;
}

.nigo-9sen__btn--download:hover:not(:disabled) {
  background: #1b5e20 !important;
  color: #fff !important;
}

.nigo-9sen__btn--copy {
  background: var(--n9-accent-light) !important;
  color: #fff !important;
}

.nigo-9sen__btn--copy:hover:not(:disabled) {
  background: var(--n9-accent) !important;
  color: #fff !important;
}

.nigo-9sen__btn--reset {
  background: transparent !important;
  color: var(--n9-muted) !important;
  border: 1px solid var(--n9-border) !important;
}

.nigo-9sen__btn--reset:hover {
  background: var(--n9-bg-soft) !important;
  color: var(--n9-text) !important;
}

/* ----------------------------------------------------------------
 * 共有結果パネル
 * ---------------------------------------------------------------- */

.nigo-9sen__share-result {
  background: var(--n9-bg-soft) !important;
  border: 1px solid var(--n9-border) !important;
  border-radius: var(--n9-radius) !important;
  padding: 20px !important;
  text-align: center !important;
  margin-top: 16px !important;
}

.nigo-9sen__share-message {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--n9-accent) !important;
  margin: 0 0 12px !important;
}

.nigo-9sen__share-option {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: var(--n9-muted) !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
  user-select: none !important;
}

.nigo-9sen__share-option input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: var(--n9-accent) !important;
  cursor: pointer !important;
}

.nigo-9sen__share-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}

.nigo-9sen__share-step {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

.nigo-9sen__share-step-num {
  flex-shrink: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--n9-accent) !important;
  line-height: 1.4 !important;
}

.nigo-9sen__share-step-body {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.nigo-9sen__share-step-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--n9-text) !important;
  margin: 0 !important;
}

.nigo-9sen__share-step-hint {
  font-size: 13px !important;
  color: var(--n9-muted) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

.nigo-9sen__share-step .nigo-9sen__btn {
  align-self: flex-start !important;
}

.nigo-9sen__share-step .nigo-9sen__share-option {
  justify-content: flex-start !important;
  margin-bottom: 0 !important;
}

.nigo-9sen__share-buttons-sub {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--n9-border) !important;
}

.nigo-9sen__share-sub-guide {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--n9-muted) !important;
  line-height: 1.6 !important;
}

/* ----------------------------------------------------------------
 * エラー
 * ---------------------------------------------------------------- */

.nigo-9sen__error {
  color: var(--n9-danger) !important;
  text-align: center !important;
  font-size: 14px !important;
  margin-top: 12px !important;
}

.nigo-9sen__mv-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  align-items: center !important;
  justify-content: center !important;
  display: none !important;
}

.nigo-9sen__mv-modal--active {
  display: flex !important;
}

.nigo-9sen__mv-modal-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  cursor: pointer !important;
}

.nigo-9sen__mv-modal-content {
  position: relative !important;
  width: 90vw !important;
  max-width: 800px !important;
  aspect-ratio: 16 / 9 !important;
  z-index: 1 !important;
}

.nigo-9sen__mv-modal-player {
  width: 100% !important;
  height: 100% !important;
}

.nigo-9sen__mv-modal-content iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: var(--n9-radius) !important;
}

.nigo-9sen__mv-modal-close-btn {
  position: absolute !important;
  top: -40px !important;
  right: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #333 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* ----------------------------------------------------------------
 * レスポンシブ
 * ---------------------------------------------------------------- */

@media (max-width: 959px) {
  .nigo-9sen {
    max-width: 100% !important;
  }
}

@media (max-width: 599px) {
  .nigo-9sen__search-panel {
    flex-direction: column !important;
  }

  .nigo-9sen__search-input {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  .nigo-9sen__grid {
    gap: 4px !important;
  }

  .nigo-9sen__cell-title {
    font-size: 10px !important;
    padding: 2px 4px !important;
  }

  .nigo-9sen__cell-remove {
    opacity: 1 !important;
  }

  .nigo-9sen__song-thumb {
    width: 48px !important;
    height: 27px !important;
  }

  .nigo-9sen__actions,
  .nigo-9sen__view-actions,
  .nigo-9sen__share-buttons {
    flex-direction: column !important;
  }

  .nigo-9sen__btn {
    width: 100% !important;
  }

  .nigo-9sen__share-step .nigo-9sen__btn {
    align-self: stretch !important;
  }

  .nigo-9sen__share-buttons-sub {
    flex-direction: column !important;
  }

  .nigo-9sen__share-buttons-sub .nigo-9sen__btn {
    width: 100% !important;
  }
}

/* ----------------------------------------------------------------
 * モーション軽減
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nigo-9sen__cell,
  .nigo-9sen__song-item,
  .nigo-9sen__song-toggle,
  .nigo-9sen__btn {
    transition: none !important;
  }
}