/* ========================================================================
   Music Card Studio — Themes & Layouts
   Card dimensions: 600×390 px (preview) representing 10×6.5 cm at 300 DPI.
   ======================================================================== */

/* ───────────────────────── CARD BASE ───────────────────────── */
.card {
  font-family: 'Vazirmatn', 'Instrument Serif', serif;
  color: #fff;
  position: relative;
  isolation: isolate;
}

.card-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.card-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .35;
}

/* Texture variants (SVG-based, embedded for perfect rendering) */
.tex-paper { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .15 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"); }
.tex-vinyl { background-image: repeating-radial-gradient(circle at center, transparent 0, transparent 2px, rgba(0,0,0,.15) 2px, rgba(0,0,0,.15) 2.5px); }
.tex-noise { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='3'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.3'/></svg>"); opacity: .25; }
.tex-flowers { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%23000' stroke-width='.6' opacity='.15'><circle cx='20' cy='20' r='3'/><circle cx='15' cy='20' r='3'/><circle cx='25' cy='20' r='3'/><circle cx='20' cy='15' r='3'/><circle cx='20' cy='25' r='3'/><circle cx='60' cy='60' r='3'/><circle cx='55' cy='60' r='3'/><circle cx='65' cy='60' r='3'/><circle cx='60' cy='55' r='3'/><circle cx='60' cy='65' r='3'/></g></svg>"); opacity: .5; }
.tex-concrete { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence baseFrequency='0.05' numOctaves='4'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .3  0 0 0 0 .3  0 0 0 .25 0'/></filter><rect width='400' height='400' filter='url(%23n)'/></svg>"); }
.tex-linen { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0, rgba(0,0,0,.04) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0, rgba(0,0,0,.04) 1px, transparent 1px, transparent 3px); }
.tex-grain { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .4  0 0 0 0 .3  0 0 0 .4 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"); opacity: .4; }

/* ───────────────────────── COVER FILTERS ───────────────────────── */
.cover-filter-normal { filter: none; }
.cover-filter-grayscale { filter: grayscale(1); }
.cover-filter-sepia { filter: sepia(.7) contrast(1.05); }
.cover-filter-cool { filter: hue-rotate(180deg) saturate(.8) brightness(.95); }
.cover-filter-warm { filter: sepia(.3) saturate(1.2) hue-rotate(-15deg); }
.cover-filter-fade { filter: contrast(.85) brightness(1.1) saturate(.7); opacity: .85; }
.cover-filter-overexposed { filter: brightness(1.25) contrast(.9) saturate(.8); }
.cover-filter-glitch { filter: hue-rotate(20deg) saturate(1.3) contrast(1.1); }
.cover-filter-grain { filter: contrast(1.15) saturate(.85); }

/* Cover edge variants */
.cover-edge-sharp { border-radius: 0; }
.cover-edge-rounded { border-radius: 8px; }
.cover-edge-torn { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0,0 H100 V97 L92,99 L85,96 L78,99 L70,97 L62,99 L55,96 L48,99 L40,97 L32,99 L25,96 L18,99 L10,97 L0,99 Z' fill='black'/></svg>"); mask-size: 100% 100%; }
.cover-edge-burned { box-shadow: inset 0 0 30px 5px rgba(40,20,10,.6); border: 1px solid rgba(80,40,20,.4); }
.cover-edge-fade { mask-image: linear-gradient(180deg, black 60%, transparent 100%); }

/* ───────────────────────── FONT FAMILIES ───────────────────────── */
.font-handwritten { font-family: 'Caveat', cursive; font-weight: 700; }
.font-serif-light { font-family: 'Instrument Serif', 'Playfair Display', serif; font-weight: 400; font-style: italic; }
.font-serif-bold { font-family: 'Playfair Display', 'DM Serif Display', serif; font-weight: 700; }
.font-mono { font-family: 'JetBrains Mono', monospace; font-weight: 400; letter-spacing: -.5px; }
.font-display-retro { font-family: 'Bebas Neue', 'DM Serif Display', sans-serif; font-weight: 400; letter-spacing: 1px; }
.font-outline { font-family: 'Playfair Display', serif; font-weight: 700; -webkit-text-stroke: 1px currentColor; color: transparent !important; }
.font-sans-modern { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -.5px; }
.font-calligraphy { font-family: 'Dancing Script', cursive; font-weight: 700; }

/* Title sizes */
.title-xs { font-size: 18px; }
.title-md { font-size: 28px; }
.title-lg { font-size: 40px; }
.title-xl { font-size: 56px; line-height: .95; }

/* ===========================================================
                 LAYOUT A — PLAYER (Spotify-style)
   =========================================================== */
.card[data-layout="A"] .card-content {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 28px;
  align-items: center;
}
.card[data-layout="A"] .cover-wrap {
  width: 200px;
  height: 200px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.card[data-layout="A"] .cover-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.card[data-layout="A"] .right-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card[data-layout="A"] .track-name {
  font-size: 28px;
  line-height: 1.1;
  margin-bottom: 2px;
  word-break: break-word;
}
.card[data-layout="A"] .artist-name {
  font-size: 14px;
  opacity: .85;
  margin-bottom: 8px;
}

.progress-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.progress-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.25);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  inset: 0 70% 0 0;
  background: currentColor;
  border-radius: 2px;
}
.progress-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  opacity: .8;
  min-width: 30px;
}

/* Progress styles */
.progress-style-dotted .progress-track {
  background: repeating-linear-gradient(90deg, currentColor 0, currentColor 4px, transparent 4px, transparent 8px);
  height: 2px;
  opacity: .5;
}
.progress-style-dotted .progress-fill { display: none; }
.progress-style-waveform .progress-track {
  height: 24px;
  background: transparent;
}
.progress-style-waveform .progress-fill { display: none; }
.progress-style-waveform .waveform-svg { width: 100%; height: 24px; }
.progress-style-dots .progress-track {
  background: none;
  display: flex;
  justify-content: space-between;
  height: 8px;
}
.progress-style-dots .progress-fill { display: none; }
.progress-style-dots .progress-track::before { content: ''; display: none; }
.progress-style-sine .progress-track { background: transparent; height: 16px; }
.progress-style-sine .progress-fill { display: none; }

/* Player controls */
.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
}
.player-controls svg {
  width: 16px; height: 16px;
  opacity: .75;
}
.player-controls .play-btn svg { width: 20px; height: 20px; opacity: 1; }
.player-controls .play-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: currentColor;
  display: grid;
  place-items: center;
}
.player-controls .play-btn svg { color: var(--bg-color, #000); }

.controls-style-outline .play-btn {
  background: transparent;
  border: 1.5px solid currentColor;
}
.controls-style-outline .play-btn svg { color: currentColor; }
.controls-style-minimal svg { opacity: .5; width: 14px; height: 14px; }
.controls-style-minimal .play-btn { background: transparent; }
.controls-style-minimal .play-btn svg { color: currentColor; opacity: 1; }
.controls-style-retro .play-btn { background: transparent; border: 2px double currentColor; }
.controls-style-retro .play-btn svg { color: currentColor; }
.controls-style-ghost svg { opacity: .35; }
.controls-style-ghost .play-btn { background: transparent; border: 1px solid currentColor; opacity: .4; }
.controls-style-ghost .play-btn svg { color: currentColor; }

/* ===========================================================
                 LAYOUT B — POSTER
   =========================================================== */
.card[data-layout="B"] .cover-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.card[data-layout="B"] .cover-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.card[data-layout="B"] .poster-overlay {
  position: absolute;
  inset: 50% 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.8) 50%);
  z-index: 1;
}
.card[data-layout="B"] .card-content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px;
  z-index: 2;
}
.card[data-layout="B"] .track-name {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 6px;
}
.card[data-layout="B"] .artist-name {
  font-size: 14px;
  opacity: .9;
  margin-bottom: 12px;
}

