/* === 全体のスタイル === */
body {
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  background-color: #f0f0f0;
  color: #222;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
}

.user-menu {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.user-icon {
  border-radius: 50%;
  vertical-align: middle;
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.user-name {
  margin-left: 8px;
  color: white;
  font-weight: bold;
}

.dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 36px;
  background-color: #222;
  border: 1px solid #444;
  border-radius: 6px;
  min-width: 200px;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  white-space: nowrap; 
}

.dropdown a {
  color: white;
  padding: 10px 16px;
  display: block;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown a:hover {
  background-color: #333;
}

/* ホバーで表示 */
.user-menu:hover .dropdown {
  display: block;
}

/* === ナビゲーションバー === */
nav {
  background-color: #111;
  color: white;
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a {
  color: #fff;              /* 白にしてあるけど、念のため強く指定！ */
  text-decoration: none;
  margin-left: 20px;
  font-weight: bold;
  background-color: #333;   /* 🔥 追加：ボタンぽくする */
  padding: 8px 14px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

nav a:hover {
  background-color: #555;   /* 🔥 ホバー時は少し明るく！ */
}


/* === 再生中のカード表示 === */
.now-playing-card {
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  margin-top: 20px;
}

.now-playing-card h3 {
  margin-top: 0;
  color: #000;
}

.queue-preview-body {
  flex: 1;
  overflow-y: auto;      /* ← 中身がはみ出したら縦スクロール */
  overflow-x: hidden;    /* ← 横にはスクロールさせない */
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  font-size: 0.9rem;
}

.recommend-body {
  flex: 1;  
  overflow-y: auto;      /* ← 縦スクロール */
  overflow-x: hidden;
  min-height: 0;   
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 左右のカードは、割り当てられたグリッド列いっぱいに広がる */
.home-queue-card,
.home-recommend-card {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
}

/* おすすめカードだけ、今までどおり余白を付ける */
.home-recommend-card {
  padding: 16px 20px;
}

.recommend-title-heading {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: #111827;
}

.recommend-empty {
  font-size: 0.85rem;
  color: #6b7280;
}

.recommend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recommend-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.recommend-text {
  flex: 1;
  min-width: 0;
}

.recommend-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommend-artist {
  font-size: 0.8rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ダークモード対応 */
body.dark-mode .home-recommend-card {
  background-color: #111827;
  border-color: #1f2937;
}

body.dark-mode .recommend-title-heading {
  color: #e5e7eb;
}

body.dark-mode .recommend-title {
  color: #f9fafb;
}

body.dark-mode .recommend-artist,
body.dark-mode .recommend-empty {
  color: #9ca3af;
}

.queue-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.queue-preview-item:last-child {
  border-bottom: none;
}

.queue-preview-number {
  width: 20px;
  text-align: right;
  font-size: 0.75rem;
  color: #6b7280;
}

.queue-preview-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-preview-more {
  margin-top: 4px;
  font-size: 0.8rem;
  color: #6b7280;
  flex-shrink: 0;
}

.queue-preview-empty {
  margin: 4px 0;
  font-size: 0.9rem;
  color: #6b7280;
}

.queue-preview-footer {
  margin-top: 8px;
  text-align: right;
}

.queue-preview-link {
  font-size: 0.8rem;
  text-decoration: none;
  color: #0e85ad;
}

.queue-preview-link:hover {
  text-decoration: underline;
}

.queue-preview-header {
  display: flex;
  justify-content: space-between; /* タイトル左、ボタン右 */
  align-items: center;
  margin-top: -4px;               /* 少し上の余白調整 */
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;  /* 薄い線で区切る */
}

.queue-preview-header .queue-preview-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
}

.queue-expand-button {
  background: transparent;
  border: 1px solid #ddd;
  color: #666;
  font-size: 1rem;
  padding: 2px 8px;
  margin: 0 !important; /* ボタン共通の余白を打ち消し */
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.2;
}
.queue-expand-button:hover {
  background-color: #f0f0f0;
  color: #000;
}

.top-row-with-queue .now-playing-modern {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box; /* パディングを含めて幅計算 */
}

.top-row-with-queue .now-playing-modern .controls {
  gap: 8px !important;             /* 間隔を詰める */
  justify-content: space-around;   /* カード幅に合わせて均等に広げる */
  width: 85%;
  margin-top: 10px;
}

.top-row-with-queue .now-playing-modern .track-title,
.top-row-with-queue .now-playing-modern .progress-wrap {
  max-width: 100% !important;
  width: 75% !important;
  margin-left: auto;
  margin-right: auto;
}

.top-row-with-queue .now-playing-modern #jacket {
  width: 100%;
  max-width: 240px; /* 3分割時は少し小さめにする */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.top-row-with-queue .now-playing-card {
  margin-top: 0;       /* 元々ついているmargin-top:20pxを消して頭を揃える */
  height: auto;        /* 高さ指定を解除 */
  box-sizing: border-box !important; /* パディングを含めて100%にする */
  min-width: 0;
}

/* === ボタン === */
button {
  background-color: #333;
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 6px 4px;
  border-radius: 6px;
  font-size: 0.95em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #000;
}

/* === 入力フィールド === */
input[type="text"],
input[type="password"],
select,
textarea {
  width: 300px;
  padding: 8px;
  margin: 8px 0;
  border: 1px solid #999;
  border-radius: 5px;
  font-size: 1em;
  background-color: white;
}

/* === 再生バー === */
.progress-container {
  width: 100%;
  max-width: none;                /* 横幅制限を解除してジャケット横いっぱいに */
  margin: 8px 0;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: #9ca3af;          /* 参考画像っぽい控えめグレー */
  transition: width .25s ease;
}

.progress-time {
  margin-top: 6px;
  font-size: .85rem;
  color: #6b7280;
}

footer {
  background-color: #fff;
  border-top: 1px solid #ccc;
  text-align: center;
  font-size: 0.85em;
  padding: 10px;
  color: #888;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 1000;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.sidebar {
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  width: 220px;
  background-color: #111;  /* ← ✅ これも明示的に！ */
  overflow-y: auto;
}


.topbar a {
  color: white;
  font-weight: bold;
  text-decoration: none;
}

html, body {
  height: 100%;
  margin: 0;
}

.main-body {
  margin-left: 220px;  /* ← サイドバー分ずらす */
  padding-top: 60px;   /* ← トップバー分ずらす */
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
  padding: 30px;
  background-color: #f4f4f4;
}

/* ログインモーダル */
.modal {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);

  /* 👇 中央に配置させるために追加！！ */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  width: 360px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  position: relative;
}

.modal-content h2 {
  margin-top: 0;
  text-align: center;
}

.modal-content input {
  width: 100%;
}

.modal-content .close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #aaa;
  font-size: 28px;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
  background-color: white;
}

th, td {
  border: 1px solid #ccc;
  padding: 12px;
  text-align: center;
  vertical-align: middle;
}

th {
  background-color: #eee;
  font-weight: bold;
}

.report-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
  background: #fdfdfd;
  position: relative;
}

/* レポート本文・コメント用：改行を反映させる */
.report-text {
white-space: pre-line; 
overflow-wrap: anywhere; /* ← 長いURL対策 */
word-break: break-word;
line-height: 1.5; /* ← 読みやすさUP */
}

.report-form-box {
  max-width: 600px;
  margin: 30px 0;  /* ← 左寄せに！ */
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.report-form-box label {
  display: block;
  margin-top: 12px;
  font-weight: bold;
}

.report-form-box textarea {
  width: 100%;
  height: 150px;
}

.track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 30px;
  padding: 0 10px;
}

.track-list {
  list-style: none;
  padding: 0;
  margin-top: 30px;
}

.track-row {
  display: block; /* ✅ 通常のブロック要素 */
  background-color: #fff; /* ✅ 白い背景でカード感！ */
  border: 1px solid #ccc; /* ✅ 輪郭が出る！ */
  border-radius: 10px; /* ✅ 角丸でかわいく！ */
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* ✅ ふんわり浮く感じ！ */
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.track-row:hover {
  background-color: #f6f6f6;
  transform: translateX(2px);
}

.track-filename {
  font-weight: 600;
  font-size: 1em;
  color: #222;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-folder {
  font-size: 0.8em;
  color: #888;
  max-width: 35%;
  min-width: 70px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;                    /* 🎯 余白は gap で調整！ */
}

.track-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.track-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-top: 6px;
  padding-left: 4px;
}

.track-row.expanded .track-detail {
  max-height: 60px;
}

.download-btn {
  background-color: #444;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9em;
}

.download-btn:hover {
  background-color: #000;
}

.hidden {
  display: none !important;
}

.sidebar-version {
  /* margin-top: auto; これを削除 */
  padding-top: 10px;
  font-size: 0.85em;
  color: #888;
  position: absolute; /* これを追加 */
  bottom: 0; /* これを追加 */
  left: 0; /* これを追加 */
  right: 0; /* これを追加 */
  padding: 10px 20px; /* サイドバーと合わせるようにパディングを調整 */
  background-color: #111; /* これを追加 */
  z-index: 1000; /* これを追加 */
  box-sizing: border-box; /* パディングが幅に含まれるようにする */
}

.category-tab,
.admin-add_btn {
  background-color: #444;
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.category-tab:hover,
.admin-add_btn:hover {
  background-color: #666;
}

.active-category {
  background-color: #2196f3;
  font-weight: bold;
}

.preview-btn {
  background-color: #444;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.9em;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.preview-btn:hover {
  background-color: #000;
}

.drag-over {
  border: 2px dashed #2196f3;
  background-color: #e3f2fd;
}

.drag-handle {
  cursor: grab;
  font-size: 1.2em;
  margin-right: 12px;
  color: #666;
  user-select: none;
  -webkit-user-drag: element;
}

.drag-handle:active {
  cursor: grabbing;
}

.track-row.dragging {
  opacity: 0.5;
  transform: scale(1.02);
}

.track-row.drag-over {
  background-color: #e3f2fd;
  border: 2px dashed #2196f3;
}

.track-row.sortable-chosen {
  background-color: #e3f2fd;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* ドラッグ中に浮かせる！ */
  transform: scale(1.02);
  z-index: 999;
}

.track-row.sortable-ghost {
  opacity: 0.5;
}

.not-draggable .drag-handle {
  pointer-events: none; 
  cursor: not-allowed;
  color: #aaa;
  opacity: 0.5;
}

.delete-btn {
  background: #cc3333;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  margin-left: 8px;
  cursor: pointer;
  font-size: 0.9em;
  min-width: 60px;
  white-space: nowrap;
}

.delete-btn:hover {
  background-color: #a30000;
}

.icon-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
#profile-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ccc;
}
.edit-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,0.6);
  color: white;
  border-radius: 50%;
  padding: 6px;
  cursor: pointer;
  display: none;
}
.icon-container:hover .edit-overlay {
  display: block;
}

