:root {
  --bg: #0b0b0d;
  --panel: #16161a;
  --panel-2: #1e1e24;
  --line: #2c2c34;
  --text: #f1f1f3;
  --muted: #9a9aa4;
  --accent: #2f6bff;
  /* --accent から作る3段の薄い面。app.js の applyTheme() が色を変えるとき一緒に書き換える */
  --accent-soft: rgba(47, 107, 255, .16);
  --accent-line: rgba(47, 107, 255, .46);
  --accent-fill: rgba(47, 107, 255, .24);
  --gold: #ffce4f;
  --ok: #4fd58a;
  --topbar: #0e0e11;
  --stage: #000;
  --shadow: rgba(0, 0, 0, .5);
  --radius: 12px;
  /* スライダー・チェックボックス・スクロールバーはブラウザが描く。
     これを言わないと、ベースを変えても素の部品だけ取り残される */
  color-scheme: dark;
}

/*
 * ベースの明るさ。html[data-base] を付け替えるだけで全体が変わる。
 * --accent 系はここで触らない（色は色で別に選べるため）。
 */
html[data-base="black"] {
  --bg: #000;
  --panel: #0c0c0e;
  --panel-2: #131317;
  --line: #26262c;
  --topbar: #000;
}
html[data-base="light"] {
  --bg: #f4f4f7;
  --panel: #ffffff;
  --panel-2: #eeeef3;
  --line: #dcdce4;
  --text: #17171b;
  --muted: #5f5f6b;
  --gold: #8a6300;
  --ok: #17864f;
  --topbar: #ffffff;
  --shadow: rgba(0, 0, 0, .16);
  color-scheme: light;
}

* { box-sizing: border-box; }

/* display を上書きしているクラス（.np-badge, .resume-bar 等）でも hidden を効かせる */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--topbar);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 34px; height: 34px; border-radius: 9px;
  object-fit: cover; display: block;
  background: var(--accent);
}
.topbar h1 { margin: 0; font-size: 16px; letter-spacing: .02em; }
.tagline { margin: 0; font-size: 12px; color: var(--muted); }

/* layout */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr) minmax(260px, .8fr);
  gap: 18px;
  padding: 18px 22px 60px;
  align-items: start;
  max-width: 1580px;
  margin: 0 auto;
}
@media (max-width: 1180px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); }
  .col-config { grid-column: 1 / -1; }
}
@media (max-width: 820px) { .layout { grid-template-columns: 1fr; } }


.col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; }

/* 左の列に、カードを縦に積む。
   すき間は列どうしと同じ 18px にしてある（ここだけ違うと不揃いに見える）。
   グリッドの子はこの入れ物のほうなので、**プレイヤーの高さで行が決まらない**。 */
.col-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
h2 { font-size: 13px; margin: 0 0 10px; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
h2.mt { margin-top: 22px; }
.count { color: var(--muted); font-weight: 400; }

/* source */
.source-bar { display: flex; gap: 8px; }
.source-bar input {
  flex: 1; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 9px 12px; font-family: inherit; font-size: 13px;
}
.source-bar input:focus { outline: none; border-color: var(--accent); }

button { font-family: inherit; cursor: pointer; }
button.primary {
  background: var(--accent); color: #fff; border: 0;
  border-radius: 9px; padding: 9px 16px; font-size: 13px; white-space: nowrap;
}
button.primary:disabled { opacity: .5; cursor: default; }
button.ghost {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 9px; padding: 7px 12px; font-size: 12px;
}
button.ghost:hover:not(:disabled) { border-color: var(--muted); color: var(--text); }
button.ghost:disabled { opacity: .4; cursor: default; }
button.wide { width: 100%; margin-top: 10px; }

/* stage */
.stage {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: var(--stage); border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
}
.stage iframe, #player { width: 100%; height: 100%; border: 0; display: block; }

/* now playing */
.nowplaying {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--panel-2); border-radius: 10px; border: 1px solid var(--line);
}
.np-main { min-width: 0; }
.np-label { font-size: 10.5px; color: var(--muted); letter-spacing: .08em; }
.np-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-badge {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 5px 13px; font-size: 12px; font-weight: 700;
  animation: pop .3s ease;
}
.np-badge.gold { background: rgba(255,206,79,.13); color: var(--gold); border-color: var(--gold); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }

/* controls */
.controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.controls button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  width: 40px; height: 40px; border-radius: 50%; font-size: 14px;
}
.controls button.big { width: 48px; height: 48px; background: var(--accent); border-color: var(--accent); font-size: 16px; }
.controls button.ghost { width: auto; height: 34px; border-radius: 9px; margin-left: auto; }

/* スリープタイマー。使わない日が大半なので、控えめに1行だけ置く */
.sleep { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.sleep label { flex: none; white-space: nowrap; }
/* 全体の select は幅いっぱいに広がる指定なので、ここだけ中身の幅に戻す */
.sleep select { width: auto; flex: none; padding: 5px 8px; font-size: 12px; }
.sleep-left { font-variant-numeric: tabular-nums; color: var(--accent); }

/* 自動再生が弾かれたときのタップ待ち */
.tap-to-play {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(0,0,0,.72); border: 0; color: var(--text);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(2px);
}
.tap-to-play .tap-icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 20px; margin-bottom: 4px;
}
.tap-to-play small { font-size: 11px; font-weight: 400; color: var(--muted); }

/* empty stage */
/*
 * 曲が0のときは案内のほうが背が高くなる。16:9 のままだと狭い画面で切れるので、
 * そのときだけ枠の比率を外して中身に合わせる（.is-empty は app.js が付ける）。
 */
.stage.is-empty { aspect-ratio: auto; }
/* プレイヤーを浮かせて高さの計算から外す。案内のほうが枠の高さを決める。
   浮かせた要素は前に出てくるので、案内にも重ね順を与えて上に置く */
.stage.is-empty > #player { position: absolute; inset: 0; }
.stage.is-empty .empty-stage { position: relative; z-index: 1; }
.empty-stage {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: var(--panel-2); text-align: center; padding: 26px 20px;
}
.empty-icon {
  width: 54px; height: 54px; border-radius: 50%; margin-bottom: 6px;
  border: 1px dashed var(--line); color: var(--muted);
  display: grid; place-items: center; font-size: 24px;
}
.empty-stage p { margin: 0; font-size: 13px; }
.empty-stage .sub { color: var(--muted); font-size: 12px; }
.empty-stage button.primary { margin: 14px 0 12px; padding: 11px 22px; font-size: 13.5px; }

/* library */
.add-actions { margin: 9px 0 14px; }

/*
 * まとめて追加。1曲ずつ足すより圧倒的に速いのに、
 * ghost ボタン1個だと誰も気付かなかった。押せる面として大きく出す。
 */
.bulk-btn {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--text);
  border-radius: 11px; padding: 11px 13px;
}
.bulk-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-fill); }
.bulk-btn:disabled { opacity: .55; cursor: default; }
.bulk-icon {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 700;
}
.bulk-body { min-width: 0; }
.bulk-body b { display: block; font-size: 13px; line-height: 1.4; }
.bulk-body small { display: block; font-size: 11px; color: var(--muted); line-height: 1.45; }
.lib-toolbar { margin-bottom: 12px; }
.lib-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lib-filter input {
  flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: 12px;
}
.lib-filter input:focus { outline: none; border-color: var(--accent); }
.cycle { font-size: 11px; color: var(--muted); white-space: nowrap; }

.lib { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }
.lib li {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 8px; font-size: 12.5px;
  border: 1px solid transparent;
}
.lib li + li { margin-top: 2px; }
.lib li.is-current { background: var(--accent-soft); border-color: var(--accent); }
.lib li.is-done { opacity: .45; }
.lib .q-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.lib .q-title:hover { color: var(--accent); }
.lib .q-rep {
  flex: none; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}
.lib .q-rep.gold { background: rgba(255,206,79,.13); color: var(--gold); }
.lib .q-del {
  flex: none; background: transparent; border: 0; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 5px; opacity: 0;
}
.lib li:hover .q-del { opacity: 1; }
.lib .q-del:hover { color: var(--accent); background: var(--panel-2); }

.lib-footer { display: flex; gap: 6px; margin-top: 12px; }
.lib-footer button { flex: 1; }
button.ghost.danger:hover { border-color: var(--accent); color: var(--accent); }

/*
 * 再生できなかった曲の案内。
 * 200曲まとめて入れると消された動画は必ず混ざるので、
 * 溜まったときだけ出して、その場で外せるようにする。
 */