/* ===========================================================
                 LAYOUT C — SPLIT
   =========================================================== */
.card[data-layout="C"] .card-content {
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding: 0;
}
.card[data-layout="C"] .top-half {
  position: relative;
  overflow: hidden;
}
.card[data-layout="C"] .top-half img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.card[data-layout="C"] .bottom-half {
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.card[data-layout="C"] .track-name {
  font-size: 26px;
  line-height: 1.05;
  margin-bottom: 4px;
}
.card[data-layout="C"] .artist-name {
  font-size: 13px;
  opacity: .85;
}

/* ===========================================================
                 LAYOUT D — VINYL
   =========================================================== */
.card[data-layout="D"] .card-content {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 18px;
  padding: 28px;
  align-items: center;
}
.card[data-layout="D"] .vinyl-wrap {
  position: relative;
  width: 240px;
  height: 240px;
}
.card[data-layout="D"] .vinyl-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1a1a 30%, #0a0a0a 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.card[data-layout="D"] .vinyl-disc::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center, transparent 0, transparent 3px, rgba(255,255,255,.04) 3px, rgba(255,255,255,.04) 4px);
}
.card[data-layout="D"] .vinyl-disc::after {
  content: '';
  position: absolute;
  inset: 80px;
  border-radius: 50%;
  background: #c8a062;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.card[data-layout="D"] .vinyl-cover {
  position: absolute;
  inset: 65px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}