button:disabled {
  background-color: #999 !important;
  color: #eee;
  cursor: not-allowed;
  opacity: 0.6;
}

.queue-btn, .play-btn, .add-playlist-btn {
  background-color: #444;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9em;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);  /* トップバーを除いた全体 */
}

.layout-simple .main-container {
  padding-top: 60px; /* topbar の高さ分 */
  min-height: 100vh; /* calc を使わず、余白事故を避ける */
  box-sizing: border-box;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar a {
  display: block;
  color: #ccc;
  text-decoration: none;
  margin: 12px 0;
  padding-left: 20px; /* ✅ ← これで左側に余白がつくよ！ */
}

.playlist-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.playlist-card:hover {
  transform: scale(1.03);
}

.playlist-thumb {
  width: 100%;
  max-width: 120px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.playlist-details {
  margin-top: 12px;
  border-top: 1px solid #ccc;
  padding-top: 10px;
  text-align: left;
}

.track-item {
  margin: 6px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.playlist-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}

.playlist-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.playlist-title {
  font-size: 1.8em;
  margin: 0;
}

.friend-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.friend-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 12px 16px;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  gap: 16px;
}

.friend-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ccc;
}

.friend-info {
  flex-grow: 1;
}

.friend-name {
  font-weight: bold;
  font-size: 1.1em;
  color: #2196f3;
  text-decoration: none;
}

.friend-name:hover {
  text-decoration: underline;
}

.friend-username {
  font-size: 0.85em;
  color: #666;
}

.friend-remove-form {
  margin-left: auto;
}

.friend-profile-box {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.friend-profile-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ccc;
}

.friend-profile-texts h2 {
  margin: 0;
  margin-bottom: 8px;
  font-size: 1.5em;
}

.profile-username,
.profile-discord {
  margin: 6px 0;
  font-size: 0.95em;
  color: #555;
}

.section-title {
  font-size: 1.3em;
  margin: 0 0 10px 4px;
  color: #333;
}

.friend-profile-icon.online {
  border: 5px solid #00c853;  /* 緑：オンライン */
}
.friend-profile-icon.idle {
  border: 5px solid #ffa000;  /* オレンジ：離席中 */
}
.friend-profile-icon.offline {
  border: 2px solid #ccc;     /* グレー：オフライン（通常） */
}

/* indexページのフレンドステータス一覧の枠線（細め） */
.status-list-icon.online {
  border-width: 3px !important;
}
.status-list-icon.idle {
  border-width: 3px !important;
}
.status-list-icon.offline {
  border-width: 2px !important;
}

.friend-status-item {
  margin-bottom: 10px;
}

.menu-icon{
  width:18px;
  height:18px;
  vertical-align:middle;
  margin-right:8px;
  display:inline-block;
}

.now-playing-modern {
  max-width: 560px;
  margin: 20px auto;   
  padding: 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;        /* ← 縦積みに変更 */
  align-items: center;           /* ← 中身は中央揃え */
  gap: 14px;
  text-align: center;            /* タイトル等を中央表示 */
  position: relative;
}

#jacket {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.now-playing-modern .track-info {
  flex: 1;
  margin-top: 0px;
  width: 100%;
}

/* 曲名表示のコンテナ */
.track-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 6px 0 2px;
  white-space: nowrap; 
  width: 90%; /* または以前設定した% */
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  overflow: hidden; 
}

.track-title.marquee .marquee-inner {
  display: inline-block;
  white-space: nowrap;
  /* JSから受け取った合計時間でアニメーションを実行 */
  animation: seamless-loop var(--total-duration) linear infinite;
}

.track-title.marquee .marquee-inner span {
  display: inline-block;
  /* 曲名と曲名の間のスペース */
  margin-right: 40px; 
}

@keyframes seamless-loop {
  /* アニメーションの進行度(%)で動きを定義
    - 0% ~ 15%: 開始地点で停止 (約2秒のポーズ)
    - 15% ~ 80%: スクロール
    - 80% ~ 100%: 終了地点で停止 (約3秒のポーズ)
  */
  0% {
    transform: translateX(0);
  }

  /* 開始時のポーズ (全体の15%の時間を使う) */
  15% {
    transform: translateX(0);
  }

  /* スクロール終了地点 (全体の80%の地点で到達) */
  80% {
    transform: translateX(var(--scroll-distance));
  }
  
  /* 終了時のポーズ (残りの時間はずっと同じ場所) */
  100% {
    transform: translateX(var(--scroll-distance));
  }
}

.track-title span {
  display: inline-block;
  white-space: nowrap;
}

.track-artist {
  font-size: .98rem;
  color: #6b7280; /* グレー */
  margin-bottom: 4px;
}

/* ★ 再生ボタン5個の並び（PC用） */
.controls {
  display: flex;
  align-items: center;
  justify-content: center;  /* 中央寄せに戻す */
  gap: 72px;                /* ボタン同士の間隔はちょい広めに */
  margin-top: 6px;
}


.controls button {
  background: transparent !important;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;              /* 丸い背景を作らない */
  -webkit-tap-highlight-color: transparent;  /* スマホのタップ時の丸消し */
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.controls button:hover,
.controls button:focus,
.controls button:active {
  background: transparent !important;  /* ホバー時の薄いグレーも消す */
  outline: none;
  box-shadow: none;
}

/* 進捗バー（細め・丸み・薄い背景） */
.progress-wrap {
  width: 82%;
  max-width: 420px;
}
.progress-rail {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
}

.controls img {
  display: block;
  background: transparent;
  box-shadow: none;
}

/* ボタン内のSVG画像サイズを固定 */
.controls button img {
  width: 28px;   /* 好みで調整 24–32pxくらい */
  height: 28px;
  display: block;   /* 行間の余白を消す */
}

/* もし <svg> をインラインで入れてる場合はこちらも */
.controls button svg {
  width: 28px;
  height: 28px;
}

#exit-btn{
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  padding: 4px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;   /* 変な影が出ないように */
}

#exit-btn img{
  width: 24px;
  height: 24px;
  display: block;
}

#exit-btn:hover{ opacity: .7; }

.sidebar-category {
  color: #888;
  font-size: 0.85em;
  padding: 8px 20px;
  margin-top: 14px;
  border-top: 1px solid #333;
}

/* ★ カード左上のシャッフルボタン（新規） */
#shuffle-card-btn{
  position: absolute;
  top: 12px;
  left: 12px;
  background: transparent;
  border: none;
  padding: 4px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
#shuffle-card-btn img{
  width: 24px;
  height: 24px;
  display: block;
}
#shuffle-card-btn:hover{ opacity: .7; }

