/* ============================================================
   UPVOTE design system
   Faithful to Alexa Patel's 2024 mockups:
   - faded red gradient header that STAYS STILL while the list scrolls
   - condensed uppercase type (Oswald)
   - charcoal list, white right-aligned titles, grey artist line
   - grey heart pills, red $1.00 REQUEST A SONG bars
   ============================================================ */
:root {
  --red: #e0402b;            /* upvote red */
  --red-deep: #c22a18;
  --red-fade: #f08a6d;       /* bottom of the header gradient */
  --charcoal: #2e2e2e;       /* logo letters + page chrome */
  --bg: #3a3a3a;             /* page background behind rows */
  --row: #232323;            /* song row */
  --row-alt: #2b2b2b;
  --pill: #4d4d4d;           /* heart pill */
  --text: #ffffff;
  --muted: #b9b9b9;
  --footer: #8f8f8f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
a { color: inherit; }

/* ---------- Logo ---------- */
.logo {
  display: flex; align-items: center; justify-content: center;
  gap: .14em;
  font-weight: 600; letter-spacing: .38em; text-indent: .38em;
  color: var(--charcoal); font-size: 30px; line-height: 1;
  user-select: none;
}
.logo .heart { width: .82em; height: .82em; margin: 0 -.34em 0 -.36em; }
.logo.on-dark { color: #f4f4f4; }
.logo.sm { font-size: 22px; }
.logo.xl { font-size: 46px; }

/* ---------- Red header (user + host) ---------- */
.red-head {
  background: linear-gradient(180deg, var(--red) 0%, var(--red) 38%, var(--red-fade) 100%);
  padding: 14px 14px 10px;
}
/* user page: header is FIXED — "Red block at top stays still" */
.queue-shell { display: flex; flex-direction: column; height: 100dvh; }
.queue-head { flex: none; }
.queue-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.nowline {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 10px; gap: 12px;
}
.now-left .np-label { font-size: 11px; font-weight: 500; letter-spacing: .12em; color: #fff; opacity: .92; }
.now-left .np-title { font-size: 22px; font-weight: 700; letter-spacing: .04em; color: #fff; line-height: 1.05; text-transform: uppercase; }
.now-left .np-artist { font-size: 13px; font-weight: 500; letter-spacing: .1em; color: #ffd9cf; text-transform: uppercase; }
.now-right { text-align: right; }
.now-right .vt-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: #fff; }
.now-right .vt-count { font-size: 15px; font-weight: 700; letter-spacing: .1em; color: #fff; }
.now-right .up-next { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #3a1610; margin-top: 6px; }

/* ---------- Song list ---------- */
.song-list { list-style: none; }
.song-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; min-height: 56px;
  background: var(--row); border-bottom: 1px solid #3d3d3d;
}
.song-row:nth-child(even) { background: var(--row-alt); }
.song-row .meta { flex: 1; text-align: right; min-width: 0; }  /* long titles align RIGHT */
.song-row .title {
  font-size: 16px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.12; word-break: break-word;
}
.song-row .artist { font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

.heart-pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--pill); border: none; border-radius: 14px;
  padding: 7px 12px; min-width: 58px; justify-content: center;
  color: #dcdcdc; font-size: 13px; font-weight: 600;
  transition: transform .12s ease;
}
.heart-pill:active { transform: scale(.92); }
.heart-pill svg { width: 16px; height: 16px; fill: #8d8d8d; transition: fill .15s; }
.heart-pill.liked svg { fill: var(--red); }           /* red hearts STAY red */
.heart-pill.liked { color: #fff; }
.heart-pill[disabled] { opacity: .55; }

.request-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 7px 8px; padding: 11px 16px;
  background: var(--red); border-radius: 8px; border: none; width: calc(100% - 16px);
  color: #fff;
}
.request-row .price { font-size: 14px; font-weight: 600; }
.request-row .cta { font-size: 14px; font-weight: 700; letter-spacing: .38em; text-indent: .38em; }
.request-row:active { background: var(--red-deep); }

.request-row.filled { background: var(--row); outline: 2px solid var(--red); }
.request-row.filled .who { font-size: 10px; letter-spacing: .1em; color: var(--red-fade); font-weight: 700; text-transform: uppercase; text-align: left; }
.request-row.filled .meta { text-align: right; }
.request-row.filled .title { font-size: 15px; font-weight: 700; text-transform: uppercase; }
.request-row.filled .artist { font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

.list-footer {
  margin: 14px 12px 24px; padding: 10px;
  background: #6e6e6e; border-radius: 4px; text-align: center;
  font-size: 12px; font-weight: 600; letter-spacing: .28em; text-indent: .28em; color: #e8e8e8;
}

/* FLIP reorder animation — songs glide when votes change */
.song-row.moving, .request-row.moving { transition: transform .45s cubic-bezier(.2,.8,.2,1); }

/* ---------- Host chrome ---------- */
.host-shell { max-width: 760px; margin: 0 auto; min-height: 100vh; background: var(--bg); padding-bottom: 60px; }
.host-topbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 18px 20px 0; }
.btn {
  display: inline-block; border: none; border-radius: 6px;
  padding: 10px 18px; font-size: 13px; font-weight: 700;
  letter-spacing: .18em; text-indent: .18em; text-transform: uppercase; text-decoration: none; text-align: center;
}
.btn-grey { background: #c9c9c9; color: #222; }
.btn-grey:active { background: #b5b5b5; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:active { background: var(--red-deep); }
.btn-dark { background: #1d1d1d; color: #fff; }
.btn-block { display: block; width: 100%; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #5b6f94; display: flex; align-items: center; justify-content: center; }
.avatar svg { width: 22px; height: 22px; fill: #d9dfeb; }

.howto { padding: 26px 30px 8px; }
.howto h2 { font-size: 17px; font-weight: 700; letter-spacing: .22em; text-indent: .04em; margin-bottom: 12px; }
.howto ol { list-style: none; counter-reset: step; }
.howto li {
  counter-increment: step; font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.7; display: flex; gap: 10px;
}
.howto li::before { content: counter(step) "."; font-weight: 700; }
.howto .hl { color: var(--red-fade); font-weight: 700; }

.event-table { margin: 18px 20px; border-radius: 6px; overflow: hidden; }
.event-table .thead {
  display: grid; grid-template-columns: 1fr 110px; align-items: center;
  background: #e98a70; color: #2b2b2b; padding: 14px 16px;
  font-size: 14px; font-weight: 700;
}
.event-table .trow {
  display: grid; grid-template-columns: 1fr 110px; align-items: center;
  background: #fff; color: #222; padding: 12px 16px; border-top: 1px solid #eee;
  font-size: 14px; font-weight: 500;
}
.event-table .trow a.name { text-decoration: none; font-weight: 600; }
.event-table .empty { background: #fff; color: #555; padding: 14px; text-align: center; font-size: 13px; }
.icon-btn { background: none; border: none; padding: 4px 6px; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-pencil svg { fill: #9a9a9a; }
.icon-trash svg { fill: var(--red); }

.qr-wrap { display: flex; justify-content: center; padding: 26px 0 10px; }
.qr-wrap img { width: 300px; height: 300px; background: #fff; padding: 10px; border-radius: 4px; }
.below-label { text-align: left; margin: 8px 24px 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.pad { padding: 0 20px; }

/* ---------- Embedded music player (host page) ---------- */
.player {
  margin: -6px 20px 10px; background: #0d0d0d; border-radius: 10px;
  padding: 14px 18px 12px; box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.player .p-title { text-align: center; font-size: 16px; font-weight: 700; letter-spacing: .04em; margin-bottom: 8px; }
.player .p-bar { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #cfcfcf; font-family: Georgia, serif; }
.player .track { flex: 1; height: 5px; background: #3f3f3f; border-radius: 3px; position: relative; }
.player .fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: #fff; border-radius: 3px; }
.player .knob { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 13px; height: 13px; border-radius: 50%; background: #1db954; }
.player .p-controls { display: flex; justify-content: center; align-items: center; gap: 34px; margin-top: 8px; }
.player .p-controls button { background: none; border: none; }
.player .p-controls svg { width: 26px; height: 26px; fill: #fff; }
.player .p-play svg { width: 46px; height: 46px; }

/* ---------- Forms ---------- */
.form-card { margin: 30px 20px; background: #fff; color: #222; border-radius: 8px; padding: 24px; }
.form-card h1 { font-size: 18px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; color: var(--charcoal); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #666; margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 11px 12px; border: 1.5px solid #ccc; border-radius: 6px;
  font-size: 15px; background: #fff; color: #111;
}
.field input:focus, .field select:focus { outline: 2px solid var(--red); border-color: var(--red); }
.err { background: #fdeceb; color: #a4271a; padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }
.hint { font-size: 12px; color: #777; margin-top: 5px; line-height: 1.5; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cats label {
  display: inline-flex; align-items: center; gap: 6px; background: #f1f1f1; color: #333;
  padding: 8px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: .06em; cursor: pointer;
}
.cats input { accent-color: var(--red); width: 15px; height: 15px; }
.cats label:has(input:checked) { background: var(--red); color: #fff; }

/* ---------- Landing ---------- */
.landing { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.landing .body { flex: 1; padding: 34px 34px 20px; text-align: center; }
.landing .pitch { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.9; text-transform: uppercase; color: #e6e6e6; }
.landing .tag { margin: 22px 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.landing h1 { margin: 26px 0 18px; font-size: 21px; font-weight: 600; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; }
.landing h1 .heartword { white-space: nowrap; }
.landing .free { margin-top: 20px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.site-footer { margin: 20px; padding: 10px; background: #6e6e6e; border-radius: 4px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-indent: .28em; color: #e8e8e8; }

/* ---------- Request flow (bottom sheet) ---------- */
.sheet-mask { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; z-index: 40; }
.sheet-mask.open { display: block; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #f5f5f5; color: #222; border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .3s ease; max-height: 82dvh; overflow-y: auto;
}
.sheet.open { transform: translateY(0); }
.sheet h3 { font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--charcoal); margin-bottom: 12px; }
.search-line { display: flex; gap: 8px; }
.search-line input { flex: 1; padding: 12px; border: 1.5px solid #ccc; border-radius: 8px; font-size: 16px; }
.results { margin-top: 10px; }
.result {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; padding: 9px 10px; margin-bottom: 7px; text-align: left;
}
.result img { width: 40px; height: 40px; border-radius: 4px; background: #ddd; }
.result .r-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #1c1c1c; }
.result .r-artist { font-size: 11px; letter-spacing: .08em; color: #777; text-transform: uppercase; }
.picked {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 2px solid var(--red); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
}
.picked .meta { flex: 1; }
.picked .x { background: none; border: none; color: var(--red); font-size: 22px; line-height: 1; padding: 4px 8px; }
#pay-request-btn { margin-top: 10px; }
.pay-fallback { margin-top: 10px; }
.sheet .fine { margin-top: 10px; font-size: 11px; color: #888; text-align: center; }
.sheet .success { text-align: center; padding: 20px 8px; }
.sheet .success .big { font-size: 18px; font-weight: 700; letter-spacing: .1em; color: var(--red); text-transform: uppercase; }

/* ---------- Projector ---------- */
.proj { min-height: 100vh; display: grid; grid-template-columns: 1.4fr 1fr; background: var(--bg); }
.proj-left { padding: 40px 48px; display: flex; flex-direction: column; }
.proj-right { background: #2a2a2a; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.proj-now { margin: 26px 0 18px; }
.proj-now .np-label { font-size: 15px; letter-spacing: .16em; color: var(--red-fade); font-weight: 700; }
.proj-now .np-title { font-size: 44px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; }
.proj-now .np-artist { font-size: 19px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.proj-list { list-style: none; flex: 1; }
.proj-list li { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid #4a4a4a; }
.proj-list .t { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.proj-list .a { font-size: 13px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-left: 10px; }
.proj-list .v { font-size: 18px; font-weight: 700; color: var(--red-fade); }
.proj-right img { width: min(340px, 80%); background: #fff; padding: 12px; border-radius: 6px; }
.proj-right .scan { font-size: 16px; font-weight: 700; letter-spacing: .22em; text-indent: .22em; text-transform: uppercase; text-align: center; }
.proj-right .url { font-size: 13px; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 900px) { .proj { grid-template-columns: 1fr; } }

/* ---------- Admin ---------- */
.admin-table { width: 100%; border-collapse: collapse; background: #fff; color: #222; border-radius: 6px; overflow: hidden; font-size: 13px; }
.admin-table th { background: #e98a70; text-align: left; padding: 10px 12px; font-size: 12px; letter-spacing: .06em; }
.admin-table td { padding: 9px 12px; border-top: 1px solid #eee; }
.section-label { margin: 26px 20px 8px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- Stats card ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 20px; }
.stat { background: #262626; border-radius: 8px; padding: 14px; text-align: center; }
.stat .n { font-size: 26px; font-weight: 700; color: var(--red-fade); }
.stat .l { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .song-row.moving, .request-row.moving, .sheet { transition: none; }
}