.card[data-layout="D"] .vinyl-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.card[data-layout="D"] .vinyl-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,.3) 80%);
}
.card[data-layout="D"] .left-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card[data-layout="D"] .track-name {
  font-size: 24px;
  line-height: 1.1;
}
.card[data-layout="D"] .artist-name {
  font-size: 12px;
  opacity: .8;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ===========================================================
                 LAYOUT E — POLAROID
   =========================================================== */
.card[data-layout="E"] {
  background: #d4c5a0;
}
.card[data-layout="E"] .card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  gap: 28px;
}
.card[data-layout="E"] .polaroid-wrap {
  background: #fff;
  padding: 12px 12px 36px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transform: rotate(-3deg);
  flex-shrink: 0;
}
.card[data-layout="E"] .polaroid-wrap img {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
}
.card[data-layout="E"] .polaroid-caption {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 12px;
  color: #555;
}
.card[data-layout="E"] .right-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card[data-layout="E"] .track-name {
  font-size: 28px;
  line-height: 1.1;
  color: #2a1810;
}
.card[data-layout="E"] .artist-name {
  font-size: 13px;
  color: #5a4030;
}

/* ===========================================================
                 LAYOUT F — MINIMAL / EDITORIAL
   =========================================================== */
.card[data-layout="F"] .card-content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px;
  position: relative;
}
.card[data-layout="F"] .mini-cover {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  overflow: hidden;
}
.card[data-layout="F"] .mini-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.card[data-layout="F"] .editorial-title {
  font-size: 64px;
  line-height: .9;
  letter-spacing: -1px;
  margin-top: 60px;
  word-break: break-word;
}
.card[data-layout="F"] .editorial-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .8;
}

/* ===========================================================
   COMMON CARD ELEMENTS
   =========================================================== */

/* Spotify barcode */
.sp-barcode {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 26px;
}
.sp-barcode span {
  width: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* QR code mini */
.sp-qr {
  background: #fff;
  padding: 4px;
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.sp-qr canvas, .sp-qr img { display: block; }

/* Spotify logo simple */
.sp-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
}
.sp-logo svg { width: 14px; height: 14px; }

/* Lyric line */
.lyric-line {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  font-style: italic;
  line-height: 1.3;
  opacity: .85;
  max-width: 80%;
}

/* Decorative meta (date, time, card number, symbol) */
.card-meta {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  opacity: .75;
  z-index: 3;
}
.meta-top-right { top: 12px; right: 14px; }
.meta-top-left { top: 12px; left: 14px; }
.meta-bottom-left { bottom: 12px; left: 14px; }

.deco-symbol {
  font-family: 'Instrument Serif', serif;
  font-size: 14px;
  margin: 0 4px;
}

/* Spotify element positioning */
.sp-element {
  position: absolute;
  z-index: 4;
}
.sp-bottom-right { bottom: 16px; right: 16px; }
.sp-bottom-left { bottom: 16px; left: 16px; }
.sp-bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); }
.sp-top-right { top: 16px; right: 16px; }
.sp-top-left { top: 16px; left: 16px; }

/* ===========================================================
   THEMES
   =========================================================== */

