/* Night theme, same palette as the Google Sheet */
:root {
  --canvas: #1b1e25;
  --band: #20242c;
  --header: #0f1116;
  --line: #2a2f39;
  --accent: #46bdc6;
  --title: #7fe3ea;
  --text: #c9cfdb;
  --muted: #9aa3b5;
  --sep: #0b0c10;
  --box: #262b35;
  --danger: #fc8181;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
}

[hidden] { display: none !important; }

button, input, textarea { font: inherit; color: inherit; }


/* ---------- Buttons and fields ---------- */

.btn {
  border: 1px solid var(--line);
  background: var(--box);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #062327; font-weight: 600; }
.btn.primary:hover { background: #5fd0d8; }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; border-color: #5a2a2e; color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

input, textarea {
  width: 100%;
  background: var(--header);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }

.form-error { color: var(--danger); min-height: 1em; margin: 4px 0 0; font-size: 13px; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }


/* ---------- Login ---------- */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
}

.logo { margin: 0; font-size: 34px; color: var(--title); letter-spacing: -.02em; }
.logo span, .brand span { color: var(--accent); }
.auth-sub { color: var(--muted); margin: 4px 0 24px; }

.tabs { display: flex; gap: 4px; background: var(--header); padding: 4px; border-radius: 10px; margin-bottom: 20px; }
.tab { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 7px; cursor: pointer; color: var(--muted); }
.tab.active { background: var(--box); color: var(--text); }

#auth-form { display: flex; flex-direction: column; gap: 14px; }

.link-btn {
  display: block;
  margin: 18px auto 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
}
.link-btn:hover { color: var(--title); text-decoration: underline; }


/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--header);
  border-bottom: 2px solid var(--accent);
}

.brand { font-size: 22px; font-weight: 700; color: var(--title); letter-spacing: -.02em; }

.stats { display: flex; gap: 16px; color: var(--muted); font-size: 13px; }
.stats b { color: var(--text); font-weight: 600; }

.actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.actions input[type=search] { width: 260px; }

.btn.small { padding: 6px 11px; font-size: 13px; }
.btn.account { font-weight: 600; }
.btn.account::before { content: "●"; color: var(--dot, var(--accent)); margin-right: 8px; font-size: 10px; vertical-align: 2px; }

/* My lists / Everyone */
.views { display: flex; gap: 4px; background: var(--canvas); padding: 4px; border-radius: 10px; }
.view { border: 0; background: transparent; color: var(--muted); padding: 7px 14px; border-radius: 7px; cursor: pointer; }
.view.active { background: var(--box); color: var(--text); }