.broken-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 8px; padding: 9px 11px;
  background: rgba(255, 206, 79, .09);
  border: 1px solid rgba(255, 206, 79, .38);
  border-radius: 9px;
}
.broken-bar .bb-text { flex: 1; min-width: 150px; font-size: 11.5px; color: var(--muted); }
.broken-bar button { flex: none; font-size: 11.5px; }
.lib .q-broken {
  flex: none; width: 16px; height: 16px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 206, 79, .18); color: var(--gold);
  font-size: 11px; font-weight: 700;
}

/* up next */
.upnext { list-style: decimal inside; margin: 0; padding: 0; }
.upnext li {
  font-size: 12px; color: var(--muted); padding: 4px 8px;
  background: var(--panel-2); border-radius: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upnext li + li { margin-top: 3px; }
.upnext li:first-child { color: var(--text); }

.queue-empty { color: var(--muted); font-size: 12px; padding: 6px 2px; }

/* select */
select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: 12.5px;
}
select:focus { outline: none; border-color: var(--accent); }

/* 取り消しの帯。更新のお知らせと同じ形だが、色は分ける。
   同じ色だと「新しい版が出ています」と見分けがつかない */
.update-bar.undo-bar {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.update-bar.undo-bar b { color: var(--text); }

/* 小窓（ピクチャーインピクチャー）

   本体の側：小窓で流しているあいだ、プレイヤーの場所に出す案内。
   何も出さないと、プレイヤーが消えて壊れたように見える。 */
.pip-stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 16px;
  background: var(--panel-2);
}
.pip-stage[hidden] { display: none; }
.pip-stage p { margin: 0; }
#pipBtn.on { border-color: var(--accent-line); color: var(--accent); }

/* 小窓の側。本体の CSS をそのまま写しているので、ここで body の余白などを消す。
   **動画は 200×200 より小さくしない**（YouTube の決まり）。
   操作の帯は動画の下。動画の上には重ねない。 */
.pip-body { margin: 0; padding: 0; overflow: hidden; background: var(--bg); color: var(--text); }
.pip { display: flex; flex-direction: column; height: 100vh; }
/* **小窓の大きさに合わせて動画も伸び縮みさせる。**
   高さを 0 から「残りを全部」で伸ばす（flex: 1 1 0）。
   高さを auto にすると、YouTube が付ける既定の高さ（390px）に引っぱられて、
   小窓を小さくしたときに動画がはみ出して切れる。
   縦横の比は YouTube のプレイヤーが中で黒帯を付けて保つので、ここでは決めない。 */
.pip > #pipPlayer, .pip > iframe {
  flex: 1 1 0; width: 100%; height: 0; min-height: 200px; min-width: 200px;
  border: 0; display: block;
}
/* 鳴り出さなかったときの案内。帯の中の、題の場所に出す（動画には重ねない） */
.pip-hint {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pip-hint[hidden], .pip-title[hidden] { display: none; }
.pip-bar {
  flex: none; height: 46px; box-sizing: border-box;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-top: 1px solid var(--line); background: var(--panel);
}
.pip-title {
  flex: 1; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pip-bar button {
  flex: none; height: 32px; min-width: 36px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 13px;
}
.pip-bar button:hover { border-color: var(--accent-line); }
.pip-bar .pip-back { color: var(--accent); }
/* 小窓を細くしたら、題を畳んでボタンだけ残す */
@media (max-width: 300px) {
  .pip-title { display: none; }
  .pip-bar { justify-content: space-between; }
}

/* 意見箱 */
#feedbackPanel { margin-top: 8px; }

/* 同期と意見箱を、パソコンでプレイヤーの下へ移したとき。
   **別のカードにする。**プレイヤーと同じ枠の中に続けて置くと、
   再生の操作と地続きに見えて、スリープの設定の続きのように読める。
   .col を付けて、ライブラリや設定と同じ「1枚のカード」にそろえる。 */
#sideExtras.in-player h2:first-child { margin-top: 0; }
#feedbackPanel textarea {
  width: 100%; resize: vertical; min-height: 62px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 12.5px;
}
#feedbackPanel textarea:focus { outline: none; border-color: var(--accent); }
#feedbackLeft { margin-left: auto; }

/* リストの切り替え。1〜3 */
.slots { display: flex; gap: 6px; margin: 0 0 10px; }
.slot {
  flex: 1 1 0; min-width: 0; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 11.5px; line-height: 1.25;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); color: var(--muted); cursor: pointer;
}
.slot:hover { color: var(--text); }
.slot.on {
  color: var(--text); border-color: var(--accent);
  background: var(--accent-soft);
}
.slot-n { font-size: 10.5px; opacity: .8; }