/* ─────── ① SPOTIFY CLASSIC ─────── */
.card[data-theme="spotify"] {
  background: var(--theme-bg, #C13B2F);
  color: #fff;
}
.card[data-theme="spotify"] .card-bg-layer {
  background: var(--theme-bg, #C13B2F);
}

/* ─────── ② ELEGY ─────── */
.card[data-theme="elegy"] {
  background: #e8dfc7;
  color: #3a2818;
}
.card[data-theme="elegy"] .card-bg-layer {
  background: linear-gradient(180deg, #ebe1c8 0%, #d8c8a4 100%);
}
.card[data-theme="elegy"] .card-bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='3'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .1  0 0 0 0 0  0 0 0 .25 0'/></filter><rect width='150' height='150' filter='url(%23n)'/></svg>");
  pointer-events: none;
  opacity: .5;
}
.card[data-theme="elegy"] .cover-wrap {
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(58,40,24,.2);
}

/* ─────── ③ SIGNAL LOST ─────── */
.card[data-theme="signal-lost"] {
  background: #000;
  color: #c8c8c8;
  font-family: 'JetBrains Mono', monospace;
}
.card[data-theme="signal-lost"] .card-bg-layer {
  background: #000;
}
.card[data-theme="signal-lost"] .card-bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,.04) 2px, rgba(255,255,255,.04) 3px);
  pointer-events: none;
}
.card[data-theme="signal-lost"] .cover-wrap {
  position: relative;
}
.card[data-theme="signal-lost"] .cover-wrap::before,
.card[data-theme="signal-lost"] .cover-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.card[data-theme="signal-lost"] .cover-wrap::before {
  background: url('') no-repeat center/cover;
  background-image: inherit;
  transform: translateX(2px);
  filter: hue-rotate(-30deg) saturate(2) sepia(.5);
  opacity: .4;
}
.card[data-theme="signal-lost"] .cover-wrap img {
  filter: contrast(1.1) saturate(.9);
}
.card[data-theme="signal-lost"] .track-name,
.card[data-theme="signal-lost"] .editorial-title {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: -1px;
}

/* ─────── ④ ANALOG HEART ─────── */
.card[data-theme="analog-heart"] {
  background: #f3e6cf;
  color: #3a1f08;
}
.card[data-theme="analog-heart"] .card-bg-layer {
  background: linear-gradient(135deg, #f3e6cf 0%, #d4a574 100%);
}
.card[data-theme="analog-heart"] .vinyl-disc {
  background: radial-gradient(circle, #1a0e05 30%, #000 100%) !important;
}
.card[data-theme="analog-heart"] .vinyl-disc::after {
  background: #b8841f !important;
}
.card[data-theme="analog-heart"] .track-name {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 2px;
  color: #c44a1a;
}

/* ─────── ⑤ CINEMA SCOPE ─────── */
.card[data-theme="cinema"] {
  background: #000;
  color: #fff;
}
.card[data-theme="cinema"] .card-bg-layer {
  background: #000;
}
.card[data-theme="cinema"]::before,
.card[data-theme="cinema"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 58px;
  background: #000;
  z-index: 5;
  pointer-events: none;
}
.card[data-theme="cinema"]::before { top: 0; }
.card[data-theme="cinema"]::after { bottom: 0; }
.card[data-theme="cinema"] .card-content { padding-top: 70px; padding-bottom: 70px; }
.card[data-theme="cinema"] .cover-wrap img { filter: brightness(.85) contrast(1.1); }
.card[data-theme="cinema"] .track-name {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 20px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Film perforation decoration */
.card[data-theme="cinema"] .perforation-top,
.card[data-theme="cinema"] .perforation-bottom {
  position: absolute;
  left: 0; right: 0;
  height: 20px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(255,255,255,.5) 18px, rgba(255,255,255,.5) 30px);
  z-index: 6;
}
.card[data-theme="cinema"] .perforation-top { top: 18px; }
.card[data-theme="cinema"] .perforation-bottom { bottom: 18px; }

/* ─────── ⑥ GHOST LETTER ─────── */
.card[data-theme="ghost"] {
  background: #fff;
  color: #1a1a1a;
}
.card[data-theme="ghost"] .card-bg-layer {
  background: #fafaf7;
}
.card[data-theme="ghost"] .cover-wrap img {
  opacity: .25;
  filter: grayscale(.5);
}
.card[data-theme="ghost"] .vinyl-cover img {
  opacity: .25;
}
.card[data-theme="ghost"] .track-name,
.card[data-theme="ghost"] .editorial-title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700;
  -webkit-text-stroke: 1.2px #1a1a1a;
  color: transparent !important;
}

/* ─────── ⑦ DARKROOM ─────── */
.card[data-theme="darkroom"] {
  background: #0a0a0a;
  color: #e8e8e8;
}
.card[data-theme="darkroom"] .card-bg-layer {
  background: radial-gradient(ellipse at center, #1a1a1a 0%, #050505 100%);
}
.card[data-theme="darkroom"] .card-bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .08 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  pointer-events: none;
}
.card[data-theme="darkroom"] .cover-wrap {
  filter: drop-shadow(0 0 30px rgba(255,140,80,.3));
}
.card[data-theme="darkroom"] .track-name {
  letter-spacing: 3px;
  font-weight: 300;
}
.card[data-theme="darkroom"] .neon-underline {
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff8c50, transparent);
  box-shadow: 0 0 8px #ff8c50;
  margin-top: 4px;
  width: 80%;
}

