:root {
  --bg: #0f1115;
  --panel: #181b22;
  --panel-2: #1f232c;
  --border: #2a2f3a;
  --text: #e7e9ec;
  --muted: #8b94a3;
  --accent: #6ea8fe;
  --accent-2: #9B5DE5;
  --pos: #44c285;
  --neg: #e07474;
  --warn: #d8a13a;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}
a { color: var(--accent); }

header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 20;
}
header .brand {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  font-size: 1.1rem;
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

.spacer { flex: 1 1 auto; }

/* ---------- buttons / inputs ---------- */
.btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.5rem 0.85rem;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; font-weight: 600; }
.btn.danger { color: var(--neg); }
.btn.danger:hover { border-color: var(--neg); }

.iconbtn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.iconbtn:hover { border-color: var(--accent); }
.iconbtn.del:hover { border-color: var(--neg); }

.search {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
  min-height: 40px;
  width: 100%;
}

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.count { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.6rem; }
.empty { color: var(--muted); padding: 2.5rem 1rem; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); }
.req { color: var(--neg); }
.err { color: var(--neg); font-size: 0.85rem; }
.hint { color: var(--muted); font-size: 0.78rem; margin-left: 0.5rem; }

.back { display: inline-block; margin-bottom: 0.5rem; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--text); }

/* ---------- index: song grid ---------- */
.song-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}
.song-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-2);
  border-radius: var(--radius);
  padding: 0.85rem;
  transition: border-color .12s, transform .12s;
}
.song-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.song-link { display: block; text-decoration: none; color: var(--text); }
.song-title { font-weight: 650; font-size: 1.04rem; padding-right: 4.8rem; }
.song-artist { color: var(--muted); font-size: 0.88rem; margin: 0.1rem 0 0.5rem; min-height: 1em; }
.dots { display: flex; flex-wrap: wrap; gap: 4px; min-height: 12px; margin-bottom: 0.4rem; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.media-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.media-badge { font-size: 0.72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.45rem; }
.card-actions { position: absolute; top: 0.55rem; right: 0.55rem; display: flex; gap: 3px; }

/* ---------- viewer ---------- */
.title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.7rem; margin: 0.2rem 0 0.8rem; }
.detail-title { margin: 0; font-size: 1.6rem; }
.submeta { color: var(--muted); font-size: 1rem; }

.i-am { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.6rem 0 1rem; }
.i-am-label { color: var(--muted); margin-right: 0.2rem; }
.who {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
}
.who:hover { border-color: var(--accent); }
.who.active { border-color: var(--c, var(--accent)); box-shadow: inset 0 0 0 2px var(--c, var(--accent)); font-weight: 600; }

.media-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.6rem; }
.media-tabs[hidden] { display: none; }
.mtab { background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 0.35rem 0.8rem; color: var(--text); cursor: pointer; font-size: 0.88rem; }
.mtab.active { border-color: var(--accent-2); background: #2c2740; }

.player-wrap { margin: 0 0 1.2rem; border-radius: var(--radius); overflow: hidden; }
.player-wrap:empty { margin: 0; }
.player-wrap iframe.youtube { width: 100%; aspect-ratio: 16/9; border: 0; display: block; background: #000; }
.player-wrap iframe.spotify { width: 100%; height: 152px; border: 0; border-radius: 12px; display: block; }

.lyrics { font-size: 1.5rem; line-height: 1.55; margin-top: 0.5rem; }
.line { transition: opacity 0.15s; padding: 0.02rem 0; }
.line.break { height: 1.0rem; }
.line.mine { font-weight: 800; }
.line.other { opacity: 0.5; }

/* ---------- editor ---------- */
#editor { max-width: 760px; }
.field { margin: 1.1rem 0; }
.field > label { display: block; color: var(--muted); margin-bottom: 0.35rem; font-size: 0.9rem; }
.lyric-box {
  width: 100%; min-height: 200px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 0.6rem 0.7rem; font-family: inherit; font-size: 0.95rem; line-height: 1.5;
  resize: vertical;
}

.singer-list { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.5rem; }
.singer-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.s-name {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.4rem 0.6rem; font-size: 0.92rem; min-width: 120px; flex: 1 1 120px; max-width: 200px;
}
.swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch.sel { border-color: var(--text); }
.s-color { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); cursor: pointer; }

.palette { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.paint-pick {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.3rem 0.7rem; color: var(--text); cursor: pointer; font-size: 0.88rem;
}
.paint-pick.active { border-color: var(--accent-2); box-shadow: inset 0 0 0 2px var(--accent-2); }

.paint-lines { user-select: none; font-size: 1.12rem; line-height: 1.45; border: 1px solid var(--border); border-radius: 9px; padding: 0.5rem; background: var(--panel); }
.pline { padding: 0.12rem 0.45rem; border-radius: 6px; cursor: pointer; }
.pline:hover { background: var(--panel-2); }
.pline.break { height: 0.8rem; cursor: default; }
.pline.break:hover { background: transparent; }

.editbar {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem;
  position: sticky; bottom: 0; background: var(--bg);
  padding: 0.7rem 0; border-top: 1px solid var(--border);
}

/* ---------- mobile ---------- */
@media (max-width: 600px) {
  main { padding: 0.75rem; }
  .lyrics { font-size: 1.25rem; }
  .song-grid { grid-template-columns: 1fr 1fr; }
  .detail-title { font-size: 1.35rem; }
}
@media (max-width: 380px) {
  .song-grid { grid-template-columns: 1fr; }
}