/* ランキングを選ぶところ */
.rank-row { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; }
.rank-row select, .rank-row input { flex: 1 1 auto; min-width: 0; }
/* アーティスト名の欄。**見た目の指定が1つも無かった**ので、ブラウザの初期の
   灰色の四角のまま出ていて、文字も初期値（13.33px）だった。iPhone で触ると
   勝手に拡大されたのは、ここが名指しの 16px からも漏れていたため。
   URL の欄（.source-bar input）と同じ見た目にそろえる */
.rank-row input[type="text"] {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 9px 12px; font-family: inherit; font-size: 13px;
}
.rank-row input[type="text"]:focus { outline: none; border-color: var(--accent); }
.rank-row button { flex: none; min-width: 76px; }
.rank-row + .rank-row { margin-top: 0; }
.rank-note { margin: 0 0 10px; min-height: 15px; }

/* 探しているあいだ回っている印。
   全期間だと10秒近くかかるので、**動いていることが見えるもの**が要る。
   字だけだと、止まっているのか集めているのか分からない。 */
.spin {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid var(--accent-line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 動きが苦手な人の設定を尊重する。**消さずに、回すのをやめる**
   （消すと、待っていることそのものが分からなくなる） */
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; border-top-color: var(--accent-line); }
}

/* 例。押すとそのまま入る。ここは「よく使う名前の見本」であって、
   選べる種類の一覧ではない（種類は名前を打てばいくらでも増える） */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.chip {
  flex: none; padding: 3px 10px; font-size: 11.5px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--muted); cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--accent-line); }
/* 自分が前に入れた相手。みんなの見本と見分けが付くように */
.chip.mine { color: var(--text); border-color: var(--accent-line); }
/* 「もっと」。見本ではないので、押せることだけ分かればよい */
.chip.more { border-style: dashed; }

/* 見た目（明るさだけ。色は選ばせない） */
.theme-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.theme-row label { flex: none; white-space: nowrap; font-size: 12px; color: var(--muted); }
.theme-row select { width: auto; flex: none; }
/* toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 10px 18px; border-radius: 10px; font-size: 12.5px; z-index: 50;
  box-shadow: 0 8px 26px var(--shadow); max-width: min(560px, 90vw);
  animation: pop .2s ease;
}
.toast.err { border-color: var(--accent); color: var(--accent); }

/* config */
.row.switch { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 13px; cursor: pointer; }
.row.switch input { accent-color: var(--accent); width: 16px; height: 16px; }
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.field > label b { color: var(--text); float: right; font-variant-numeric: tabular-nums; }
/*
 * スライダーはブラウザに任せず自前で描く。任せると、下地の色（トラック）だけ
 * テーマから取り残されて、ライトにしたとき黒い棒が残ってしまう。
 * 進み具合の色分けは --fill（app.js の paintRange が入れる）で作る。
 */
.field input[type="range"] {
  width: 100%; height: 18px; cursor: pointer;
  background: transparent; -webkit-appearance: none; appearance: none;
}
.field input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right,
    var(--accent) var(--fill, 0%), var(--line) var(--fill, 0%));
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -4.5px;
  border-radius: 50%; background: var(--accent); border: 0;
}
.field input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--line);
}
.field input[type="range"]::-moz-range-progress {
  height: 6px; border-radius: 3px; background: var(--accent);
}
.field input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 0;
}
.field input[type="text"] {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: 12.5px;
}
.sub { font-size: 11px; color: var(--muted); margin: 5px 0 0; }
.derived {
  font-size: 12px; color: var(--muted); background: var(--panel-2);
  border-radius: 8px; padding: 9px 11px; margin: 0 0 16px;
}
.derived b { color: var(--text); }
.clamp-note {
  font-size: 11px; color: var(--gold); line-height: 1.5;
  background: rgba(255,206,79,.08); border: 1px solid rgba(255,206,79,.3);
  border-radius: 8px; padding: 8px 10px; margin: -6px 0 16px;
}
/* ───────── 共有 ───────── */