/* ─────── ⑧ BLOOM ─────── */
.card[data-theme="bloom"] {
  background: #f5e6e0;
  color: #6a3e3e;
}
.card[data-theme="bloom"] .card-bg-layer {
  background: linear-gradient(135deg, #fce4d6 0%, #e8c4a8 50%, #d4a574 100%);
}
.card[data-theme="bloom"] .card-bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='%23b8806a' opacity='.18'><circle cx='25' cy='25' r='2.5'/><circle cx='22' cy='28' r='2.5'/><circle cx='28' cy='28' r='2.5'/><circle cx='25' cy='22' r='2.5'/><circle cx='25' cy='28' r='2.5'/><circle cx='75' cy='75' r='2.5'/><circle cx='72' cy='78' r='2.5'/><circle cx='78' cy='78' r='2.5'/><circle cx='75' cy='72' r='2.5'/><circle cx='75' cy='78' r='2.5'/></g></svg>");
  pointer-events: none;
}
.card[data-theme="bloom"] .track-name {
  font-family: 'Dancing Script', cursive !important;
  font-weight: 700;
  color: #8a4a4a;
}
.card[data-theme="bloom"] .progress-style-dots .progress-track {
  background: none !important;
}

/* ===========================================================
   BACK CARD STYLES
   =========================================================== */

.card-back {
  background: #fff;
  color: #1a1a1a;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: 'Vazirmatn', sans-serif;
}

.back-bg-white { background: #fff; }
.back-bg-cream { background: #f7f0e0; }
.back-bg-black { background: #0a0a0a; color: #e8e8e8; }
.back-bg-paper { background: #f7f0e0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .1 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"); }

.back-left {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.back-divider {
  width: 1px;
  background: rgba(0,0,0,.15);
  height: 80%;
  margin: auto 0;
  align-self: center;
}
.back-divider.dotted {
  background: repeating-linear-gradient(180deg, currentColor 0, currentColor 3px, transparent 3px, transparent 7px);
  width: 1px;
  opacity: .3;
}
.back-divider.wave {
  width: 14px;
  background: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'><path d='M7 0 Q14 12 7 25 Q0 38 7 50 Q14 62 7 75 Q0 88 7 100' stroke='%23000' stroke-width='1' fill='none' opacity='.3'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.back-divider.perforation {
  width: 8px;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10px 0;
  background: repeating-linear-gradient(180deg, currentColor 0, currentColor 4px, transparent 4px, transparent 12px);
  opacity: .25;
  border-radius: 0;
}
.back-divider.none { display: none; }

.back-bg-black .back-divider { background: rgba(255,255,255,.15); }

.back-right {
  padding: 24px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Stamp area */
.back-stamp {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 56px;
  height: 70px;
  border: 1.5px dashed currentColor;
  opacity: .45;
  padding: 6px;
  font-size: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.back-stamp.title-stamp {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 9px;
}
.back-stamp.none { display: none; }

/* QR area */
.back-qr {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.back-qr-br { bottom: 20px; right: 20px; }
.back-qr-tr { top: 20px; right: 90px; }
.back-qr-mr { top: 50%; right: 20px; transform: translateY(-50%); }
.back-qr-center { top: 50%; right: 50%; transform: translate(50%, -50%); }

.back-qr canvas, .back-qr img { display: block; background: #fff; padding: 4px; border-radius: 4px; }
.back-qr-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  opacity: .65;
}

/* Sender info */
.back-sender {
  font-family: 'Caveat', cursive;
  font-size: 14px;
  margin-bottom: 8px;
  opacity: .8;
}

/* Message lines (decorative lines for handwriting after print) */
.back-lines {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 20px;
}
.back-lines div {
  height: 1px;
  background: rgba(0,0,0,.12);
}
.back-bg-black .back-lines div { background: rgba(255,255,255,.12); }

.back-message {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.back-title {
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  font-style: italic;
  margin-bottom: 4px;
}
.back-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  opacity: .6;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Decorative music note for back */
.back-music-note {
  font-family: 'Instrument Serif', serif;
  font-size: 48px;
  opacity: .15;
  position: absolute;
  bottom: 18px;
  left: 24px;
  line-height: 1;
}