.db_sidebar-category {
  position: relative;
  font-size: 0.85em;
  color: #ddd;
  /* 左側のpaddingを20pxから0に変更 */
  padding: 8px 0px 8px 0;     
  margin-top: 14px;
  /* text-alignはデフォルトで左揃えなので、この行は削除しても問題ありません */
  text-align: left;    
}

.db_sidebar-category::before {
  content: "";
  position: absolute;
  top: 0;
  /* 親のpadding-left(20px)を打ち消すために、左に20px移動 */
  left: -20px;
  /* 左右のpadding(合計40px)分、幅を広げて端まで届かせる */
  width: calc(100% + 40px);
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}
.cover-wrapper {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7f8fa, #eef1f5); /* うっすらグレーの下地 */
  border: 1px solid #d9dee6;                             /* 薄いフレーム */
  box-shadow: 0 2px 10px rgba(0,0,0,.06);                /* ふわっと影 */
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
}

.cover-edit-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  /* カバーサイズに対して“ほどよく大きく”見えるように可変サイズ */
  width: clamp(48px, 40%, 84px);
  height: clamp(48px, 40%, 84px);
  border-radius: 50%;
  background: rgba(0,0,0,0.76);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  cursor: pointer;
  /* クリックしやすく */
  backdrop-filter: blur(2px);
}

.cover-wrapper:hover .cover-edit-badge {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.cover-edit-badge svg path {
  fill: white; /* アイコンの中を白にする */
}

.cover-edit-badge{
  /* 既存プロパティそのままでOK。以下を“追加/置換” */
  display: flex;                 /* ← gridの代わりでもOK */
  align-items: center;
  justify-content: center;
}

.cover-edit-badge svg{
  display: block;                /* インラインの余白を消す */
  width: 32px;                  /* 少しだけ大きめの方が視認性↑ */
  height: 32px;
  transform: translateY(0.5px);  /* 光学的微調整（要らなければ削除） */
  pointer-events: none;
}

.cover-wrapper .playlist-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

#cropper-modal img {
  max-width: 80vw;
  max-height: 80vh;
  display: block;
  margin: 0 auto;
}

.follow-btn {
  background-color: #2196f3;
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 999px; /* 丸くする！ */
  font-weight: bold;
  font-size: 0.9em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.follow-btn:hover {
  background-color: #1976d2;
}

.following-btn {
  background-color: #e0e0e0;
  color: #333;
  border: none;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: bold;
  font-size: 0.9em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.following-btn:hover {
  background-color: #d0d0d0;
}

.friend-request-response {
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}
.friend-request-response p {
  margin: 0 0 10px 0;
  font-size: 0.9em;
}
.response-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.response-actions form {
  margin: 0;
}
.response-actions button {
  padding: 5px 15px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-weight: bold;
}
.accept-btn {
  background-color: #4CAF50; /* 緑色 */
  color: white;
}
.reject-btn {
  background-color: #f44336; /* 赤色 */
  color: white;
}

.pending-btn {
  background-color: #777;
  color: white;
  border: 1px solid #666;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.pending-btn:hover {
  background-color: #e44d26; /* ホバー時に赤くして危険な操作だと分かるように */
}

#loop-toggle-btn img {
  width: 22px;
  height: 22px;
}

.playlist-owner {
  color: #222;
  margin: 0;
}

body.dark-mode {
  background-color: #121212;
  color: #ddd;
}

/* カード類のダークモード */
body.dark-mode .now-playing-modern,
body.dark-mode .now-playing-card,
body.dark-mode .report-form-box,
body.dark-mode .playlist-card,
body.dark-mode .friend-card,
body.dark-mode .modal-content,
body.dark-mode .friend-request-response,
body.dark-mode .report-item,
body.dark-mode .update-card {
  background-color: #333;
  color: #eee;
  border-color: #444;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #222;
  color: #eee;
  border-color: #555;
}

body.dark-mode nav {
  background-color: #111;
}

body.dark-mode footer {
  background-color: #333;
  color: #888;
  border-top-color: #333;
}

body.dark-mode .progress-rail {
  background: #444;
}

body.dark-mode .progress-time,
body.dark-mode .track-folder {
  color: #aaa;
}

body.dark-mode .track-row {
  background-color: #1a1a1a;
  border-color: #333;
}

body.dark-mode .track-row:hover {
  background-color: #222;
}

.suggestion-box {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 300px;
  display: none;
  z-index: 5000;        
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  overflow: hidden;

  max-height: 360px;    
  overflow-y: auto;

  /* 既存の固定幅(300px)が見にくさの原因になりがちなので削除/無効化 */
  width: auto;
  min-width: 300px;
}

/* 【追記】候補1件 */
.suggestion-item {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background-color: rgba(0,0,0,0.04);
}

.suggestion-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-path {
  font-size: 12px;
  opacity: 0.7;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


body.dark-mode .suggestion-box {
  background-color: #222;
  border-color: #555;
  color: #eee;
}

body.dark-mode .suggestion-item {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

body.dark-mode .suggestion-item:hover {
  background-color: rgba(255,255,255,0.06);
}

body.dark-mode .suggestion-path {
  opacity: 0.75;
}

body.dark-mode .content {
  background-color: #1a1a1a;
}

body.dark-mode .track-title,
body.dark-mode .track-artist,
body.dark-mode .track-filename {
  color: #eee;
}

body.dark-mode .suggestion-box div:hover {
  background-color: #333;
}

body.dark-mode #jacket {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

body.dark-mode .controls img {
  filter: brightness(0.9);
}

body.dark-mode .now-playing-card h3 {
  color: #fff;
}

body.dark-mode .now-playing-card pre,
body.dark-mode .playlist-owner,
body.dark-mode .friend-username,
body.dark-mode .profile-username,
body.dark-mode .section-title,
body.dark-mode .author {
  color: #ccc;
}

body.dark-mode .control-icon {
  filter: invert(1) !important; 
  opacity: 1 !important;
  transition: opacity 0.2s ease;
}

body.dark-mode .control-icon:hover {
  opacity: 0.7 !important; 
}

#fixed-controls {
  background-color: #f4f4f4;
}

body.dark-mode #fixed-controls {
  background-color: #1a1a1a;
}

body.dark-mode .track-row {
  background-color: #333;
  border: 1px solid #444;   
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 
}

body.dark-mode .track-row:hover {
  background-color: #2f2f2f;      
}

/*背景が#333の時のボタンたち*/
body.dark-mode .queue-btn,
body.dark-mode .play-btn,
body.dark-mode .add-playlist-btn,
body.dark-mode .preview-btn,
body.dark-mode .download-btn,
body.dark-mode .login-btn,
body.dark-mode .track-detail-btn,
body.dark-mode .friends-btn,
body.dark-mode .request-modal-btn,
body.dark-mode .admin-btn,
body.dark-mode .admin-upd-btn,
body.dark-mode .save-btn,
body.dark-mode .addlist-btn,
body.dark-mode .cncl-btn,
body.dark-mode .cnf_save-btn,
body.dark-mode .cnf_test-btn {
  background-color: #161616;
  color: white;
}

/*背景が#333の時のボタンたちのhover*/
body.dark-mode .queue-btn:hover,
body.dark-mode .play-btn:hover,
body.dark-mode .add-playlist-btn:hover,
body.dark-mode .preview-btn:hover,
body.dark-mode .login-btn:hover,
body.dark-mode .download-btn:hover,
body.dark-mode .track-detail-btn:hover,
body.dark-mode .friends-btn:hover,
body.dark-mode .request-modal-btn:hover,
body.dark-mode .admin-btn:hover,
body.dark-mode .admin-upd-btn:hover,
body.dark-mode .save-btn:hover,
body.dark-mode .addlist-btn:hover,
body.dark-mode .cncl-btn:hover,
body.dark-mode .cnf_save-btn:hover,
body.dark-mode .cnf_test-btn:hover  {
  background-color: #000;
}

/*フレンドの表示名関連*/
body.dark-mode .friend-status-item span,
body.dark-mode .friend-name {
  color: #eee !important;
}

/*フレンドの表示名関連のhover*/
body.dark-mode .friend-status-item span:hover,
body.dark-mode .friend-name:hover {
  color: #b8b6b6 !important;
}

body.dark-mode .modal-content a {
  color: #42a5f5;
}

body.dark-mode .modal-content a:hover {
  color: #90caf9;
}

body.dark-mode .accept-btn:hover {
  background-color: #39863b;
}
body.dark-mode .reject-btn:hover {
  background-color: #a32c24; 
}

body.dark-mode .chip,
body.dark-mode .tag {
  background-color: #333;
  color: white;
}

body.dark-mode .chip:hover {
  background-color: #272727;
}

/* 🌙 ダークモード時のユーザー管理テーブル */
body.dark-mode table {
  background-color: #2a2a2a;
  border-color: #444;
  color: #eee;
}

body.dark-mode th {
  background-color: #3a3a3a;
  color: #fff;
  border-color: #555;
}

body.dark-mode td {
  background-color: #2a2a2a;
  color: #ddd;
  border-color: #444;
}

body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode select {
  background-color: #1e1e1e;
  color: #eee;
  border: 1px solid #555;
}

body.dark-mode #toggle-darkmode {
  background-color: #444;
  color: white;
  border: 1px solid #777;
}