/* 共有リンクで開かれたときの案内。左右どちらの列にも埋もれないよう全幅に置く */
/*
 * 更新のお知らせ。共有の案内と同じ形にして、出る場所も揃える。
 * 押すまで何も起きない（勝手に開き直すと、鳴っている曲が黙って止まる）。
 */
.update-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 14px 22px 0;
  padding: 13px 16px;
  background: rgba(255, 206, 79, .09);
  border: 1px solid rgba(255, 206, 79, .38);
  border-radius: 11px;
}
.update-bar .ub-body { min-width: 0; }
.update-bar b { font-size: 13.5px; }
.update-bar p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.update-bar .ub-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.version { font-size: 11px; color: var(--muted); text-align: right; margin: 16px 0 0; }

.share-invite {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 14px 22px 0;
  padding: 13px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 11px;
}
.share-invite .si-body { min-width: 0; }
.share-invite b { font-size: 13.5px; }
.share-invite p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.share-invite .si-actions { display: flex; gap: 7px; flex-shrink: 0; }

/*
 * 続きから再開。
 * ブラウザを閉じても音は鳴らせないので、開き直したときに
 * 「押せば続きが鳴る」ことがひと目で分かる面をプレイヤーの真下に出す。
 */
.resume-bar {
  display: flex; align-items: center; gap: 11px;
  margin-top: 10px; padding: 10px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 11px;
}
.resume-bar .rb-icon {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 14px;
}
.resume-bar .rb-body { min-width: 0; flex: 1; }
.resume-bar .rb-body b { display: block; font-size: 13px; line-height: 1.4; }
.resume-bar .rb-body small {
  display: block; font-size: 11.5px; color: var(--muted); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resume-bar button.primary { flex: none; padding: 9px 14px; font-size: 13px; }

/*
 * 発行した数字コード。
 * 電話で読み上げたり、隣の人に見せて打ってもらったりする番号なので、
 * 小さく出しても意味がない。等幅で大きく、字間を空けて出す。
 */
.code-out { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.code-row { display: flex; align-items: center; gap: 8px; }
.code-row input {
  flex: 1; min-width: 0;
  background: var(--bg); border: 1px solid var(--accent-line); color: var(--text);
  border-radius: 9px; padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 21px; font-weight: 700; letter-spacing: .13em; text-align: center;
}
.code-out .sub { margin: 7px 0 0; }

/* 共有リンクの表示欄 / 貼り付け欄 */
.xfer {
  margin-top: 9px;
  padding: 11px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.xfer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.xfer-head b { font-size: 12.5px; }
.xfer-close {
  border: 0; background: transparent; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.xfer-close:hover { color: var(--text); }
.xfer textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 9px 10px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11.5px; line-height: 1.5;
  word-break: break-all;
}
.xfer-actions { display: flex; gap: 7px; margin-top: 8px; }
.xfer-actions button { flex: 1; }

/* 端末どうしの同期。
   同期キーは、もう片方の端末で手で写すことがある。
   数字コードと同じ見せ方（大きい等幅・字間を空ける）にしてある。 */
#syncPanel .code-row { margin-top: 2px; }
#syncPanel .code-row input { font-size: 18px; letter-spacing: .1em; }
#syncPanel .code-row input[readonly] { border-color: var(--accent-line); }
#syncPanel .xfer-actions + .xfer-actions { margin-top: 6px; }
.sub.warn { color: var(--text); }
.sub.warn b { color: var(--accent); }

/* ============================================================
   スマホ・タブレット
   後続ルールに上書きされないよう、必ずファイル末尾に置くこと。
   ============================================================ */
@media (max-width: 560px) {
  .topbar { padding: 11px 13px; gap: 12px; }
  .layout { padding: 12px 13px 40px; gap: 12px; }
  .col { padding: 13px; }

  .source-bar { flex-direction: column; }
  .source-bar button.primary { width: 100%; padding: 12px 16px; font-size: 14px; }

  /* まとめて追加はスマホでこそ効く。指1本で押せる大きさにする */
  .bulk-btn { padding: 13px; gap: 12px; }
  .bulk-icon { width: 34px; height: 34px; }
  .bulk-body b { font-size: 13.5px; }
  .bulk-body small { font-size: 11.5px; }
  .lib-filter { flex-wrap: wrap; }
  .lib-footer { flex-wrap: wrap; }
  .lib-footer button { flex: 1 1 calc(50% - 3px); padding: 8px 6px; }
  /* 共有は主役のボタン。指で押せる高さにする */
  .lib-footer button.wide { flex: 1 1 100%; padding: 12px 8px; font-size: 13.5px; }

  /* 共有リンクは長い。指で押せる高さを確保しつつ、折り返して全部見せる */
  .xfer textarea { font-size: 12px; }
  .xfer-actions button { padding: 11px 8px; }
  /* 番号を打ち間違えないよう、狭い画面でも縮めない */
  .code-row input { font-size: 20px; padding: 11px 10px; }

  /* 指で押せる大きさに。文言は折り返さず、ボタンを優先して残す */
  .resume-bar { gap: 9px; padding: 11px; }
  .resume-bar button.primary { padding: 11px 13px; }

  .share-invite { flex-direction: column; align-items: stretch; }
  .share-invite .si-actions button { flex: 1; padding: 10px; }
  .controls button.ghost { padding: 0 11px; font-size: 11.5px; }
  .broken-bar button { flex: 1 1 100%; padding: 9px; }
  .sleep { margin-top: 12px; }
  .lib { max-height: 300px; }

  /* 入力欄の文字の大きさは、ファイルの一番下（iPhone のズーム対策）にまとめてある */
}

/* タップ操作の端末には hover がない。ホバーで出していた削除ボタンを常に見せる。 */
@media (hover: none) {
  .lib .q-del { opacity: .65; }
  .lib .q-del { padding: 6px 8px; }   /* 指で押せる大きさに */
}

/* ============================================================
   狭い画面ではヘッダーを画面上部に貼り付けない。
   URL 入力欄をタップしたときに、ヘッダーが入力欄に重なって押せなくなるため。
   ============================================================ */
@media (max-width: 820px) {
  .topbar { position: static; }
  .share-invite { margin: 12px 13px 0; }

  /* 曲が1つも無いときは、**入れる欄を先に出す**。
     縦に積むと「アーティスト名を入れる欄」がプレイヤーの下に隠れ、
     初めて来た人が最初に見るのは空の再生画面になる。
     訪問の6割がスマホなので、ここが最初に見えるかどうかは大きい。
     曲が入っているときは、いま流れているものが先。 */
  .layout.lib-first .col-library { order: -1; }
}

/* ============================================================
   iPhone の勝手なズームを止める。**必ずファイルの一番下に置くこと。**

   iPhone の Safari は、**文字が 16px より小さい入力欄**に触れると、
   読みやすくしようとして画面を勝手に拡大する。戻すには指でつまむしかない。
   「アーティスト名の欄を触ると不自然にズームされる」と報告があった。

   前は 560px 以下の幅にだけ、いくつかの欄を名指しで 16px にしていた。
   それでは足りなかった（2026-09-12 に本物の Chrome で幅を変えて測った）:
     - あとから足した欄（アーティスト名・貼り付け・意見箱）が名指しから漏れていた
     - スリープの選択は、別の指定（12px）のほうが強くて負けていた
     - **スマホを横にすると幅が 560px を超える**ので、全部の欄で拡大していた
   だから**指で触る端末では、幅に関係なく、文字を入れる欄を全部** 16px にする。
   名指しにしないので、欄を足しても漏れない。!important は、欄ごとの細かい指定
   （.sleep select の 12px など）に必ず勝たせるため。

   数字コードと同期キーの欄は、手で写すので大きいまま（20px・18px）にしておく。
   ============================================================ */
@media (hover: none) and (pointer: coarse), (max-width: 820px) {
  select, textarea { font-size: 16px !important; }
  /* :where() で包んで**強さを0にする**。包まないと :not() の3つぶん強くなり、
     下の「数字コードは 20px」に勝ってしまう（実際に 16px に縮んだ） */
  input:where(:not([type="checkbox"], [type="radio"], [type="range"])) { font-size: 16px !important; }
  .code-row input { font-size: 20px !important; }
  #syncPanel .code-row input { font-size: 18px !important; }
}

/* 素早く2回タップしたときの拡大を止める（iPhone の Safari は、⏭ などを続けて押すと
   それを「2回タップ」とみなして画面を拡大することがある）。
   **指2本で広げる拡大は、これまでどおり使える**（manipulation は2回タップだけを止める）。
   見えにくい人が拡大できなくなるので、viewport の maximum-scale で止めてはいけない。 */
html { touch-action: manipulation; }