:root {
  --cream: #fff8e8;
  --cream-2: #fffdf7;
  --green: #173f35;
  --green-2: #2f6b54;
  --pink: #e86f91;
  --yellow: #f6cf62;
  --ink: #1d2722;
  --muted: #66736c;
  --line: #eadfca;
  --card: rgba(255,255,255,0.78);
  --shadow: 0 18px 40px rgba(23, 63, 53, 0.10);
  --radius: 26px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,0.96) 0 260px, rgba(255,255,255,0.45) 520px, transparent 820px),
    linear-gradient(180deg, #fffdf8 0%, #fff8e8 52%, #fffaf2 100%);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background-image:
    url("/public/images/LEAVE FLOWER.png"),
    url("/public/images/LEAVE LEFT.png"),
    url("/public/images/LEAVE RIGHT.png"),
    url("/public/images/LEAVE FLOWER.png"),
    url("/public/images/LEAVE LEFT.png"),
    url("/public/images/LEAVE RIGHT.png");

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;

  background-size:
    175px auto,
    125px auto,
    105px auto,
    145px auto,
    110px auto,
    115px auto;

  background-position:
    1% 20%,
    5% 76%,
    17% 88%,
    99% 35%,
    91% 69%,
    82% 88%;

  opacity: 0.72;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background-image:
    url("/public/images/Horizontal notes.png"),

    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
    url("/public/images/PINK AND YELLOW NOTES.png"),
url("/public/images/PINK AND YELLOW NOTES.png"),
url("/public/images/PINK AND YELLOW NOTES.png"),
url("/public/images/PINK AND YELLOW NOTES.png"),
    
    url("/public/images/KEY.png"),
    url("/public/images/KEY.png"),
    url("/public/images/KEY.png"),
    url("/public/images/KEY.png"),
    url("/public/images/KEY.png"),
    url("/public/images/KEY.png");

  background-repeat: no-repeat;

  background-size:
    245px auto,

    105px auto,
    92px auto,
    115px auto,
    88px auto,
    82px auto,
    74px auto,
    68px auto,
    90px auto,
    78px auto,
    96px auto,
    72px auto,
    84px auto,
    88px auto,
94px auto,
86px auto,
    86px auto,

    58px auto,
    48px auto,
    62px auto,
    44px auto,
    54px auto,
    46px auto;

  background-position:
    65% 14%,

    7% 13%,
    17% 83%,
    79% 84%,
    94% 53%,
    3% 39%,
    73% 61%,
    91% 30%,

    24% 23%,
    34% 74%,
    57% 88%,
    86% 43%,
    84% 72%,
    2% 4%,
97% 5%,
14% 6%,
    15% 50%,

    16% 31%,
    5% 56%,
    29% 92%,
    88% 22%,
    95% 67%,
    67% 91%;

  opacity: 0.9;
}

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