body.dark-mode .rich-info-box {
  color: #ddd;
}

body.dark-mode .rich-info-box a {
  color: #90caf9;
}

body.dark-mode .dropdown-menu {
  background-color: #333;
  border-color: #555;
}

body.dark-mode #editor {
  background-color: #222 !important;
  color: #eee !important;
  border: 1px solid #444;
}

body.dark-mode #editor .ql-editor {
  background-color: #222 !important;
  color: #eee !important;
}

body.dark-mode .report-item-link:hover .report-item {
  background-color: #212121 !important;
}

body.dark-mode .pagination-btn {
  background-color: #444;
  color: white;
  border-color: #666;
}

body.dark-mode .pagination-btn:hover {
  background-color: #666;
}

body.dark-mode .pagination-btn.active {
  background-color: #2196f3;
  border-color: #2196f3;
  color: white;
}

body.dark-mode .notification-item {
  background: #1a1a1a;
  border-color: #444;
  color: #eee;
}

body.dark-mode .notification-item.unread {
  background: #2a2a2a;
}

body.dark-mode .notification-time {
  color: #aaa;
}

body.dark-mode .notification-message {
  color: #eee;
}

/* 🌙 ダークモード時のフレンド状態表示 */
body.dark-mode .friend-status-text {
  color: inherit !important; /* デフォルトの上書きを防ぐ */
}

body.dark-mode .friend-status-item.online .friend-status-text {
  color: #00c853 !important; /* 緑：オンライン */
}

body.dark-mode .friend-status-item.idle .friend-status-text {
  color: #ffa000 !important; /* オレンジ：離席中 */
}

body.dark-mode .friend-status-item.offline .friend-status-text {
  color: #999 !important; /* 灰色：オフライン */
}

/* 🌙 ダークモード時のプロフィール画面のフレンド状態表示 */
body.dark-mode .friend-status-text.online {
  color: #00c853 !important; /* 緑：オンライン */
}

body.dark-mode .friend-status-text.idle {
  color: #ffa000 !important; /* オレンジ：離席中 */
}

body.dark-mode .friend-status-text.offline {
  color: #999 !important; /* 灰色：オフライン */
}

body.dark-mode .menu-trigger{
  color: #ddd;            /* ⋮ ボタンも明るく */
}

body.dark-mode .dropdown-menu{
  background-color: #333; /* 既存でもOK。ここで再確認 */
  border-color: #555;
  box-shadow: 0 6px 16px rgba(0,0,0,.6);
}

body.dark-mode .dropdown-menu a{
  color: #eee !important; /* 文字を明るく！ */
}

body.dark-mode .dropdown-menu a:hover{
  background-color: #444; /* ホバー時もしっかり見えるように */
}

body.dark-mode .queue-separator {
  background: #555;
}

body.dark-mode .track-row.not-draggable,
body.dark-mode .track-row.not-draggable:hover,
body.dark-mode .track-row.not-draggable.sortable-chosen,
body.dark-mode .track-row.not-draggable.sortable-ghost {
  background-color: #1a1a1a !important; /* 既定のダーク背景に固定 */
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* 🌙 ダークモード：共通モーダル */
body.dark-mode .modal-dialog {
  background: #1f1f1f;
  color: #eee;
  border: 1px solid #444;
}

body.dark-mode .modal-header {
  border-bottom-color: #333;
}

body.dark-mode .modal-close {
  color: #eee;
}

/* モーダル内フォーム部品をちゃんと暗くする（textareaも対象に入れる！） */
body.dark-mode .modal-body input[type="text"],
body.dark-mode .modal-body input[type="password"],
body.dark-mode .modal-body input[type="file"],
body.dark-mode .modal-body select,
body.dark-mode .modal-body textarea {
  background: #111;
  color: #eee;
  border-color: #444;
}


/* スイッチ全体の配置 */
.switch-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* スイッチ本体 */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* 丸がスライドする部分 */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 28px;
}

/* 丸そのもの */
.slider::before {
  position: absolute;
  content: "";
  height: 20px; width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

/* チェックされたら右にスライド */
.switch input:checked + .slider {
  background-color: #2196f3;
}
.switch input:checked + .slider::before {
  transform: translateX(22px);
}

/* ラベル（"🌙 ダークモード"） */
.switch-label {
  font-size: 1em;
  color: inherit;
}

.rich-info-box {
  font-size: 0.95em; 
  line-height: 1.1; 
  color: #222;
  white-space: normal;
}

.rich-info-box p {
  margin: 0 0 12px;
}

.rich-info-box strong {
  font-weight: bold;
}

.rich-info-box em {
  font-style: italic;
}

.rich-info-box a {
  color: #2196f3;
  text-decoration: underline;
}

.rich-info-box img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 8px 0;
}

.report-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}

.menu-trigger {
  cursor: pointer;
  font-size: 20px;
  background: none;
  border: none;
  color: #666;
  padding: 4px;
}

.dropdown-menu {
  position: absolute;
  top: 28px;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  padding: 6px 0;            /* ← 内側余白は上下だけに */
  z-index: 20;
  display: block;            /* ← flexをやめてブロックに */
  min-width: 180px;          /* ← 横幅を確保 */
  white-space: nowrap;       /* ← 日本語を1行で維持 */
}

.dropdown-menu a {
  display: block;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background: #f5f5f5;
}

.hidden {
  display: none !important;
}

.report-item-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.report-item-link:hover .report-item {
  background-color: #f6f6f6;
  transform: translateX(2px);
  transition: 0.15s ease;
}

.notif-icon {
  filter: invert(1);
  border-radius: 0 !important;
}

.pagination-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.pagination-btn {
  background-color: #eee;
  color: #333;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #ccc;
  transition: background-color 0.2s;
}

.pagination-btn:hover {
  background-color: #ddd;
}

.pagination-btn.active {
  background-color: #2196f3;
  color: white;
  pointer-events: none;
  border-color: #2196f3;
}

/* 通知一覧用スタイル */
.notification-list {
  list-style: none;
  padding: 0;
}

.notification-item {
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  position: relative;
  padding-right: 3rem; /* 右端にボタン分の余白 */
}

.notification-item.unread {
  background: #ffefef;
}

.notification-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.notification-time {
  font-size: 0.9em;
  color: #666;
}

.notification-message {
  font-weight: bold;
  white-space: pre-wrap;     /* ← \n を改行として表示する */
  overflow-wrap: anywhere;   /* ← 長いURLや英数字もはみ出さない */
  word-break: break-word;    /* ← 念のため */
  line-height: 1.4;          /* ← 読みやすく */
}
html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", sans-serif;
  background-color: #f2f2f2;
}

.hist-msg {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}

body.db-layout {
  display: flex;
  overflow: hidden;
}

body.db-layout .db-sidebar {
  width: 200px;
  background-color: #022c4a;
  color: white;
  height: 100vh;
  padding: 20px;
  flex-shrink: 0;
}

body.db-layout .db-content {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 100vh; 
  box-sizing: border-box;
  padding: 30px;
  background: white;
}

.track-detail-card {
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  padding: 30px;
  max-width: 600px;
  margin: 20px auto;
}

.track-detail-title {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 1.6em;
  color: #333;
}

.track-detail-info > div {
  margin-bottom: 12px;
  font-size: 1em;
  color: #444;
}

.back-btn {
  display: inline-block;
  margin-top: 20px;
  background-color: #444;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.back-btn:hover {
  background-color: #000;
}

.track-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.track-detail-table th {
  text-align: left;
  background-color: #f0f0f0;
  padding: 12px;
  width: 150px;
  vertical-align: top;
  font-weight: bold;
  font-size: 1.05em;
}

.track-detail-table td {
  padding: 12px;
  background-color: #fff;
  font-size: 1em;
  line-height: 1.6;
}

.track-detail-table code {
  background-color: #eee;
  padding: 2px 6px;
  border-radius: 4px;
}

.tag {
  display: inline-block;
  background-color: #e3f2fd;
  color: #1565c0;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9em;
}

.clean-info-box {
  max-width: 600px;
  margin: 20px 0 40px 10px; 
  background: #fff;
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); 
  font-size: 1em;
}


.track-title-with-icon {
  font-size: 1.4em;
  margin-bottom: 24px;
  color: #222;
}

.info-item {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
  padding: 12px 0;
}

.info-item:first-of-type {
  border-top: none;
}

