:root {
  color-scheme: light;
  --paper: #f4ede3;
  --paper-dark: #eee4d7;
  --ink: #38251f;
  --brown: #65483b;
  --brown-soft: #947261;
  --muted: #9c877a;
  --line: #e5d8ca;
  --green: #58765a;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.page-shell { width: min(1200px, calc(100% - 96px)); margin: 0 auto; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(101,72,59,.14); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.wordmark-mark { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #987765; border-radius: 50%; color: var(--brown); font-family: var(--serif); font-size: 12px; letter-spacing: -1px; }
.wordmark-mark span, .footer-center span { color: #bd8968; }
.topbar-note { display: flex; align-items: center; gap: 9px; color: #816d61; font-size: 10px; font-weight: 600; letter-spacing: 1.25px; text-transform: uppercase; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9caa83; box-shadow: 0 0 0 4px rgba(156,170,131,.14); }
.note-separator { color: #c2a995; }

.intro { min-height: 390px; position: relative; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid rgba(101,72,59,.14); }
.intro-copy { position: relative; z-index: 2; padding: 52px 0 60px 7.5%; width: 58%; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 20px; color: #927767; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; }
.eyebrow-line { width: 22px; height: 1px; background: #b28a73; }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(49px, 6.1vw, 75px); font-weight: 500; line-height: .99; letter-spacing: -3px; }
h1 em { color: #947260; font-weight: 500; }
.intro-text { max-width: 365px; margin: 22px 0 23px; color: #887569; font-size: 13px; line-height: 1.75; }
.jump-link { display: inline-flex; align-items: center; gap: 13px; padding-bottom: 5px; border-bottom: 1px solid #ae8d78; color: var(--brown); font-size: 11px; font-weight: 600; }
.jump-link span { font-size: 15px; }

.snapshot-strip { min-height: 60px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(101,72,59,.14); color: #8a7668; font-size: 10px; }
.snapshot-label { display: flex; align-items: center; gap: 9px; color: #876b59; font-size: 9px; font-weight: 700; letter-spacing: 1.25px; }
.snapshot-icon { font-size: 17px; color: #a17e65; }.snapshot-strip p { margin: 0; }.dot-divider { padding: 0 6px; color: #c39d81; }
.update-time { color: #9b8779; }.tiny-sparkle { padding-right: 7px; color: #a78062; }.update-time strong { color: #6f5446; font-weight: 600; }

.profiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 43px 0 52px; }
.profile-card { min-width: 0; position: relative; padding: 25px 28px 20px; overflow: hidden; border: 1px solid rgba(117,84,64,.18); border-radius: 18px; background: rgba(250,246,240,.62); box-shadow: 0 10px 35px rgba(77,51,37,.035); }
.profile-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #ba9074, #e4c8ac 48%, #d0ad8e); }
.profile-him::before { background: linear-gradient(90deg, #92796a, #c7ac95 48%, #b39175); }
.card-topline { display: flex; align-items: center; justify-content: space-between; }.profile-kicker { color: #9a806e; font-size: 8px; font-weight: 700; letter-spacing: 1.65px; }.profile-kicker span { padding: 0 4px; color: #c2a88f; }.card-flower { color: #b08a6e; font-size: 14px; }
.profile-heading { display: flex; align-items: center; margin: 21px 0 21px; gap: 14px; }.avatar { position: relative; flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(130,92,68,.36); border-radius: 50%; color: #755644; font-family: var(--serif); font-size: 21px; }.avatar-her { background: radial-gradient(circle at 33% 28%, #f1ddc7, #dab79a); }.avatar-him { background: radial-gradient(circle at 33% 28%, #e4d4c0, #baa08a); }.avatar-sparkle { position: absolute; top: 0; right: -1px; color: #af8769; font-size: 12px; font-style: normal; }
.profile-heading h2 { margin: 0 0 3px; font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: -.6px; }.profile-subtitle { margin: 0; color: #9b887a; font-size: 10px; }
.track-list { border-top: 1px solid #eadfd4; }
.track { min-height: 65px; display: grid; grid-template-columns: 27px 42px minmax(0,1fr); align-items: center; gap: 12px; border-bottom: 1px solid #eadfd4; }
.track-number { color: #b49a86; font-family: var(--serif); font-size: 14px; font-style: italic; text-align: center; }
.album-art { position: relative; width: 40px; height: 40px; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(99,71,53,.12); border-radius: 8px; color: rgba(255,249,239,.92); font-family: var(--serif); font-size: 18px; box-shadow: inset 0 0 10px rgba(72,43,30,.07); }
.album-art::before, .album-art::after { content: ''; position: absolute; border: 1px solid rgba(255,244,225,.34); border-radius: 50%; }.album-art::before { width: 27px; height: 27px; }.album-art::after { width: 14px; height: 14px; }.album-art span { position: relative; z-index: 1; font-size: 11px; }
.art-1 { background: linear-gradient(142deg,#b78667,#6f554b); }.art-2 { background: linear-gradient(140deg,#a3a18b,#596c61); }.art-3 { background: linear-gradient(145deg,#d2ab88,#9d694e); }.art-4 { background: linear-gradient(145deg,#6c7775,#35494a); }.art-5 { background: linear-gradient(145deg,#ccad95,#86685c); }.art-6 { background: linear-gradient(145deg,#938976,#52574d); }
.track-info { min-width: 0; }.track-title { overflow: hidden; color: #50392f; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.track-artist { overflow: hidden; margin-top: 4px; color: #a08b7d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.card-footer { display: flex; align-items: center; gap: 8px; padding-top: 15px; color: #a08b7d; font-family: var(--serif); font-size: 11px; font-style: italic; }.footer-wave { color: #bb997f; font-family: var(--sans); font-size: 18px; }.footer-heart { margin-left: auto; color: #b58d76; font-size: 17px; }
.between-mark { position: absolute; z-index: 2; top: 50%; left: 50%; width: 46px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #d9c6b5; border-radius: 50%; background: var(--paper); color: #967460; transform: translate(-50%,-40%); }.between-mark span { font-family: var(--serif); font-size: 22px; font-style: italic; line-height: .9; }.between-mark small { margin-top: 2px; font-size: 6px; letter-spacing: .5px; text-transform: uppercase; }
.closing-note { display: flex; align-items: center; justify-content: center; gap: 27px; padding: 3px 0 50px; color: #876e5c; text-align: center; }.closing-note p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.55; }.closing-note em { color: #a48672; font-size: 15px; }.closing-asterisk { color: #bb987d; font-size: 13px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; min-height: 63px; border-top: 1px solid rgba(101,72,59,.16); color: #a28e80; font-size: 8px; letter-spacing: 1.2px; text-transform: uppercase; }.footer-center { color: #806452; font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: -.3px; text-transform: lowercase; }

@media (max-width: 780px) {
  .page-shell { width: min(100% - 44px, 620px); }.topbar { height: 72px; }.topbar-note { font-size: 8px; letter-spacing: .8px; }.intro { min-height: 320px; }.intro-copy { width: 100%; padding: 40px 0; text-align: center; }.intro h1 { font-size: clamp(64px, 10vw, 100px); }.snapshot-strip { flex-wrap: wrap; gap: 6px 15px; justify-content: flex-start; padding: 13px 0; }.snapshot-strip p { margin-left: auto; }.update-time { flex-basis: 100%; padding-left: 27px; }.profiles { gap: 18px; }.profile-card { padding: 22px 18px 18px; }.between-mark { width: 38px; height: 38px; }.profile-heading { gap: 10px; }.avatar { flex-basis: 48px; width: 48px; height: 48px; }.profile-heading h2 { font-size: 24px; }.profile-subtitle { font-size: 8px; }.track { grid-template-columns: 19px 36px minmax(0,1fr) 22px; gap: 8px; }.album-art { width: 36px; height: 36px; }.track-title { font-size: 10px; }.track-artist { font-size: 8px; }
}
@media (max-width: 560px) {
  .page-shell { width: calc(100% - 36px); }.topbar { height: 66px; }.wordmark { gap: 8px; font-size: 15px; }.topbar-note { display: none; }.intro { min-height: 280px; }.intro-copy { padding: 36px 0; }.intro h1 { font-size: clamp(52px, 14vw, 82px); letter-spacing: -2.5px; }.snapshot-strip { min-height: 70px; font-size: 9px; }.snapshot-label { font-size: 8px; }.snapshot-strip p { margin-left: 0; }.update-time { padding-left: 0; }.profiles { grid-template-columns: 1fr; gap: 16px; padding: 27px 0 38px; }.profile-card { padding: 22px 22px 17px; }.profile-heading { margin: 17px 0; }.between-mark { top: 50%; width: 35px; height: 35px; transform: translate(-50%,-50%); }.profile-him { margin-top: 6px; }.closing-note { gap: 14px; padding-bottom: 35px; }.closing-note p { font-size: 15px; }.closing-note em { font-size: 13px; }.site-footer { min-height: 56px; font-size: 6px; letter-spacing: .7px; }
}
@media (prefers-reduced-motion: no-preference) { .jump-link span { transition: transform .2s ease; }.jump-link:hover span { transform: translateY(3px); } }

/* Ciemna odsłona z czekoladowym tłem i miodowo-żółtym akcentem. */
:root {
  color-scheme: dark;
  --paper: #230f08;
  --paper-dark: #180b07;
  --ink: #f2e8dc;
  --brown: #e6ca53;
  --brown-soft: #c9a53f;
  --muted: #b8a193;
  --line: rgba(221, 184, 105, .22);
  --green: #b8a55b;
}

body {
  position: relative;
  overflow-x: hidden;
  background: #230f08;
  color: #f2e8dc;
}

.page-shell { position: relative; z-index: 1; }
.topbar { border-color: rgba(229, 199, 128, .2); }
.wordmark { color: #f1e5d5; }
.wordmark-mark { border-color: rgba(225, 194, 111, .55); color: #e8c945; }
.topbar-note { color: #c4ad98; }
.live-dot { background: #e0c64b; box-shadow: 0 0 0 4px rgba(224, 198, 75, .13); }
.note-separator { color: #9e754b; }

.intro { border-color: rgba(229, 199, 128, .2); }
.intro { min-height: 370px; }
.intro-copy { width: 100%; padding: 64px 0; text-align: center; }
.intro h1 { font-size: clamp(72px, 10vw, 124px); line-height: .92; letter-spacing: -5px; }
.intro h1 em { display: block; }
.eyebrow { color: #d4b35e; }
.eyebrow-line { background: #cfaa41; }
h1 { color: #f5eadb; }
h1 em { color: #e3c63f; }
.intro-text { color: #c2ad9c; }
.jump-link { border-color: #d0ac48; color: #f0d655; }

.snapshot-strip { border-color: rgba(229, 199, 128, .2); color: #c2ab98; }
.snapshot-label { color: #e1c54c; }
.snapshot-icon, .tiny-sparkle { color: #e5c84b; }
.dot-divider { color: #d2ad43; }
.update-time { color: #b8a18e; }
.update-time strong { color: #f0d65c; }

.profile-card {
  border-color: rgba(225, 194, 130, .2);
  background: rgba(29, 15, 10, .88);
  box-shadow: 0 15px 42px rgba(0, 0, 0, .25);
  backdrop-filter: blur(8px);
}
.profile-her { isolation: isolate; }
.profile-her::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: url('./dragonfly-pattern.svg') center / 430px 320px repeat;
  content: '';
  opacity: .13;
  pointer-events: none;
}
.profile-her::before { z-index: 2; }
.profile-her > * { position: relative; z-index: 1; }
.profile-card::before { background: linear-gradient(90deg, #9b702c, #f0d64c 48%, #bb8730); }
.profile-him::before { background: linear-gradient(90deg, #67482e, #d9ba45 48%, #9a6831); }
.profile-kicker { color: #d9bc57; }
.profile-kicker span { color: #a88c4b; }
.card-flower { color: #e5c849; }
.avatar { border-color: rgba(226, 198, 111, .45); color: #f2db84; }
.avatar-her { background: radial-gradient(circle at 33% 28%, #75532d, #2b1810); }
.avatar-him { background: radial-gradient(circle at 33% 28%, #5d472e, #24150e); }
.avatar-sparkle { color: #f0d24c; }
.profile-heading h2 { color: #f5eadb; }
.profile-subtitle { color: #bba591; }
.track-list { border-color: rgba(225, 194, 130, .18); }
.track { border-color: rgba(225, 194, 130, .14); }
.track-number { color: #d5b752; }
.album-art { border-color: rgba(241, 219, 163, .18); box-shadow: inset 0 0 10px rgba(0,0,0,.2); }
.track-title { color: #f1e5d5; }
.track-artist { color: #b9a594; }
.card-footer { color: #b9a28e; }
.footer-wave, .footer-heart { color: #e1c34c; }
.between-mark { border-color: rgba(231, 203, 109, .5); background: #29150d; color: #e8ca49; }
.closing-note { color: #dfc847; }
.closing-note em { color: #d4b9a0; }
.closing-asterisk { color: #efcf48; }
.site-footer { border-color: rgba(229, 199, 128, .2); color: #b49d89; }
.footer-center { color: #edcf4b; }

@media (max-width: 560px) {
  .intro h1 { font-size: clamp(52px, 14vw, 82px); }
  .profile-her::after { background-size: 340px 255px; opacity: .11; }
}

/* Płyta z przesłanej grafiki wraca jako duży, przyciemniony motyw tła. */
body::before {
  position: fixed;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 105vmax;
  height: 105vmax;
  background: url('./vinyl-background.jpg') center / 100% 100% no-repeat;
  content: '';
  filter: brightness(.72) saturate(.9);
  opacity: .42;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-mask: radial-gradient(circle closest-side at center, #000 84%, transparent 85%);
  mask: radial-gradient(circle closest-side at center, #000 84%, transparent 85%);
}

.header-date {
  color: #ddc65b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.site-footer {
  display: block;
  min-height: auto;
  padding: 34px 0 42px;
  border-color: rgba(229, 199, 128, .2);
}
.footer-playlists { width: min(100%, 760px); margin: 0 auto; }
.playlists-heading { margin: 0 0 19px; color: #f3e8d9; font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: 0; text-align: center; text-transform: none; }
.playlists-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.footer-playlist { min-width: 0; display: grid; align-content: start; gap: 11px; }
.playlist-embed {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.playlist-mobile-card { display: none; }
.playlist-footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #edcf4b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.playlist-footer-link span { font-size: 15px; }

@media (max-width: 560px) {
  body::before { width: 130vmax; height: 130vmax; opacity: .34; }
  .header-date { font-size: 9px; letter-spacing: 1px; }
  .site-footer { padding: 23px 0 34px; }
  .playlists-heading { font-size: 22px; margin-bottom: 16px; }
  .playlists-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Sterowanie logowaniem i listami pobranymi z kont Spotify. */
.snapshot-strip { gap: 16px; }
.period-picker { display: inline-flex; align-items: center; gap: 9px; color: #b8a18e; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.period-picker select {
  max-width: 180px;
  padding: 8px 28px 8px 10px;
  border: 1px solid rgba(229, 199, 128, .25);
  border-radius: 999px;
  outline: none;
  background: rgba(25, 12, 8, .88);
  color: #f1e5d5;
  font: 500 10px var(--sans);
  letter-spacing: 0;
}
.period-picker select:focus-visible, .refresh-button:focus-visible, .connect-button:focus-visible, .track:focus-visible { outline: 2px solid #e3c63f; outline-offset: 3px; }
.refresh-button, .connect-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(229, 199, 128, .3);
  border-radius: 999px;
  background: rgba(31, 15, 9, .8);
  color: #e8ca49;
  cursor: pointer;
  font: 700 9px var(--sans);
  letter-spacing: .45px;
  transition: background .18s ease, border-color .18s ease;
}
.refresh-button:hover, .connect-button:hover { border-color: rgba(229, 199, 128, .65); background: rgba(87, 54, 20, .45); }
.connect-button[hidden] { display: none; }
.refresh-button span { font-size: 15px; line-height: 1; }
.profile-actions { display: flex; align-items: center; gap: 12px; min-height: 45px; margin: 0 0 14px; }
.profile-status { color: #b9a594; font-size: 9px; line-height: 1.5; }
.profile-status[data-state="connected"] { color: #d8c765; }
.profile-status[data-state="loading"] { color: #c9af79; }
.profile-status[data-state="error"] { color: #e69b81; }
.track-list { min-height: 72px; }
.empty-state { margin: 0; padding: 23px 4px; color: #b9a594; font-size: 10px; line-height: 1.5; }
.track { color: inherit; text-decoration: none; transition: background .15s ease; }
.track:hover { background: rgba(235, 201, 85, .06); }
.album-art img { display: block; width: 100%; height: 100%; border-radius: 7px; object-fit: cover; }
.album-art { overflow: visible; }
.album-art .track-favorite-mark { position: absolute; z-index: 3; top: -5px; right: -5px; width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid rgba(255,245,205,.8); border-radius: 50%; background: #e7cd54; color: #2a180e; font-size: 8px; line-height: 1; box-shadow: 0 2px 7px rgba(0,0,0,.35); }
.album-art:has(img)::before, .album-art:has(img)::after { display: none; }
.album-fallback { color: #e6ca53; }
.avatar-photo { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-initial { position: relative; z-index: 1; }
.avatar-initial[hidden] { display: none; }
.avatar-sparkle { z-index: 2; }

.daily-song { padding: 31px 0 33px; border-bottom: 1px solid rgba(229, 199, 128, .2); }
.daily-song-heading { margin-bottom: 17px; text-align: center; }
.daily-song-kicker { display: block; margin-top: 7px; color: #d9bc57; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.daily-song-heading h2 { margin: 0; color: #f3e8d9; font-family: var(--serif); font-size: clamp(38px, 5vw, 54px); font-weight: 500; line-height: 1.05; }
.daily-song-card {
  width: min(100%, 790px);
  min-height: 112px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 auto;
  padding: 13px 17px;
  border: 1px solid rgba(229, 199, 128, .24);
  border-radius: 18px;
  background: rgba(29, 15, 10, .85);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
  backdrop-filter: blur(7px);
}
.daily-song-card[hidden] { display: none; }
.daily-song-cover-wrap { position: relative; width: 82px; height: 82px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: linear-gradient(145deg, #75532d, #2b1810); color: #e6ca53; }
.daily-song-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.daily-song-cover[hidden] { display: none; }
.daily-song-cover-fallback { font-size: 27px; }
.daily-song-info { min-width: 0; }
.daily-song-info h3 { overflow: hidden; margin: 0; color: #f3e8d9; font-family: var(--serif); font-size: 19px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.daily-song-artists { overflow: hidden; margin: 5px 0 0; color: #b9a594; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.daily-song-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(229, 199, 128, .36); border-radius: 999px; color: #e8ca49; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-decoration: none; transition: background .18s ease, border-color .18s ease; }
.daily-song-link:hover { border-color: rgba(229, 199, 128, .7); background: rgba(87, 54, 20, .45); }
.daily-song-icon { display: block; flex: 0 0 auto; color: currentColor; }
.daily-song-play-icon { width: 13px; height: 13px; }
.daily-song-external-icon { width: 14px; height: 14px; }
.daily-song-status { margin: 11px 0 0; color: #b9a594; font-size: 9px; text-align: center; }
.daily-song-status[data-state="error"] { color: #e69b81; }
.daily-song-status[data-state="ready"] { color: #b9a594; }

.together-counter {
  position: relative;
  margin: 0 0 8px;
  padding: 39px 20px 43px;
  border-top: 1px solid rgba(229, 199, 128, .2);
  border-bottom: 1px solid rgba(229, 199, 128, .2);
  text-align: center;
}
.together-counter h2 { margin: 0; color: #f3e8d9; font-family: var(--serif); font-size: clamp(22px, 3vw, 31px); font-weight: 500; }
.counter-days { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 10px; color: #e4c84b; }
.counter-days span { font-family: var(--serif); font-size: clamp(50px, 7vw, 72px); line-height: 1; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.counter-days small { color: #f1e5d5; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.counter-hours-note { margin: 12px 0 0; color: #d9bc57; font-size: 9px; }
.counter-hours { margin: 3px 0 0; color: #b9a594; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .5px; }

@media (max-width: 780px) {
  .snapshot-strip { justify-content: flex-start; }
  .refresh-button { margin-left: auto; }
}
@media (max-width: 560px) {
  .snapshot-strip { gap: 10px; }
  .period-picker { gap: 6px; }
  .period-picker select { max-width: 142px; font-size: 9px; }
  .refresh-button { min-height: 32px; padding: 0 10px; }
  .profile-actions { align-items: flex-start; flex-direction: column; gap: 8px; padding-bottom: 8px; }
  .together-counter { padding: 34px 15px 37px; }
  .daily-song { padding: 27px 0; }
  .daily-song-card { grid-template-columns: 68px minmax(0, 1fr); gap: 13px; padding: 12px; }
  .daily-song-cover-wrap { width: 68px; height: 68px; }
  .daily-song-link { grid-column: 1 / -1; }
}

/* Bez cienkich poziomych separatorów między sekcjami i utworami. */
.topbar,
.intro,
.snapshot-strip,
.daily-song,
.together-counter,
.site-footer,
.track-list,
.track { border: 0; }

/* Mobilny układ: większe cele dotykowe, czytelniejsze utwory i spokojniejszy rytm sekcji. */
@media (max-width: 560px) {
  .page-shell { width: calc(100% - 32px); }
  .topbar { height: 64px; gap: 12px; }
  .header-date { font-size: 9px; letter-spacing: 1.1px; }

  .intro { min-height: clamp(250px, 74vw, 310px); }
  .intro-copy { padding: 30px 0; }
  .intro h1 { font-size: clamp(49px, 13.5vw, 68px); letter-spacing: -2.8px; line-height: .94; }

  .daily-song { padding: 25px 0 23px; }
  .daily-song-heading { margin-bottom: 15px; }
  .daily-song-heading h2 { font-size: clamp(35px, 10vw, 44px); }
  .daily-song-kicker { margin-top: 6px; font-size: 8px; letter-spacing: 1.15px; }
  .daily-song-card { grid-template-columns: 70px minmax(0,1fr); gap: 12px; padding: 13px; border-radius: 19px; }
  .daily-song-cover-wrap { width: 70px; height: 70px; border-radius: 12px; }
  .daily-song-info h3 { font-size: 17px; }
  .daily-song-artists { font-size: 10px; }
  .daily-song-link { min-height: 44px; font-size: 10px; }
  .daily-song-status { font-size: 10px; }

  .snapshot-strip {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    gap: 9px 12px;
    min-height: 0;
    padding: 15px 0;
  }
  .snapshot-label { grid-column: 1; grid-row: 1; font-size: 8px; }
  .period-picker { grid-column: 1; grid-row: 2; display: flex; justify-content: space-between; width: 100%; gap: 8px; font-size: 8px; }
  .period-picker select { width: clamp(132px, 42vw, 190px); max-width: 100%; min-width: 0; min-height: 42px; padding: 0 28px 0 12px; font-size: 10px; }
  .refresh-button { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 44px; margin: 0; padding: 0 12px; font-size: 9px; }

  .profiles { gap: 14px; padding: 20px 0 28px; }
  .profile-card { padding: 19px 17px 15px; border-radius: 21px; background: rgba(29,15,10,.94); box-shadow: 0 15px 38px rgba(0,0,0,.28); }
  .profile-kicker { font-size: 8px; letter-spacing: 1.35px; }
  .profile-heading { gap: 12px; margin: 14px 0 15px; }
  .avatar { flex-basis: 54px; width: 54px; height: 54px; }
  .profile-heading h2 { font-size: 25px; }
  .profile-subtitle { font-size: 9px; }
  .profile-actions { min-height: 44px; align-items: center; flex-flow: row wrap; gap: 8px 11px; margin: 0 0 9px; padding-bottom: 0; }
  .connect-button { min-height: 44px; padding: 0 15px; font-size: 9px; }
  .profile-status { font-size: 10px; }
  .track-list { min-height: 0; }
  .track { grid-template-columns: 20px 44px minmax(0,1fr); gap: 8px; min-height: 73px; padding: 6px 1px; border-radius: 13px; }
  .track-number { font-size: 13px; }
  .album-art { width: 44px; height: 44px; border-radius: 10px; }
  .track-title { display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.3; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .track-artist { margin-top: 3px; font-size: 9px; }
  .empty-state { padding: 18px 2px; font-size: 10px; }

  .together-counter { margin-bottom: 0; padding: 29px 12px 31px; }
  .together-counter h2 { font-size: clamp(23px, 6.5vw, 29px); }
  .counter-days { margin-top: 8px; }
  .counter-days span { font-size: clamp(58px, 16vw, 70px); }
  .counter-hours-note { margin-top: 9px; font-size: 10px; }
  .counter-hours { font-size: 10px; }

  .site-footer { padding: 27px 0 32px; }
  .footer-playlists { width: 100%; }
  .playlists-heading { margin-bottom: 15px; font-size: 24px; }
  .playlists-grid { grid-template-columns: 1fr; gap: 18px; }
  .playlist-embed, .playlist-footer-link { display: none; }
  .playlist-mobile-card {
    display: grid;
    grid-template-columns: 56px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 13px 15px;
    border: 1px solid rgba(229,199,128,.3);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(53,31,20,.96), rgba(29,15,10,.96));
    box-shadow: 0 12px 28px rgba(0,0,0,.2), 0 0 28px rgba(224,198,75,.08);
  }
  .playlist-mobile-art { position: relative; display: block; width: 56px; height: 56px; }
  .playlist-mobile-cover { display: block; width: 56px; height: 56px; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(231,205,84,.58); border-radius: 12px; background: #20130d; box-shadow: 0 0 0 3px rgba(231,205,84,.07), 0 7px 16px rgba(0,0,0,.32); }
  .playlist-mobile-cover[hidden], .playlist-mobile-disc[hidden] { display: none !important; }
  .playlist-mobile-disc {
    width: 56px;
    height: 56px;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(231,205,84,.45);
    border-radius: 12px;
    background: repeating-radial-gradient(circle, #17100d 0 4px, #302017 5px 6px);
    color: #e7cd54;
    font-size: 20px;
  }
  .playlist-mobile-copy { min-width: 0; display: grid; gap: 5px; }
  .playlist-mobile-copy strong { overflow: hidden; color: #f3e8d9; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .playlist-mobile-copy small { color: #c0aa94; font-size: 9px; }
  .playlist-mobile-arrow {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(231,205,84,.42);
    border-radius: 50%;
    background: rgba(231,205,84,.05);
    color: #e7cd54;
  }
  .playlist-mobile-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

@media (max-width: 380px) {
  .page-shell { width: calc(100% - 28px); }
  .topbar { height: 60px; }
  .intro h1 { font-size: clamp(46px, 13.2vw, 54px); }
  .profile-card { padding-right: 14px; padding-left: 14px; }
  .playlist-mobile-card { grid-template-columns: 50px minmax(0,1fr) auto; gap: 10px; padding-right: 12px; padding-left: 12px; }
  .playlist-mobile-art, .playlist-mobile-cover, .playlist-mobile-disc { width: 50px; height: 50px; }
  .profile-heading { gap: 10px; }
  .avatar { flex-basis: 50px; width: 50px; height: 50px; }
  .track { grid-template-columns: 18px 42px minmax(0,1fr); gap: 6px; }
  .album-art { width: 42px; height: 42px; }
  .period-picker select { width: clamp(126px, 42vw, 160px); }
}

@media (hover: none) {
  .track:active { background: rgba(235,201,85,.08); }
  .connect-button:active, .refresh-button:active, .daily-song-link:active { background: rgba(87,54,20,.5); }
}

/* Łagodne wejście kart i delikatna poświata w ciepłym złotym odcieniu. */
.profile-card {
  box-shadow: 0 15px 38px rgba(0,0,0,.28), 0 0 34px rgba(224,198,75,.07);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.daily-song-card {
  box-shadow: 0 12px 32px rgba(0,0,0,.2), 0 0 40px rgba(224,198,75,.08);
  transition: box-shadow .3s ease, border-color .3s ease;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes card-arrive {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .profile-card { animation: card-arrive .65s cubic-bezier(.2,.7,.25,1) both; }
  .profile-him { animation-delay: .12s; }
  .daily-song-card:not([hidden]) { animation: card-arrive .55s cubic-bezier(.2,.7,.25,1) both; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .profile-card:hover {
    transform: translateY(-3px);
    border-color: rgba(229,199,95,.32);
    box-shadow: 0 18px 42px rgba(0,0,0,.32), 0 0 44px rgba(224,198,75,.13);
  }
  .daily-song-card:hover {
    border-color: rgba(229,199,95,.34);
    box-shadow: 0 15px 36px rgba(0,0,0,.26), 0 0 48px rgba(224,198,75,.14);
  }
}

/* Dopasowanie list utworów po usunięciu osobnych przycisków odtwarzania. */
@media (max-width: 780px) {
  .track { grid-template-columns: 19px 36px minmax(0,1fr); }
}
@media (max-width: 560px) {
  .track { grid-template-columns: 20px 44px minmax(0,1fr); }
}
@media (max-width: 380px) {
  .track { grid-template-columns: 18px 42px minmax(0,1fr); }
}

/* Dopasowanie ikon SVG oraz czytelności dłuższych nazw na telefonach. */
.music-note-icon { display: block; fill: currentColor; }
.snapshot-icon { width: 16px; height: 16px; font-size: initial; }
.refresh-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.avatar-sparkle { position: absolute; top: 0; right: -3px; width: 12px; height: 12px; fill: currentColor; }
.album-fallback { width: 21px; height: 21px; fill: currentColor; }
.daily-song-cover-fallback { display: grid; place-items: center; color: #e6ca53; }
.daily-song-cover-fallback .music-note-icon { width: 28px; height: 28px; }
.playlist-mobile-disc .music-note-icon { width: 20px; height: 20px; }
.playlist-footer-link .external-link-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.favorite-star-icon { display: block; width: 9px; height: 9px; fill: currentColor; color: #2a180e; }

@media (max-width: 560px) {
  .track { min-height: 76px; padding-top: 8px; padding-bottom: 8px; }
  .track-info { display: grid; align-content: center; gap: 3px; }
  .track-title { line-height: 1.35; overflow-wrap: anywhere; }
  .track-artist { margin-top: 0; line-height: 1.35; }
  .daily-song-info h3 { display: -webkit-box; overflow: hidden; line-height: 1.28; white-space: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .daily-song-artists { display: -webkit-box; margin-top: 4px; line-height: 1.35; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

@media (max-width: 380px) {
  .track { grid-template-columns: 17px 40px minmax(0,1fr); gap: 7px; }
  .album-art { width: 40px; height: 40px; }
}

/* Złote wykończenie okładek utworów. */
.album-art {
  border-color: rgba(231,205,84,.28);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .track:hover .album-art,
  .track:focus-visible .album-art {
    border-color: rgba(231,205,84,.88);
    box-shadow: 0 0 0 2px rgba(231,205,84,.13), 0 0 17px rgba(231,205,84,.24), inset 0 0 10px rgba(0,0,0,.2);
    transform: scale(1.045);
  }
}

@media (hover: none) {
  .track:active .album-art {
    border-color: rgba(231,205,84,.8);
    box-shadow: 0 0 0 2px rgba(231,205,84,.12), 0 0 14px rgba(231,205,84,.2), inset 0 0 10px rgba(0,0,0,.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .album-art { transition: none; }
}