/* List / person tabs */
.listbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--band);
  border-bottom: 1px solid var(--line);
}
.list-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.list-tab {
  border: 1px solid var(--line);
  background: var(--canvas);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.list-tab span { margin-left: 8px; font-size: 12px; opacity: .8; }
.list-tab.active { border-color: var(--accent); color: var(--title); background: #16343a; }
.listbar .stats { margin-right: 8px; }

label small { color: #6f7889; }


/* ---------- Table ---------- */

.table-wrap { overflow-x: auto; }

.list { width: 100%; border-collapse: collapse; min-width: 980px; }

.list th {
  position: sticky;
  top: 0;
  background: var(--header);
  color: var(--accent);
  font-weight: 600;
  text-align: center;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  user-select: none;
  white-space: nowrap;
}
.list th.sortable { cursor: pointer; }
.list th.sortable:hover { color: var(--title); }
.list th:first-child, .list td:first-child { text-align: left; }
.list th .arrow { margin-left: 6px; font-size: 11px; }

.list td {
  padding: 0 10px;
  height: 38px;
  border-bottom: 1px solid #1f232b;
  text-align: center;
  white-space: nowrap;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list tbody tr.item { cursor: pointer; }
.list tbody tr.item:nth-child(even of .item) td { background: var(--band); }
.list tbody tr.item:hover td { background: #262b35; }

.list td.title { color: var(--title); font-weight: 600; font-size: 15px; }
.list td.comment { color: var(--muted); font-style: italic; text-align: left; }
.list td.note { font-weight: 700; }

.list tr.section td {
  background: var(--sep);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  height: 30px;
}
.list tr.section .count, .list tr.person .count { color: var(--muted); font-weight: 500; margin-left: 8px; letter-spacing: 0; }

/* Everyone page: one bar per person / list */
.list tr.person td {
  background: #16343a;
  color: var(--title);
  font-size: 15px;
  font-weight: 700;
  height: 44px;
  border-top: 2px solid var(--accent);
}

.list tbody tr.item:not(.editable) { cursor: default; }
.list tr.person { cursor: pointer; }
.list tr.person .see { float: right; color: var(--accent); font-size: 12px; font-weight: 500; opacity: 0; transition: opacity .15s; }
.list tr.person:hover .see { opacity: 1; }


/* ---------- Profile ---------- */

.profile { max-width: 1100px; margin: 0 auto; padding: 32px 20px 60px; }

.profile-head { display: flex; gap: 22px; align-items: center; margin-bottom: 28px; }
.avatar {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 38px;
  font-weight: 700;
  color: #0b0c10;
}
.profile-head h1 { margin: 0; font-size: 30px; color: var(--title); letter-spacing: -.02em; }
.handle { margin: 4px 0 0; color: var(--muted); }
.bio { margin: 10px 0 0; line-height: 1.5; max-width: 640px; white-space: pre-line; }
.bio.muted { color: #6f7889; font-style: italic; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--band); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.tile b { display: block; font-size: 26px; color: var(--title); }
.tile span { color: var(--muted); font-size: 13px; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.card { background: var(--band); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.card h3 { margin: 0; color: var(--accent); font-size: 14px; }

.histogram { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.histogram .bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.histogram .bar div { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; }
.histogram .n { font-size: 11px; color: var(--muted); }
.histogram .label { font-size: 11px; color: var(--muted); }

.genre-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.genre-cloud .chip b { margin-left: 4px; opacity: .8; }

.top-line, .list-line { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #262b35; }
.top-line:last-child, .list-line:last-child { border-bottom: 0; }
.top-line .rank { color: var(--muted); width: 16px; }
.top-line .t, .list-line span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-line b { color: var(--title); }
.list-line.link { cursor: pointer; }
.list-line.link:hover span { color: var(--title); }

.swatch-label { font-size: 12px; color: var(--muted); }
.swatches { display: flex; gap: 10px; }
.swatch { position: relative; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; }
.swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.swatch:has(input:checked) { border-color: var(--text); }


/* ---------- Admin panel ---------- */

.admin { max-width: 1200px; margin: 0 auto; padding: 28px 20px 60px; display: flex; flex-direction: column; gap: 16px; }
.admin-title { margin: 0; color: var(--title); font-size: 26px; }
.tile.bad b { color: #fc8181; }
.tile.good b { color: #68d391; }

.reveal { background: #1f4d36; border: 1px solid #68d391; border-radius: 10px; padding: 12px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.reveal code { font-size: 15px; background: var(--header); }

.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.log { display: flex; flex-direction: column; max-height: 560px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.log-line { display: grid; grid-template-columns: 60px 120px 70px 1fr; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #262b35; font-size: 13px; align-items: start; }
.log-line:last-child { border-bottom: 0; }
.log-line .lvl { font-weight: 700; text-transform: uppercase; font-size: 11px; padding-top: 2px; }
.log-line.error { background: #2a1d21; }
.log-line.error .lvl { color: #fc8181; }
.log-line.warn .lvl { color: #f6ad55; }
.log-line.info .lvl { color: #63b3ed; }
.log-line .at, .log-line .src { color: var(--muted); }
.log-line .msg i { color: var(--muted); }
.log-line details { margin-top: 4px; }
.log-line summary { cursor: pointer; color: var(--accent); font-size: 12px; }
.log-line pre { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 11px; color: var(--muted); background: var(--header); padding: 8px; border-radius: 6px; }

.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; color: var(--accent); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td { padding: 8px; border-bottom: 1px solid #262b35; white-space: nowrap; }
.badge { background: #16343a; color: var(--title); border-radius: 999px; padding: 1px 8px; font-size: 11px; margin-left: 4px; }

@media (max-width: 720px) {
  .log-line { grid-template-columns: 50px 1fr; }
  .log-line .src { display: none; }
  .log-line .msg { grid-column: 1 / -1; }
}


/* ---------- Bulk add ---------- */

dialog.wide { width: min(720px, calc(100vw - 32px)); }
pre.format, pre.prompt {
  margin: 0;
  background: var(--header);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  color: var(--text);
}
pre.prompt { white-space: pre-wrap; max-height: 220px; overflow-y: auto; }
code { background: var(--header); padding: 1px 5px; border-radius: 4px; color: var(--title); }
.ai-help { background: #16343a; border: 1px solid #22525a; border-radius: 10px; padding: 10px 14px; }
.ai-help summary { cursor: pointer; color: var(--title); font-weight: 600; }
.ai-help[open] { display: flex; flex-direction: column; gap: 10px; }
.ai-help .btn { align-self: flex-start; }

.chip { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; }

.note-pill { display: inline-block; min-width: 46px; padding: 4px 8px; border-radius: 6px; }

.status::before { content: "● "; }
.status.s0 { color: #68d391; }
.status.s1 { color: #63b3ed; }
.status.s2 { color: #8892a6; }
.status.s3 { color: #fc8181; }

.empty { text-align: center; padding: 80px 16px; }
.empty h2 { color: var(--title); margin: 0 0 8px; }
.empty p { color: var(--muted); margin: 0 0 20px; }
.empty-actions { display: flex; gap: 10px; justify-content: center; }


/* ---------- Dialogs ---------- */

dialog {
  width: min(560px, calc(100vw - 32px));
  background: var(--band);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}
dialog::backdrop { background: rgba(5, 6, 9, .7); }
dialog h2 { margin: 0 0 12px; color: var(--title); font-size: 18px; }

#edit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#edit-form .full { grid-column: 1 / -1; }
#edit-form h2 { grid-column: 1 / -1; }

#import-form, #list-form, #password-form { display: flex; flex-direction: column; gap: 12px; }
dialog h3 { margin: 8px 0 0; font-size: 14px; color: var(--accent); }

.dialog-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.spacer { flex: 1; }


/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--box);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 16px;
  z-index: 20;
}
.toast.error { border-color: var(--danger); color: var(--danger); }


/* ---------- Phone ---------- */

@media (max-width: 720px) {
  .topbar { padding: 10px 16px; gap: 10px; }
  .actions { margin-left: 0; width: 100%; }
  .actions input[type=search] { width: 100%; order: -1; }
  .stats { width: 100%; }
  .listbar { padding: 10px 16px; }
  .views { order: 3; width: 100%; }
  .view { flex: 1; }
  .profile { padding: 20px 16px 40px; }
  .profile-head { gap: 14px; }
  .avatar { width: 64px; height: 64px; font-size: 28px; }
  .profile-head h1 { font-size: 24px; }
  #edit-form { grid-template-columns: 1fr; }
}