.info-label {
  font-weight: bold;
  color: #555;
  width: 120px;
}

.info-value {
  flex: 1;
  text-align: left;
  color: #222;
}

.clickable-row:hover {
  background-color: #f3faff;
}

.friend-status-text {
  font-size: 0.8em;
  margin-top: 2px;
}

.friend-name-text {
  font-weight: bold;
  color: #000;  /* デフォルトは黒（オンライン・離席中） */
}

.friend-status-item.offline .friend-name-text {
  color: #999;  /* オフラインは灰色 */
}

.profile-username-status {
  display: flex;
  align-items: center;
  gap: 20px; /* 名前と状態の間に余白 */
}

.profile-username {
  margin: 0;  /* 余計な隙間を消す */
}
.friend-status-text {
  margin: 0;  /* これも隙間なしに */
  font-size: 0.95em; /* 好みに合わせて少し小さめに */
}

.friend-status-text.online {
  color: #00c853; /* 緑：オンライン */
}
.friend-status-text.idle {
  color: #ffa000; /* オレンジ：離席中 */
}
.friend-status-text.offline {
  color: #999;    /* 灰色：オフライン */
}

.menu-container {
  position: relative;
  display: inline-block;
}

.dropdown-menu a.disabled,
.dropdown-menu a[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.track-grid .empty-message {
  grid-column: 1 / -1;   /* すべての列をまたいで幅いっぱいに！ */
  margin: 8px 2px;
  font-size: 1rem;
}

.playlist-owner .author-link {
  color: inherit;          /* 文字色はそのまま */
  text-decoration: none;   /* 下線ナシ */
  font-weight: inherit;    /* 太さもそのまま */
}

.playlist-owner .author-link:hover,
.playlist-owner .author-link:focus,
.playlist-owner .author-link:active {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.queue-heading {
  margin: 0 0 6px;
  font-weight: 700;
  display: block;
}

.queue-loop-row {
  display: flex;
  justify-content: flex-start;  
  align-items: center;
  margin: 12px 0 14px;
  gap: 16px;
}

#loop-toggle-btn,
#shuffle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;                    /* ← 余白をなくしてアイコンだけに */
  background: transparent;       /* ← 色ナシ！ */
  border-radius: 0;              /* ← 角丸も不要 */
  cursor: pointer;
}
#loop-toggle-btn:hover,
#shuffle-btn:hover { opacity: .9; }
#loop-toggle-btn:active,
#shuffle-btn:active { transform: translateY(1px) scale(.98); }

.queue-separator {
  border: none;
  height: 2px;                   /* ← ちょい太め */
  background: #cbd5e1;           /* ← 見えやすいグレー */
  margin: 10px 0 14px;
}

.track-row.not-draggable {
  pointer-events: none;        /* ← これで hover/click を完全ブロック */
  cursor: default;
  transform: none !important;
}

.track-row.not-draggable:hover,
.track-row.not-draggable.sortable-chosen,
.track-row.not-draggable.sortable-ghost {
  transform: none !important;       /* 横ズレ等を無効 */
  background-color: #fff !important;/* 既定の白に固定（ライト） */
  box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 元の影に戻す */
}

.btn-primary{
  display:inline-block; padding:8px 14px; border-radius:6px;
  background:#0e85ad; color:#fff; text-decoration:none; font-weight:600;
}

.btn-primary:hover{ opacity:.9; }

/* ==== Archive tabs ==== */
.tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border-radius: 10px;
  text-decoration: none;

  /* 未選択タブの視認性UP */
  background: #F1F5F9;          /* 明るいグレー（背景と差をつける） */
  border: 1px solid #CBD5E1;     /* 薄い枠線で輪郭を出す */
  color: #6c798b;                /* 少し濃い文字色 */
}
.tab:visited { color: #334155; }

.tab:hover {
  background: #E2E8F0;          /* ほんのり濃くしてホバー感 */
  border-color: #94A3B8;
}

.tab.active {
  /* 選択中タブはコントラスト高めの主色 */
  background: #2563EB;          /* おにいちゃんの今の青に合わせて濃い目 */
  border-color: #1D4ED8;
  color: #fff;
}

/* プロフィールの名前行をアイコンとバッジ込みで縦中央揃えに */
.friend-profile-texts h2{
  display: inline-flex;      /* 1行内に収めつつレイアウト */
  align-items: center;       /* 画像と文字の“高さ”を中央で揃える */
  gap: 10px;                 /* 文字とバッジのすき間 */
  margin: 0;
  margin-bottom: 8px;
  font-size: 1.5em;
  line-height: 1.2;          /* 下のラインと干渉しない程度に */
}

/* バッジの基本サイズ。display:block で余計なベースライン影響を消す */
.role-badge{
  height: 24px;
  display: block;
}

/* ===== Modal (simple, no framework) ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-backdrop.show { display: flex; }

.modal-dialog {
  width: min(680px, 92vw);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
}
.modal-header h3 { margin: 0; font-size: 18px; }
.modal-close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.modal-body { padding: 16px 18px; }
.form-row { display: grid; gap: 6px; margin-bottom: 12px; }
.form-row label { font-size: 14px; }
.form-row .req { color: #e11; margin-left: 4px; }

.modal-body input[type="text"],
.modal-body input[type="password"],
.modal-body input[type="file"],
.modal-body select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
}

/* モーダル内のtextareaも統一 */
.modal-body textarea{
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
  resize: vertical; /* 好み。縦だけ伸ばせる */
}

.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 18px 18px;
}

.mt-24 { margin-top: 24px; }

/* 説明文などに使う薄字 */
.help-text {
  opacity: .75;
  font-size: .95em;
}

/* Bot共通設定：小見出し */
.settings-subtitle {
  font-size: 1.25rem;   /* 見出し感アップ！ */
  font-weight: 700;
  margin: 10px 0 6px;
  color: #333;
}

/* ダークモードでも視認性キープ */
body.dark-mode .settings-subtitle {
  color: #eee;
}

.notif-more-btn {
  position: absolute;
  right: .75rem;
  top: .5rem;
  border: none;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  opacity: .6;
}
.notif-more-btn:hover { opacity: 1; }

