:root {
  --bg: #fff;
  --fg: #1a1a1a;
  --muted: #666;
  --line: #ddd;
  --accent: #1db954;
  --ok: #0a7a33;
  --warn: #8a6100;
  --err: #b3261e;
  --warn-bg: #fff8e1;
  --err-bg: #fdecea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212; --fg: #eaeaea; --muted: #9a9a9a; --line: #333;
    --ok: #4ade80; --warn: #fbbf24; --err: #f87171;
    --warn-bg: #2a2312; --err-bg: #2c1614;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 2rem 1rem 6rem; max-width: 60rem;
  background: var(--bg); color: var(--fg);
  font: 16px/1.7 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
.lead { color: var(--muted); margin: 0 0 1.5rem; }
.note { color: var(--muted); font-size: .875rem; }
code { background: color-mix(in srgb, var(--fg) 8%, transparent); padding: .1em .35em; border-radius: 3px; }

label { display: block; margin: .5rem 0 .25rem; }
input[type=text], input[type=password] {
  display: block; width: 100%; font: inherit; padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--fg);
}
/* 上の display:block が UA の [hidden]{display:none} を上書きしてしまうので戻す
   （パスワードマネージャ用の username 欄を隠したままにするため）。 */
input[hidden] { display: none; }
/* 伏せ字の Client ID と「表示」トグルを1行に並べる。トグルは幅を食わせない。 */
.secret { display: flex; align-items: center; gap: .6rem; }
.secret input { flex: 1; min-width: 0; }
.secret button.link { flex: none; }
textarea {
  display: block; width: 100%; font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .75rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--fg); resize: vertical;
}
button {
  font: inherit; margin-top: .75rem; padding: .5rem 1.25rem; border: 0; border-radius: 999px;
  background: var(--accent); color: #000; font-weight: 600; cursor: pointer;
}
button:disabled { opacity: .4; cursor: not-allowed; }
button.link {
  background: none; color: var(--muted); text-decoration: underline;
  padding: 0; margin: 0; font-weight: 400; font-size: .875rem;
}
/* 追加先（新規 / 既存に追記）の選択 */
#dest {
  margin: 1rem 0 0; padding: .75rem .9rem;
  border: 1px solid var(--line); border-radius: 6px;
}
#dest legend { color: var(--muted); font-size: .875rem; padding: 0 .35rem; }
label.radio { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; }
label.radio input { width: auto; margin: 0; }
/* 「既存」のラジオにぶら下がっていることが分かるよう、ラベル文字の位置に寄せる。 */
select {
  display: block; width: calc(100% - 1.6rem); font: inherit;
  margin: .4rem 0 0 1.6rem;
  padding: .5rem .6rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--fg);
}
/* 「新規」を選んでいる間も一覧は見せるが、対象ではないことをはっきり分からせる。 */
select:disabled { opacity: .45; }
#destNote { margin: .6rem 0 0; }
#destNote.err { color: var(--err); }

/* レート制限の解除時刻。閉じて開き直しても出るので、見落とさない強さで出す。 */
#limit {
  margin: 1rem 0; padding: .75rem .9rem;
  border: 1px solid var(--err); border-radius: 6px; background: var(--err-bg);
}
#limit p { margin: 0; color: var(--err); font-weight: 600; }
#limit button.link { margin-top: .4rem; }

.who { color: var(--muted); font-size: .875rem; }

#status.ok { color: var(--ok); }
#status.err { color: var(--err); }
#summary { font-weight: 600; }

#result { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
td.n { color: var(--muted); text-align: right; width: 2.5rem; }
td.mark { white-space: nowrap; font-weight: 600; }
tr.ok td.mark { color: var(--ok); }
tr.warn { background: var(--warn-bg); }
tr.warn td.mark { color: var(--warn); }
tr.miss { background: var(--err-bg); }
tr.miss td.mark { color: var(--err); }

/* スマホ幅では5列の表が潰れて読めないので、1曲=1カードに積み直す。
   マークアップは共通のまま、grid で配置だけ変える。 */
@media (max-width: 560px) {
  body { padding: 1.25rem .9rem 5rem; }
  h1 { font-size: 1.25rem; }
  button { width: 100%; padding: .7rem 1rem; }
  button.link { width: auto; padding: 0; }

  #result { overflow-x: visible; }
  #result table, #result tbody { display: block; }
  #result thead { display: none; }
  #result tr {
    display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 0 .4rem;
    padding: .5rem .4rem; border-bottom: 1px solid var(--line);
  }
  #result td { border: 0; padding: 0; }
  #result td.n { grid-area: 1 / 1 / 4 / 2; padding-right: .5rem; }
  #result td.title { grid-area: 1 / 2 / 2 / 3; font-weight: 600; }
  #result td.mark { grid-area: 1 / 3 / 2 / 4; font-size: .8rem; }
  #result td.artist { grid-area: 2 / 2 / 3 / 4; font-size: .8rem; color: var(--muted); }
  #result td.got { grid-area: 3 / 2 / 4 / 4; font-size: .8rem; color: var(--muted); }
  #result td.got:empty { display: none; }
}

#done { margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; }
#done a { color: var(--accent); font-weight: 600; }
#done .ok { color: var(--ok); }
#done .err { color: var(--err); }