* { box-sizing: border-box; }
:root { --bg:#ffffff; --fg:#ffffff; --card:#ffffff; --text:#000; --muted:#444; --accent:#000; --qr-size: 40mm; --caption-h: 6mm; }
html, body { margin:0; padding:0; background:#fff; color:#000; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial; }
a { color: var(--accent); }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.header, .footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.header h1 { font-size: 22px; margin:0; }
.footer { opacity: .8; }
.auth-area { display:flex; gap:8px; }
.hidden { display:none !important; }

.btn { background: var(--accent); color:#fff; border:0; padding:8px 14px; border-radius: 10px; font-weight:600; cursor:pointer; }
.btn:hover { filter: brightness(1.05); }
.btn-secondary { background:#444; color:#fff; }
.btn-secondary:hover { background:#555; }

.status { margin: 8px 0 8px; color: var(--muted); }
.card { background: #fff; border-radius: 14px; padding: 14px; border: 1px solid #ddd; }
.grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.grid img { width:100%; display:block; border-radius: 10px; }

/* playlists */
#playlists .playlist { display:flex; gap:10px; padding:10px; background:#fff; border:1px solid #ddd; border-radius:12px; cursor:pointer; align-items:center; }
#playlists .playlist:hover { outline: 2px solid #eee; }
#playlists .cover { width:64px; height:64px; border-radius:10px; object-fit:cover; background:#fff; }
#playlists .meta { display:grid; gap:2px; }
#playlists .name { font-weight:600; color:black}
#playlists .count { color: var(--muted); font-size: 12px; }

.controls { display:flex; align-items:center; gap:10px; margin: 8px 0 12px; justify-content: space-between;}
.controls .spacer { flex:1; }
.print-hide { display:block; }

/* Fixed 4-col front/back grids */
#qrGrid, #labelsGrid { display:grid; grid-template-columns: repeat(4, 40); gap: 12px; justify-items:center; align-items:center; }

.qrbox img {
  width: 80%;   /* Use percentage to scale the image inside */
  height: auto;
  margin: auto; /* Centers the QR code inside the box */
  display: block; /* Prevents unwanted space below the image */
}
/* Card layout with 40mm frame + caption space */
.qr-card, .label-card { padding: 0; background:transparent; height: calc(var(--qr-size) + var(--caption-h)); }
.qr-card .qrbox, .label-card .labelbox {
  width: 40mm; height: 40mm; margin: 0 auto;
  background:transparent !important; border-radius: 2mm; position: relative;
  display:flex; align-items:center; overflow:hidden;  justify-content: center;   /* vertical centering */
  align-items: center;       /* horizontal centering */
  text-align: center;        /* text center */
}
.qr-card .qrbox { border: 2px solid #222; }
.label-card .labelbox { border: 2px dashed #222; }

.caption-front, .caption-spacer {
  height: var(--caption-h);
  line-height: var(--caption-h);
  font-size: 12px;
  text-align: center;
  color: #000;
}
.caption-spacer { visibility: hidden; }

/* Cut marks placed on the frame edges 
.qrbox.cut-marks::before, .labelbox.cut-marks::before {
  content: ""; position:absolute; inset:0; pointer-events:none; border-radius:2mm;
  background:
    linear-gradient(#000 0 0) 0 0 / 5mm 0.2mm no-repeat,
    linear-gradient(#000 0 0) 0 0 / 0.2mm 5mm no-repeat,
    linear-gradient(#000 0 0) 100% 0 / 5mm 0.2mm no-repeat,
    linear-gradient(#000 0 0) 100% 0 / 0.2mm 5mm no-repeat,
    linear-gradient(#000 0 0) 0 100% / 5mm 0.2mm no-repeat,
    linear-gradient(#000 0 0) 0 100% / 0.2mm 5mm no-repeat,
    linear-gradient(#000 0 0) 100% 100% / 5mm 0.2mm no-repeat,
    linear-gradient(#000 0 0) 100% 100% / 0.2mm 5mm no-repeat;
}
@media screen { .qrbox.cut-marks::before, .labelbox.cut-marks::before { display:none; } }
@media print  { .qrbox.cut-marks::before, .labelbox.cut-marks::before { display:block; } }
*/
.center { display:grid; place-items:center; min-height:100vh; }

/* Page break before back page */
.page-break { break-after: page; }

/* Responsive preview (doesn't affect print alignment) */
@media (max-width: 800px) {
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #qrGrid, #labelsGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Print */
@media print {
  .container { padding: 0 !important; }
  @page { size: A4; margin: 12mm; }
  .print-hide, .header, .footer, .status, -btn { display:none !important; }


  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #qrGrid, #labelsGrid {
    display: grid !important;
    grid-template-columns: repeat(4, 40mm) !important;
    column-gap: 5mm !important;
    row-gap: 8.6mm !important;
    width: calc(4 * 40mm + 3 * 5mm) !important; /* 175mm */
    margin: 0 auto !important;                  /* centered on page */
    justify-items: center;
    align-items: center;
  }
}



/* Hero + not-connected illustration */
.hero {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; min-height: 40vh; text-align:center; background:transparent; padding: 24px 12px;
}
.hero-image { display:block; width:220px; max-width:60%; margin:0 auto 8px; }
.hero-title { font-size:22px; margin: 4px 0 0; color:#000; }
.hero-sub { margin: 0 0 8px; color:#000; }


.centered-image { display:block; width:260px; max-width:80%; height:auto; margin:0 auto; }

.year {
  font-size: 11px;
  color: #000;
  margin-top: 2px;
}

@media print {
  #playlistMeta, #labelsMeta, .btn {
    display: none !important;
  }
}

/* === Graffiti 3D style without custom fonts === */
.graffiti-title {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  text-transform: uppercase;
  font-size: clamp(36px, 6vw, 80px);
  letter-spacing: 1px;
  margin: 8px 0;
  color: #ffe600; /* yellow fill */

  /* Thick comic-style stroke */
  -webkit-text-stroke: 3px #1b1b1b;
  text-stroke: 3px #1b1b1b;

  /* Multi-layer drop shadows for fake 3D extrusion */
  text-shadow:
    2px 2px 0 #000,
    4px 4px 0 #000,
    6px 6px 0 #000,
    8px 8px 0 #222,
    10px 10px 0 #333,
    12px 12px 0 rgba(0,0,0,0.6);

  /* Tilted / fun perspective */
  transform: skew(-5deg, -2deg) rotate(-1deg);
  display: inline-block;
}

.graffiti-sub {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  text-transform: uppercase;
  font-size: clamp(16px, 2.5vw, 28px);
  color: #0d0d0d;
  text-shadow: 1px 1px 0 #fff, 2px 2px 4px rgba(0,0,0,0.3);
  letter-spacing: 0.5px;
  margin-top: 6px;
}
.labeltext { padding: 2mm; }

.labeltext {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  line-height: 1.2;
}

.labeltext .title {
  font-weight: 600;
  margin-bottom: 2px;
}

.labeltext .artist {
  font-size: 11px;
  color: #000;
}

.labeltext .year {
  font-size: 14px;
  color: #555;
  margin-top: 2px;
  font-weight: 800;
}
.labeltext {
  font-size: 12px;
  line-height: 1.2;
}
/* === Color background toggle === */
body.colored-bg {
  background: linear-gradient(135deg, #fddde6 0%, #fff7ba 50%, #d7f8d0 100%);
  background-attachment: fixed;
  transition: background 0.6s ease-in-out;
}


.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right-controls {
  margin-top: 2em;
  margin-left: auto !important;   /* pushes it all the way right */
  display: flex;
  gap: 8px;
}