.notif-menu {
  position: absolute;
  right: .5rem;
  top: 2rem;
  background: #fff;           /* ダーク時は #222 などに合わせて */
  border: 1px solid #ddd;     /* ダーク時は #444 などに合わせて */
  border-radius: .5rem;
  padding: .25rem;
  min-width: 6rem;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.notif-delete-btn {
  width: 100%;
  border: none;
  background: transparent;
  padding: .5rem .75rem;
  text-align: left;
  cursor: pointer;
}
.notif-delete-btn:hover {
  background: rgba(255,0,0,.07);
  color: #c00;
}

/* 通知の三点メニュー（常時見える＆明るい背景） */
.notification-item .notif-more-btn{
  position: absolute;
  top: 10px;
  right: 12px;

  /* ボタン見た目を完全リセット */
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  /* 文字としての…だけ */
  padding: 0;
  margin: 0;
  width: auto;
  height: auto;
  line-height: 1;
  font-size: 20px;    /* お好みで調整してね */
  color: #666;        /* お好みで */
  cursor: pointer;    /* マウス形だけ変える */
}

.notification-item .notif-more-btn:hover,
.notification-item .notif-more-btn:focus,
.notification-item .notif-more-btn:active{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}

/* メニュー（位置と見た目） */
.notification-item .notif-menu{
  position: absolute;
  top: 50px;   /* ボタンの下に出す */
  right: 12px;
  min-width: 140px;
  padding: 6px;
  background: #fff;
  border: 1px solid #dcdde1;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.notification-item .notif-menu[hidden]{ display: none; }

.notification-item .notif-menu .notif-delete-btn{
  background: #ff0000;          /* ほんのり赤背景（白と差が出る） */
  color: #ffffff;               /* 濃い赤文字で“削除”感 */
  border: 1px solid #f3b4b4;    /* 輪郭を出す */
  font-weight: 600;             /* 視認性UP */
}

.notification-item .notif-menu .notif-delete-btn:hover{
  background: #840000;          /* ホバーで一段濃く */
}

.notification-item .notif-menu .notif-delete-btn:focus-visible{
  outline: 2px solid #ef4444;   /* キーボード操作でも見失わない */
  outline-offset: 2px;
}

/* 🌙 ダークモード用（既存のダークテーマに合わせる） */
body.dark-mode .notification-item .notif-more-btn{
  background: #2a2a2a;
  border-color: #444;
  color: #eee;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
body.dark-mode .notification-item .notif-more-btn:hover{
  background: #333;
}
body.dark-mode .notification-item .notif-menu{
  background: #2b2b2b;
  border-color: #555;
  box-shadow: 0 10px 26px rgba(0,0,0,.6);
}
body.dark-mode .notification-item .notif-menu .notif-delete-btn{
  background: #ff0000;
  color: #ffffff;               /* 明るめの赤 */
  border: 1px solid #5b2d2d;
}
body.dark-mode .notification-item .notif-menu .notif-delete-btn:hover{
  background: #7b0000;
}

/* === 通知見出し（「通知」の右に出す ⋯） === */
.notif-header{
  display:flex;
  align-items:center;
  gap:.5rem;
  position:relative;        /* ← 見出し用メニューの基準にする */
  margin-bottom: 10px;
}

.notif-header h2{
  margin:0;
}

.notif-header-more{
  margin-left:auto;          /* 右端に寄せる */
  background:transparent;    /* ボタンっぽさを消す */
  border:none;
  padding:4px;
  line-height:1;
  font-size:22px;            /* 見やすい大きさ */
  color:#888;                /* 常時見える薄いグレー */
  cursor:pointer;            /* ポインターにする */
}
.notif-header-more:hover{ color:#333; }

body.dark-mode .notif-header-more{ color:#ddd; }
body.dark-mode .notif-header-more:hover{ color:#fff; }

/* 見出し用のドロップダウン（位置だけ個別に） */
.notif-header .notif-menu{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  background:#fff;
  border:1px solid #ccc;
  border-radius:8px;
  min-width:220px;
  padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:30;
}
body.dark-mode .notif-header .notif-menu{
  background:#333;
  border-color:#555;
}

/* 既存のメニュー内ボタンを見やすく */
.notif-header .notif-delete-btn{
  width:100%;
  background:#e53935;
  color:#fff;
  border:none;
  border-radius:6px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
}
.notif-header .notif-delete-btn:hover{ background:#c62828; }

/* === 再生履歴：常時表示のメタ情報 === */
.history_track-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history_track-titleline {
  display: flex;
  align-items: center;
  gap: 12px;              /* タイトルとフォルダの間の余白 */
}

.history_track-titleline .track-filename {
  flex: 1;
  min-width: 0;           /* 長いタイトルでも折り返しじゃなく省略表示にする用 */
}

.history_track-titleline .track-folder {
  margin-left: auto;      /* これで右端までぐーっと押し出す */
  text-align: right;      /* 右揃え（既存の指定でもOKだけど一応） */
}

.history_track-meta {
  font-size: 0.9em;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 10px;
}

.history_track-meta-link {
  color: inherit;
  text-decoration: none;
}

.history_track-meta-link:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .history_track-meta { font-size: 0.85em; }
}

/* ▼▼ モバイル用レイアウト（幅768px以下） ▼▼ */
.mobile-menu-button {
  display: none;               /* PCでは非表示 */
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  margin-right: 10px;
  padding: 4px 8px;
}

/* オーバーレイ（サイドバーの後ろの薄い黒） */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1400;
}

/* =========================
   ▼ モバイル固定ボトムメニュー
   ========================= */
.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background-color: #111;
  border-top: 1px solid #333;
  display: none;                 /* デフォは非表示 → メディアクエリでON */
  align-items: center;
  justify-content: space-around;
  padding: 4px 12px;
  z-index: 1200;
}

.bottom-nav-btn {
  background: none;
  border: none;
  color: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 0;
  cursor: pointer;
}

.bottom-nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
}

/* ボトムメニューのハンバーガーアイコン用 */
.bottom-nav-hamburger {
  font-size: 24px;      /* 他のアイコンと同じくらいの大きさに */
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-user-icon {
  border-radius: 50%;
  object-fit: cover;
}

.bottom-user-menu {
  position: relative;
}

/* モバイル用ユーザーメニューの中身 */
.bottom-user-dropdown {
  position: absolute;
  bottom: 60px;
  right: 0;
  background-color: #222;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 6px 0;
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  display: none;
  z-index: 1300;
}

.bottom-user-dropdown.open {
  display: block;
}

.bottom-user-dropdown a {
  display: block;
  padding: 8px 14px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.bottom-user-dropdown a:hover {
  background-color: #333;
}

.bottom-user-name {
  padding: 8px 14px;
  font-weight: bold;
  color: #fff;
  border-bottom: 1px solid #444;
}

.bottom-nav-label {
  font-size: 10px;
}

/* オーバーレイ（すでに無ければ） */
.sidebar-overlay {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  z-index: 1000;
}

.sidebar-overlay.active {
  display: block;
}

/* トップバー左側を横並びに */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* === トップバーのNow Playing（長い曲名はスクロール） === */
#now-playing-info {
  min-width: 0;          /* flexの中で縮められるように */
  overflow: hidden;      /* はみ出しは隠す（改行させない） */
}

.topbar-np-title {
  color: #ccc;
  font-size: 0.85em;
  font-weight: normal;
  line-height: 1.2;

  white-space: nowrap;   /* 改行禁止 */
  overflow: hidden;      /* はみ出し隠す */
  max-width: 360px;      /* 好みで調整OK（トップバー幅に合わせる） */
}

/* indexの .track-title.marquee と同じ仕組みを流用 */
.topbar-np-title.marquee .marquee-inner {
  display: inline-block;
  white-space: nowrap;
  animation: seamless-loop var(--total-duration) linear infinite;
}

.topbar-np-title.marquee .marquee-inner span {
  display: inline-block;
  margin-right: 40px;    /* indexと同じ間隔 */
}

/* トップバー：アーティスト名は省略(...)＋ホバーで全文 */
.topbar-np-artist {
  color: #888;
  font-size: 0.7em;
  font-weight: normal;
  line-height: 1.2;

  max-width: 360px;       /* 曲名（topbar-np-title）と同じ幅 */
  white-space: nowrap;    /* 改行させない */
  overflow: hidden;       /* はみ出しは隠す */
  text-overflow: ellipsis;/* ... 省略 */
}

/* ハンバーガーボタンの共通スタイル */
.mobile-menu-button {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  margin-right: 8px;
  cursor: pointer;
  display: none;   /* PCでは非表示、モバイルで出す */
}

/* ダークモード時のボトムメニュー */
body.dark-mode .mobile-bottom-nav {
  background-color: #000;
  border-top-color: #333;
}

body.dark-mode .bottom-user-dropdown {
  background-color: #333;
  border-color: #555;
}

/* 1. 全体を囲むグリッドコンテナ */
.dashboard-grid {
  display: grid;
  width: 100%;
  margin-top: 20px;
  gap: 20px;
  /* PC版：横6分割のグリッドを作る（3列と2列を共存させるため） */
  grid-template-columns: repeat(6, 1fr);
  align-items: start;  /* 高さを揃える */
}

/* --- PC版の配置設定 --- */

/* 上段の3枚（キュー、再生中、おすすめ）は「幅2」ずつ使って3つ並べる */
.home-queue-card     { grid-column: span 2; }
.now-playing-modern  { grid-column: span 2; }
.home-recommend-card { grid-column: span 2; }

/* 下段の2枚（お知らせ、フレンド）は「幅3」ずつ使って2つ並べる */
.home-news-card { grid-column: span 3; }
.friends-card   { grid-column: span 3; }


/* --- カードごとのリセットと調整 --- */

/* グリッド内のカード共通設定 */
.dashboard-grid .now-playing-card {
  margin-top: 0;           /* 個別のマージンを消してgapに任せる */
  height: auto;            /* 高さ指定解除 */
  display: flex;
  flex-direction: column;  /* 中身を縦並びに */
  box-sizing: border-box !important;
  min-width: 0;            /* 文字はみ出し防止 */
  width: 100%;
}

/* 再生中カード（真ん中）の強制スタイル上書き */
.dashboard-grid .now-playing-modern {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  box-sizing: border-box;
  min-width: 0;
}

/* リスト部分（キュー・おすすめ）の高さを埋める設定 */
.queue-preview-body,
.recommend-body {
  flex: 1;               
  overflow-y: auto;      /* ← 縦スクロールOK */
  overflow-x: hidden;      
  min-height: 0;         
  display: flex;
  flex-direction: column;
}
.recommend-body { gap: 8px; }


/* --- 再生中カードの中身のサイズ調整（以前の調整を引き継ぎ） --- */
.dashboard-grid .now-playing-modern .controls {
  gap: 8px !important;
  justify-content: space-around;
  width: 85% !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

.dashboard-grid .now-playing-modern .track-title,
.dashboard-grid .now-playing-modern .progress-wrap {
  max-width: 100% !important;
  width: 75% !important;
  margin-left: auto;
  margin-right: auto;
}

.dashboard-grid .now-playing-modern #jacket {
  width: 100%;
  max-width: 250px; /* ジャケット画像の最大サイズ */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.toast-container{
  position: fixed;
  top: 72px;              /* トップバー(60px) + ちょい余白 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;

  pointer-events: none;   /* ★重要：コンテナが操作を邪魔しない */
  z-index: 2000;
}

.toast{
  pointer-events: auto;   /* toast自体はクリック可能（×ボタン用） */
  background: rgba(20,20,20,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 220px;
  max-width: 360px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.toast.show{
  opacity: 1;
  transform: translateY(0);
}

.toast.success{ border-color: rgba(0,200,83,.35); }
.toast.error{ border-color: rgba(244,67,54,.35); }
.toast.info{ border-color: rgba(33,150,243,.35); }

.toast .toast-msg{
  font-size: .92rem;
  line-height: 1.2;
  word-break: break-word;
}

.toast .toast-close{
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: .75;
  padding: 2px 6px;
}
.toast .toast-close:hover{ opacity: 1; }

/* ダークモードでも違和感ないように（ほぼ同じでOK） */
body.dark-mode .toast{
  background: rgba(10,10,10,.92);
  border-color: rgba(255,255,255,.16);
}

/* 再生キュー「キューをすべて見る」リンク */
.queue-preview-footer a {
  color: #0e85ad;
  font-size: 0.8rem;
  text-decoration: none;
}

.queue-preview-footer a:hover {
  text-decoration: underline;
}

/* 🌙 ダークモード用 */
body.dark-mode .queue-preview-footer a {
  color: #7dd3fc; /* 明るめの水色で視認性アップ */
}

.settings-layout{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 12px;
}

/* 左メニューは“カード”じゃなくて、Xみたいにフラット＋区切り線 */
.settings-sidebar{
  padding: 8px 0;
  border-right: 1px solid #e5e7eb;
}

/* “行” */
.settings-nav-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  border: none;
  background: transparent;
  cursor: pointer;

  padding: 14px 16px;
  border-left: 3px solid transparent;

  color: inherit;
  text-align: left;
  font-weight: 600;
  border-radius: 0;
}

.settings-nav-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.settings-nav-icon{
  width: 22px;
  display: inline-flex;
  justify-content: center;
  opacity: .9;
}

.settings-nav-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-nav-chevron{
  opacity: .55;
  font-size: 20px;
  line-height: 1;
}

.settings-nav-item:hover{
  background: rgba(0,0,0,0.04);
}

.settings-nav-item.active{
  background: rgba(37,99,235,0.08); /* 今のテーマの青を薄く */
  border-left-color: #2563eb;
}

/* 右側コンテンツ */
.settings-content{
  min-width: 0;
}

.settings-panel{
  display: none;
}

.settings-panel.active{
  display: block;
}

.settings-section-title{
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: 800;
}

body.dark-mode .settings-sidebar{
  border-right-color: #222;
}

body.dark-mode .settings-nav-item:hover{
  background: rgba(255,255,255,0.04);
}

body.dark-mode .settings-nav-item.active{
  background: rgba(37,99,235,0.18);
  border-left-color: #2563eb;
}

.settings-profile-wrap{
  max-width: 780px;
}

.settings-row{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #e5e7eb;
}

.settings-row-title{
  font-weight: 800;
  color: #111827;
  padding-left: 6px;
}

.settings-row-body{
  min-width: 0;
}

.settings-row-help{
  margin-top: 8px;
  font-size: 12px;
  opacity: .7;
}

.settings-email-block{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-email-top{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pending-badge{
  color: #d32f2f;
  font-weight: 800;
  border: 1px solid rgba(211,47,47,.35);
  background: rgba(211,47,47,.08);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.9em;
  line-height: 1.6;
}

/* 【再送リンク */
.resend-link{
  color: #0e85ad;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}

.resend-link:hover{
  text-decoration: underline;
}

/* 再送中はクリックさせない */
.resend-link.is-disabled{
  opacity: 0.5;
  pointer-events: none;
}

input.settings-input{
  width: min(520px, 100%);
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

body.dark-mode input.settings-input{
  background: #111827;
  border-color: #374151;
  color: #e5e7eb;
}

.settings-actions{
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
}

.settings-linkbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 10px;

  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #111827;

  cursor: pointer;
  font-weight: 800;
}

.settings-linkbtn:hover{
  background: #e5e7eb;
  text-decoration: none; /* 下線やめる */
}

.settings-linkbtn:active{
  transform: translateY(1px);
}

.settings-linkbtn-chevron{
  opacity: .6;
  font-size: 20px;
  line-height: 1;
}

body.dark-mode .settings-row{
  border-bottom-color: #222;
}

body.dark-mode .settings-row-title{
  color: #e5e7eb;
}

body.dark-mode .settings-input{
  background: #111827;
  border-color: #374151;
  color: #e5e7eb;
}

.settings-icon-row .settings-row-body{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.settings-icon-row .icon-container{
  margin: 0;              /* 中央寄せを殺す */
  justify-content: flex-start;
}

body.dark-mode .settings-linkbtn{
  border-color: #374151;
  background: #111827;
  color: #e5e7eb;
}

body.dark-mode .settings-linkbtn:hover{
  background: #1f2937;
}

.notif-edit-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.notif-edit-modal-content {
  width: min(720px, 92vw);
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.notif-edit-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.notif-edit-close {
  background: transparent !important;
  color: #333 !important;
  font-size: 22px;
  padding: 0 8px !important;
}

.notif-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.notif-edit-cancel {
  background: #777 !important;
}

.notif-edit-save {
  background: #2196f3 !important;
}
.notif-edit-save:hover {
  background: #1976d2 !important;
}

.notif-edit-modal-content input,
.notif-edit-modal-content textarea {
  box-sizing: border-box;
  max-width: 100%;
  margin: 6px 0;
}

/* 🌙 ダークモード対応（好みで） */
body.dark-mode .notif-edit-modal-content {
  background: #333;
  color: #eee;
  border: 1px solid #444;
}
body.dark-mode .notif-edit-close {
  color: #eee !important;
}

/* === レポート画面ヘッダー（右側にボタン類を寄せる） === */
.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.report-title {
  margin: 0;
}

.report-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* === report-btn を a タグにもボタンっぽく適用する === */
a.report-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 6px 4px;
  border-radius: 6px;
  font-size: 0.95em;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none; /* ← 下線を消す（いま inline style で消してたやつ） */
}

a.report-btn:hover {
  background-color: #000;
}

/* 念のため：リンクのフォーカス時に変な枠が出すぎないように */
a.report-btn:focus {
  outline: none;
}

/* ===== レポート一覧（簡素テーブル） ===== */
.report-table-wrap {
  background: transparent;
  margin-top: 14px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.report-table th {
  text-align: left;
  background: #f3f4f6;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
}

.report-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

.report-row {
  cursor: pointer;
}

.report-row:hover {
  background: #f7f7f7;
}

.col-title {
  font-weight: 650;
}

.author-line {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.author-username {
  color: #6b7280;
  font-size: 0.85em;
}

.col-last {
  color: #6b7280;
  font-size: 0.92em;
}

/* 🌙 ダークモード */
body.dark-mode .report-table {
  background: #333;
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}

body.dark-mode .report-table th {
  background: #2a2a2a;
  border-bottom-color: #444;
  color: #eee;
}

body.dark-mode .report-table td {
  border-bottom-color: #444;
  color: #eee;
}

body.dark-mode .report-row:hover {
  background: #2b2b2b;
}

body.dark-mode .author-username,
body.dark-mode .col-last {
  color: #aaa;
}

/* === report: softer list (tableっぽさを消す) === */
.report-softlist{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 14px;
}

.report-softhead{
  display: grid;
  grid-template-columns: 2.2fr 1fr 0.9fr 1.4fr 0.6fr 1fr;
  gap: 12px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: #6b7280;
  background: #fafafa;
}

.report-softrow{
  display: grid;
  grid-template-columns: 2.2fr 1fr 0.9fr 1.4fr 0.6fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid #f1f5f9;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}

.report-softrow:hover{
  background: #f9fafb;
}

/* 🌙 ダークモード：レポート一覧（soft list版） */
body.dark-mode .report-softlist{
  background: #1f1f1f;
  border-color: #444;
}

body.dark-mode .report-softhead{
  background: #2a2a2a;
  color: #aaa;
  border-bottom: 1px solid #444;
}

body.dark-mode .report-softrow{
  border-top-color: #333;
  color: #eee;
}

body.dark-mode .report-softrow:hover{
  background: #2b2b2b;
}

body.dark-mode .soft-author .author-username{
  color: #aaa;
}

.soft-title{
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soft-category{
  font-size: 0.9rem;
}

.soft-author .author-name{
  font-weight: 600;
  line-height: 1.1;
}

.soft-author .author-username{
  font-size: 0.8rem;
  color: #6b7280;
}

.soft-comments {
  text-align: left;
}

.center{
  text-align: center;
}

.edit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;


  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;


  color: #333;
  font-weight: 600;
  cursor: pointer;
}

body.dark-mode .edit-btn {
  color: #eee; /* 白文字 */
}

.edit-btn:hover {
  cursor: pointer;
}

.edit-form {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed #bbb;
  border-radius: 6px;
  background: #fff;
}

.edit-form label {
  display: block;
  margin-top: 8px;
  font-weight: bold;
}

.edit-form input,
.edit-form select,
.edit-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
}

/* レポート詳細：作者（アイコン・表示名・@username）をクリック可能に */
.author-link{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.author-link:hover{
  opacity: 0.85;
}

.author-username{
  color: gray;
}

body.dark-mode .author-username{
  color: #aaa;
}

/* ===== ログインモーダルの入力欄を完全に揃える ===== */
#login-modal .modal-content input[type="text"],
#login-modal .modal-content input[type="password"] {
  display: block;          /* ← 行を独立させる */
  width: 100%;
  padding: 10px 12px;      /* 左右余白を統一 */
  box-sizing: border-box;  /* 幅計算を安定させる */
  margin-top: 6px;         /* ラベルとの間隔 */
}

/* ✅メール登録うながしポップアップ */
.email-prompt{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
}

.email-prompt-card{
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 14px;
  padding: 18px 18px 16px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.email-prompt-close{
  position: absolute;
  right: 10px;
  top: 8px;
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  opacity: .7;
  color: #555;
}

.email-prompt-close:hover{
  opacity: 1;
}

.email-prompt-title{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 8px;
}

.email-prompt-text{
  font-size: 14px;
  opacity: .85;
  line-height: 1.6;
  margin-bottom: 12px;
}

.email-prompt-link{
  display: inline-block;
  font-weight: 800;
  color: #0e85ad;
  text-decoration: none;
}

.email-prompt-link:hover{
  text-decoration: underline;
}

body.dark-mode .email-prompt-card{
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #374151;
}

body.dark-mode .email-prompt-text{
  opacity: .9;
}

body.dark-mode .email-prompt-close{
  color: #e5e7eb;
}

/* 画面が狭いときは縦並び寄りに */
@media (max-width: 820px){
  .report-softhead{ display:none; }
  .report-softrow{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .soft-comments.center{ text-align:left; }
}

/* =========================================================
   ▼ タブレット・iPad横向き用（1001px 〜 1400px）の特別レイアウト
   PCの3列だと狭すぎて崩れるが、モバイルにするほど狭くはないゾーン用
   ========================================================= */
@media (min-width: 1001px) and (max-width: 1400px) {

  /* 全体を「2列」に変更 */
  .dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 2.1fr);
    gap: 20px;
    align-items: start;   /* ← 中身の高さにする */
  }

  /* ① 再生中カード：左側 (1列目) に固定し、縦2行分をぶち抜く */
  .now-playing-modern {
    grid-column: 1;
    grid-row: 1 / 3; /* 1行目から3行目の線まで＝2コマ分の高さを使う */
    
    /* 幅広になるのでレイアウト崩れも解消されます */
    width: 100% !important;
    margin: 0 !important;
  }

  /* ② 再生キュー：右側 (2列目) の上 (1行目) */
  .home-queue-card {
    grid-column: 2;
    grid-row: 1;
  }

  /* ③ おすすめ：右側 (2列目) の下 (2行目) */
  .home-recommend-card {
    grid-column: 2;
    grid-row: 2;
  }

  /* ④ お知らせ・フレンド：
     PC設定(span 3)が残っていると崩れるので、1コマ(auto)にリセット。
     これで「左にお知らせ、右にフレンド」の順で3段目に並びます */
  .home-news-card, 
  .friends-card {
    grid-column: auto;
  }
}

/* ==== スマホ・縦画面用レイアウト ==== */
@media (max-width: 1000px) {
  /* ハンバーガーはモバイルでだけ出す */
  .mobile-menu-button {
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
  }

  /* サイドバーは最初は画面の外に隠す */
  .sidebar {
    top: 60px;
    left: -240px;      
    width: 220px;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    bottom: 56px;
  }

  /* 開いたときに .open を付ける */
  .sidebar.open {
    transform: translateX(240px);
  }

  /* メインコンテンツは左マージンを無しに（全幅表示） */
  .main-body {
    margin-left: 0;
    padding-top: 60px; 
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 900;
    display: none;
  }

  /* オーバーレイ有効時 */
  .sidebar-overlay.active {
    display: block;
  }

  .layout-simple .main-container {
    padding-bottom: 56px; /* .mobile-bottom-nav の高さ分:contentReference[oaicite:2]{index=2} */
  }

  .topbar {
    justify-content: center !important;      /* 全体を中央寄せ */
  }

  .topbar-left {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .topbar-right {
    display: none;                /* モバイルでは通知・名前などは非表示 */
  }

  .topbar-left h2 {
    flex: 0 0 auto;
    width: 100%;                 /* 見出しをバー全体の幅に広げる */
    text-align: center;          /* テキストの中央寄せ */
    justify-content: center;     /* 中の flex（ロゴ＋テキスト）も中央へ */
    font-size: 1.3rem;           /* 少しだけ大きめに（好みで調整OK） */
  }

  .topbar-left h2 a {
    justify-content: center;      /* ロゴ＋タイトルもセンターに */
  }

  /* 再生中情報もモバイルでは消す（タイトルだけにする） */
  #now-playing-info {
    display: none !important;
  }

  .home-cards-row {
    flex-direction: column;
  }

  .home-cards-row .now-playing-card {
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
  }

  /* モバイルではコンテンツの左右余白を少し減らして、窮屈さを減らす */
  .content {
    padding: 16px 12px 24px;
  }

  /* 再生中カードもスマホで横幅いっぱいに */
  .now-playing-modern {
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px 16px 20px;  /* 右側の余白も少し減らす */
    margin-left: 0;
    margin-right: 0;
  }

  /* 横スクロールを封じる（カードはみ出し対策の保険） */
  body {
    overflow-x: hidden;
  }

  .mobile-bottom-nav {
    display: flex;
  }

  .main-container {
    padding-bottom: 80px;  /* ボトムメニュー56px + ちょっと余白 */
  }

  /* ジャケットを少し小さくして余裕を作る */
  #jacket {
    width: 200px;
    height: 200px;
  }

  /* タイトルまわりも少しだけコンパクトに */
  .track-title {
    font-size: 1.3rem;
    width: 100%;
    max-width: 100%;
  }

  /* コントロールボタン群 */
  .controls {
    gap: 48px;         /* 間隔を少し狭める */
  }

  /* ボタンのアイコンを少し小さく */
  .controls button img,
  .controls button svg {
    width: 22px;
    height: 22px;
  }

  /* 進捗バーは幅いっぱいに */
  .progress-wrap {
    width: 100%;
    max-width: none;
  }

  #mobile-menu-button {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;           /* まわりの余白はここで調整 */
  }

  .topbar-left .mobile-menu-button {
    display: none !important;
  }

    /* 曲名入力欄そのもの */
  #song-input {
    display: block;
    width: 90%;          /* 画面幅の 90% くらいまで広げる */
    max-width: 420px;    /* 大きすぎないように上限もつける */
    margin: 8px auto 4px;/* 左右 auto でセンターに */
  }

  /* サジェストの候補ボックスも入力欄に合わせて中央寄せ */
  .suggestion-box {
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px;
  }

  .top-row-with-queue {
    flex-direction: column;
    max-width: 100%;
    margin: 16px 0 0;
  }

  .home-queue-card {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .home-recommend-card {
    max-width: 100%;
    width: 100%;
  }

  .dashboard-grid {
    display: flex;             /* グリッドをやめて縦積みのFlexにする */
    flex-direction: column;
  }

  /* 下記の数字(order)が小さい順に上から表示されます */
  
  /* ① 再生中カード */
  .now-playing-modern {
    order: 1;
  }

  /* ② 再生キューカード */
  .home-queue-card {
    order: 2;
  }

  /* ③ フレンドステータスカード */
  .friends-card {
    order: 3;
  }

  /* ④ お知らせカード */
  .home-news-card {
    order: 4;
  }

  /* ⑤ おすすめカード */
  .home-recommend-card {
    order: 5;
  }
  
  /* スマホのときは高さを中身なりにする */
  .dashboard-grid .now-playing-card,
  .dashboard-grid .now-playing-modern {
    height: auto !important;
  }

  .queue-preview-body,
  .recommend-body {
    height: 300px !important;     /* ← 好きな高さに調整OK（これで約6〜8曲分になります） */
    min-height: 300px !important; /* 確実に高さを確保 */
    flex: none !important;        /* PC用の「引き伸ばし設定」を解除 */
  }

  /* カード自体の高さ制限も解除（念のため） */
  .dashboard-grid .now-playing-card {
    height: auto !important;
  }
}