/* music-tags: small, mobile-first stylesheet. System fonts cover Greek, Arabic and CJK. */
:root {
  --bg: #fafafa; --fg: #1d1d1f; --muted: #6b6b70; --line: #e3e3e6;
  --card: #fff; --accent: #2457c5; --accent-fg: #fff;
  --ok: #1f7a3a; --bad: #b3261e; --warn: #8a5a00;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161618; --fg: #ececee; --muted: #9a9aa0; --line: #2c2c30;
    --card: #1f1f22; --accent: #7aa2ff; --accent-fg: #0b0b0c;
    --ok: #6fcf8a; --bad: #ff8a80; --warn: #f2c14e;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic",
        "Noto Sans CJK SC", sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 52rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.5rem; margin: .25rem 0 .5rem; overflow-wrap: anywhere; }
h2 { font-size: 1.15rem; margin-top: 1.5rem; }
.muted { color: var(--muted); }
.small { font-size: .95rem; }
.error { color: var(--bad); font-size: 1.05rem; }
.warn { color: var(--warn); }
.status-ok { color: var(--ok); }
.status-failed, .status-suspicious { color: var(--bad); }

.top {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .6rem 1rem; background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--fg); white-space: nowrap; }
.top nav { display: flex; align-items: center; gap: 1rem; }
form.inline { display: inline; margin: 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.narrow { max-width: 24rem; margin: 3rem auto; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: 1rem; }

input, button { font: inherit; }
input {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--fg);
}
button {
  padding: .6rem 1rem; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: var(--accent-fg); min-height: 44px;
}
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--line); }
button.link { background: none; color: var(--accent); padding: 0; min-height: 0; }
.search { margin: .5rem 0 .75rem; }

.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list li { border-bottom: 1px solid var(--line); }
.list li > a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .75rem .25rem; color: var(--fg); min-height: 44px;
}
.list li > a > span:first-child { overflow-wrap: anywhere; }
.list li > a > .small { white-space: nowrap; }
.list .empty, .list .more { padding: .75rem .25rem; }
.tracks li { display: flex; gap: .75rem; align-items: baseline; padding: .6rem .25rem; }
.tracks .num { width: 2.5rem; text-align: end; flex: none; font-variant-numeric: tabular-nums; }
.tracks .title { flex: 1; display: flex; flex-direction: column; align-items: flex-start; overflow-wrap: anywhere; }
.crumbs { margin: 0; font-size: 1rem; }
.path { font-family: ui-monospace, monospace; color: var(--muted); overflow-wrap: anywhere; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: start; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }

.spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- tags --- */
:root { --chip: #eef2fb; --chip-own: #dde7ff; --chip-line: #c9d5f2; }
@media (prefers-color-scheme: dark) { :root { --chip: #23262e; --chip-own: #263252; --chip-line: #3a4460; } }
.tag-panel h2 { margin-top: 0; }
.tag-group { display: flex; gap: .5rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.tag-group .cat { flex: none; width: 6.5rem; color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .25rem .15rem .6rem;
  border-radius: 999px; background: var(--chip); border: 1px solid var(--chip-line); font-size: 1rem;
}
.chip.own { background: var(--chip-own); font-weight: 600; }
.chip.inherited { background: transparent; border-style: dashed; }
.chip.excluded { background: transparent; color: var(--muted); }
.chip .src { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.chip-btn {
  min-height: 0; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 1rem; line-height: 1;
}
.chip-btn:hover { background: var(--line); color: var(--fg); }
.legend .chip { padding: .05rem .5rem; font-size: .85rem; }
.add-tag { display: flex; gap: .5rem; margin-top: .75rem; }
.add-tag select, .add-tag input { flex: 1; min-width: 0; }
select {
  font: inherit; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--fg);
}
.tracks .title a { color: var(--fg); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; margin: .75rem 0 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
details > summary { cursor: pointer; padding: .1rem 0; }
.value-list { list-style: none; padding: 0; margin: .75rem 0; }
.value-list li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.row-form { display: flex; gap: .5rem; flex: 1; margin: .5rem 0; }
.value-list .row-form { margin: 0; }
.row-form input { flex: 1; min-width: 0; padding: .4rem .6rem; }
.row-form button { min-height: 36px; padding: .3rem .7rem; }
.cat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.cat-actions .row-form { flex: 1 1 16rem; }
button.danger { color: var(--bad); }
label.check { flex-direction: row; align-items: center; gap: .5rem; }
label.check input { width: auto; }
@media (max-width: 30rem) {
  .tag-group { flex-direction: column; gap: .25rem; }
  .tag-group .cat { width: auto; }
}

/* --- bulk --- */
.top nav { flex-wrap: wrap; justify-content: flex-end; gap: .4rem .9rem; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: .5rem 0; }
.tabs a { padding: .5rem .8rem; border-bottom: 2px solid transparent; color: var(--muted); }
.tabs a.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.scope { margin: .25rem 0; }
.filters { margin: .5rem 0; }
.more-filters { margin: .5rem 0; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .5rem .75rem; margin-top: .5rem; }
.notice { background: var(--chip-own); border-radius: 8px; padding: .6rem .8rem; font-size: 1.05rem; }
.undo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin: .5rem 0; }
.list-head { display: flex; justify-content: space-between; align-items: center; padding: .5rem .25rem; }
.bulk-row { display: flex; align-items: flex-start; gap: .25rem; }
.bulk-row .pick { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; }
.bulk-row .pick input { width: 1.2rem; height: 1.2rem; }
.bulk-row .info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: .5rem 0; gap: .1rem; }
.bulk-row .info a { color: var(--fg); overflow-wrap: anywhere; }
.mini-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.mini { font-size: .85rem; padding: 0 .45rem; border-radius: 999px; border: 1px dashed var(--chip-line); color: var(--muted); }
.mini.own { border-style: solid; background: var(--chip-own); color: var(--fg); }
.action-bar {
  position: sticky; bottom: 0; z-index: 1; margin-top: .75rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--card); border: 1px solid var(--line); border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 12px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: .5rem;
}
.action-bar .target { display: flex; gap: 1rem; flex-wrap: wrap; }
.action-row { display: flex; gap: .5rem; }
.action-row select, .action-row input { flex: 1; min-width: 0; }
.action-row.buttons button { flex: 1; }
@media (max-width: 30rem) {
  .top { padding: .6rem .75rem; }
  .top nav { gap: .3rem .7rem; font-size: 1rem; }
}

/* --- names --- */
.renamed { margin: 0 0 .25rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
details.rename { margin: 0 0 .5rem; }
details.rename .row-form { max-width: 36rem; }
.alias { white-space: nowrap; }
.names-actions { border-top: 1px solid var(--line); padding-top: .4rem; }
.names-actions[open] { display: flex; flex-direction: column; gap: .5rem; }
.merge-choice { padding: .5rem 0; border-bottom: 1px solid var(--line); }

/* --- duplicates --- */
.dup p { margin: .25rem 0; }
ul.plain { list-style: none; padding: 0; margin: .25rem 0 .5rem; }
ul.plain li { padding: .2rem 0; }
.dup-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
a.button {
  display: inline-flex; align-items: center; padding: .6rem 1rem; min-height: 44px; border-radius: 8px;
  background: var(--accent); color: var(--accent-fg); text-decoration: none;
}

/* --- status --- */
.status-card .kv { margin: 0 0 .5rem; font-size: 1rem; }
code { font-size: .95em; overflow-wrap: anywhere; }