.decor-art {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.decor-sax {
left: -5px;
bottom: -85px;
  width: 470px;
  height: 470px;
  background-image: url("/public/images/SAX.png");
  opacity: 0.96;
transform: rotate(-18deg);
transform-origin: 12% 100%;
}

.decor-record {
  right: 15px;
  top: 40px;
  width: 360px;
  height: 360px;
  background-image: url("/public/images/DONT LET ME DOWN.png");
  opacity: 0.97;
}

.decor-piano {
  right: -35px;
  bottom: -75px;
  width: 540px;
  height: 350px;
  background-image: url("/public/images/PIANO.png");
  opacity: 0.96;
}

.decor-notes {
  display: none;
}
.top-nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.brand {
  color: var(--green);
  text-decoration: none;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.brand .amp { color: var(--pink); }

.nav-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-links button {
  border: 0;
  background: transparent;
  color: var(--green);
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.nav-links button:hover {
  background: rgba(23,63,53,0.08);
}

.app-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px 72px;
}
.top-nav,
.app-shell {
  position: relative;
  z-index: 2;
}
.page-title {
  margin: 18px 0 4px;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.06em;
  color: var(--green);
}

.supporting {
  color: var(--muted);
  font-size: 18px;
  max-width: 700px;
  line-height: 1.55;
  margin: 0 0 28px;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  background: var(--card);
  border: 1px solid rgba(234, 223, 202, 0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(12px);
}

.card.action {
  border-left: 6px solid var(--green-2);
}

.card h2, .card h3 {
  margin-top: 0;
  color: var(--green);
  letter-spacing: -0.04em;
}

.tip-card {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(246, 207, 98, 0.24);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn.primary {
  background: var(--green);
  color: white;
}

.btn.secondary {
  background: white;
  color: var(--green);
  border: 1px solid var(--line);
}

.btn.text {
  background: transparent;
  color: var(--green);
  padding-inline: 4px;
}

.btn.danger {
  background: #9d263d;
  color: white;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.form {
  max-width: 780px;
  display: grid;
  gap: 18px;
}

.field {
  display: grid;
  gap: 8px;
}

label {
  font-weight: 800;
  color: var(--green);
}

input, textarea, select {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream-2);
  padding: 13px 14px;
  color: var(--ink);
  width: 100%;
}

textarea {
  min-height: 180px;
  resize: vertical;
}

.helper {
  font-size: 14px;
  color: var(--muted);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
}

.status.draft { background: #eee; color: #444; }
.status.in_progress { background: rgba(47,107,84,0.10); color: var(--green); border: 1px solid rgba(47,107,84,0.25); }
.status.ready_to_reveal { background: rgba(232,111,145,0.16); color: #8d2f49; }
.status.revealed { background: var(--green); color: white; }

.list {
  display: grid;
  gap: 12px;
}
.record-shelf {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
padding: 18px 12px 14px;
  min-height: 340px;
background:
  linear-gradient(
    to bottom,
    transparent calc(100% - 14px),
    #d5ad84 calc(100% - 14px),
    #bf9063 calc(100% - 8px),
    #9c6f49 100%
  );
}

.record-shelf::-webkit-scrollbar {
  height: 10px;
}

.record-shelf::-webkit-scrollbar-thumb {
  background: rgba(23,63,53,.18);
  border-radius: 999px;
}
.record-spine {
  position: relative;
flex: 0 0 24px;
width: 24px;
min-width: 24px;
max-width: 24px;
overflow: hidden;
height: 270px;
padding: 12px 2px;
  border: 1px solid rgba(23, 63, 53, 0.16);
border-radius: 2px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.22) 0 2px,
      transparent 2px calc(100% - 2px),
      rgba(23,63,53,0.06) calc(100% - 2px)
    ),
    linear-gradient(180deg, #f3c9d3 0%, #efb5c4 100%);
  box-shadow:
    4px 5px 12px rgba(23, 63, 53, 0.12),
    inset 1px 0 rgba(255,255,255,0.5);
  color: var(--green);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.record-spine:nth-child(3n + 2) {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.28) 0 7px,
      transparent 7px calc(100% - 7px),
      rgba(23,63,53,0.08) calc(100% - 7px)
    ),
    linear-gradient(180deg, #f6d776 0%, #f1c95c 100%);
}

.record-spine:nth-child(3n + 3) {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.25) 0 7px,
      transparent 7px calc(100% - 7px),
      rgba(23,63,53,0.09) calc(100% - 7px)
    ),
    linear-gradient(180deg, #91b9a4 0%, #6f9e87 100%);
}

.record-spine:hover {
  transform: translateY(-9px);
  box-shadow:
    6px 12px 20px rgba(23, 63, 53, 0.18),
    inset 1px 0 rgba(255,255,255,0.5);
}

.record-spine-title {
  position: absolute;
  left: 50%;
  top: 58%;

  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: translate(-50%, -50%) rotate(180deg);

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;

  max-height: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.record-spine {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  overflow: hidden;
  height: 270px;
  padding: 12px 2px;
  margin-bottom: -1px;

  border: 1px solid rgba(23, 63, 53, 0.16);
  border-radius: 2px;

  background:
linear-gradient(
  90deg,
  rgba(255,255,255,0.28) 0 7px,
  transparent 7px calc(100% - 7px),
  rgba(23,63,53,0.08) calc(100% - 7px)
),
    linear-gradient(180deg, #f3c9d3 0%, #efb5c4 100%);

  box-shadow:
    4px 5px 12px rgba(23, 63, 53, 0.12),
    inset 1px 0 rgba(255,255,255,0.5);

  color: var(--green);
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.record-spine-date {
  position: absolute;
  left: 50%;
  top: 12px;

  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: translateX(-50%) rotate(180deg);

  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0.72;
}

.record-spine .status {
  display: none;
}
.row {
  background: rgba(255,255,255,0.58);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.song-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.song-row.rated {
  background: rgba(251,244,223,0.8);
}


.tie-break-item {
  cursor: grab;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    opacity 0.18s ease;
}

.tie-break-item:active {
  cursor: grabbing;
}

.tie-break-item.dragging {
  transform: scale(1.02);
  box-shadow: 0 18px 36px rgba(23, 63, 53, 0.18);
  background: #fffdfb;
  opacity: 0.95;
  z-index: 5;
}

.tie-break-item {
  position: relative;
}

.tie-break-item.drag-over {
  border-color: var(--pink);
  background: rgba(232, 111, 145, 0.08);
}

.tie-break-item.drag-over::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: -6px;
  height: 4px;
  border-radius: 999px;
  background: var(--pink);
}

.tie-break-position {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(232, 111, 145, 0.14);
  color: var(--pink);
  font-size: 17px;
  font-weight: 900;
  border: 1px solid rgba(232, 111, 145, 0.28);
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.tie-break-handle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(23, 63, 53, 0.07);
  color: var(--green);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -5px;
  cursor: grab;
  user-select: none;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
}

.tie-break-item:hover {
  border-color: rgba(47, 107, 84, 0.32);
  background: rgba(255, 255, 255, 0.82);
}

.tie-break-item:hover .tie-break-handle {
  background: rgba(23, 63, 53, 0.13);
  transform: scale(1.05);
}

.tie-break-item.dragging .tie-break-position {
  background: var(--pink);
  color: white;
  transform: scale(1.08);
}

.tie-break-item.dragging .tie-break-handle {
  cursor: grabbing;
  background: rgba(23, 63, 53, 0.16);
}
.song-title {
  font-weight: 900;
  color: var(--green);
  text-decoration: none;
}

.song-meta {
  color: var(--muted);
  font-size: 14px;
}

.rating-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rating-buttons button {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  color: var(--green);
  cursor: pointer;
  font-weight: 900;
}

.rating-buttons button.selected {
  background: var(--pink);
  border-color: var(--pink);
  color: white;
}

.progress-vinyl {
  position: relative;
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  display: inline-block;
  border-radius: 50%;

background:
  radial-gradient(
    circle at center,
    var(--cream-2) 0 7px,
    var(--pink) 8px 12px,
    transparent 13px
  ),
    repeating-radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.12) 0 1px,
      transparent 2px 6px
    ),
    var(--green);

  border: 5px solid transparent;

  box-shadow:
    0 6px 14px rgba(23, 63, 53, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.progress-vinyl::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;

  background:
    conic-gradient(
      var(--pink) var(--progress, 0deg),
      rgba(23, 63, 53, 0.12) 0
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 30px,
      #000 31px 37px,
      transparent 38px
    );

  mask:
    radial-gradient(
      circle,
      transparent 0 30px,
      #000 31px 37px,
      transparent 38px
    );
}
.pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.pagination button {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: white;
  padding: 8px 11px;
  cursor: pointer;
}

.pagination button.active {
  background: var(--green);
  color: white;
}

.continue-marker {
  color: var(--pink);
  font-weight: 900;
  font-size: 13px;
  border-top: 1px dashed rgba(232,111,145,0.55);
  padding-top: 10px;
  margin-top: 8px;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--green);
  color: white;
  border-radius: 999px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: all .25s ease;
  z-index: 20;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(29,39,34,0.38);
  display: grid;
  place-items: center;
  z-index: 10;
  padding: 20px;
}

.modal {
  max-width: 500px;
  background: var(--cream-2);
  border-radius: 28px;
  padding: 26px;
  box-shadow: var(--shadow);
}

.loading {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--green);
  font-weight: 900;
}

.spin {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--yellow) 0 13%, var(--green) 14% 18%, transparent 19%),
    repeating-radial-gradient(circle, var(--green) 0 5px, #28594a 6px 9px);
  animation: spin 1.1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 780px) {
  .top-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .grid.two {
    grid-template-columns: 1fr;
  }

  .song-row {
    grid-template-columns: 1fr;
  }
.tie-break-item {
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 12px;
  padding: 14px;
}

.tie-break-item .button-row {
  flex-wrap: nowrap;
  min-width: 0;
}

.tie-break-item .button-row > div {
  min-width: 0;
}

.tie-break-item .song-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tie-break-position {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.tie-break-handle {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(23, 63, 53, 0.05);
  color: var(--green);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
}
  
  .app-shell {
    padding-inline: 16px;
  }

.decor-sax {
  left: -95px;
  bottom: -55px;
  width: 340px;
  height: 340px;
  transform: rotate(-7deg);
  transform-origin: bottom left;
}

.decor-record {
  right: -30px;
  top: 60px;
  width: 250px;
  height: 250px;
}

.decor-piano {
  right: -55px;
  bottom: -55px;
  width: 330px;
  height: 220px;
}

  .decor-notes {
    display: none;
  }
   body::before {
    background-size:
      115px auto,
      82px auto,
      72px auto,
      95px auto,
      76px auto,
      78px auto;

    background-position:
      -6% 25%,
      2% 78%,
      18% 91%,
      106% 37%,
      94% 70%,
      78% 90%;

    opacity: 0.60;
  }

  body::after {
    background-size:
      145px auto,

      70px auto,
      62px auto,
      76px auto,
      60px auto,
      56px auto,
      50px auto,
      46px auto,

      40px auto,
      34px auto,
      42px auto,
      31px auto,
      37px auto,
      32px auto;

    background-position:
      58% 20%,

      4% 15%,
      15% 81%,
      76% 83%,
      96% 55%,
      3% 39%,
      72% 62%,
      90% 31%,

      12% 33%,
      3% 58%,
      30% 93%,
      90% 27%,
      96% 68%,
      65% 92%;

    opacity: 0.74;
  }
}
/* Reveal Confirmation Dialog */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22, 34, 29, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.dialog-card {
  background: #fffdf8;
  border-radius: 20px;
  padding: 32px;
  width: 90%;
  max-width: 460px;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}

.dialog-card h2 {
  margin: 0 0 12px;
  color: #1d4d3b;
}

.dialog-card p {
  margin: 0 0 24px;
  line-height: 1.5;
  color: #4d5a55;
}

.dialog-card .button-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.btn.danger {
  background: #d94f7a;
  border-color: #d94f7a;
}

.btn.danger:hover {
  background: #c9436d;
  border-color: #c9436d;
}

.list .btn {
  width: fit-content;
  align-self: flex-start;
}