/* ZoodleTunes (home page music library). See public/zoodletunes/zoodletunes.js. */
.zt { --zt-bg:#0f1420; --zt-panel:#171e2e; --zt-row:#1d2538; --zt-hover:#26304a; --zt-text:#f4f7ff; --zt-dim:#a7b3cc;
  --zt-accent:#26d6bd; --zt-gold:#ffd23f; --zt-pro:#ffb52b; --zt-max:#8f4fe0;
  margin: 8px 0 30px; border-radius: 26px; overflow: hidden; background: var(--zt-bg); color: var(--zt-text);
  text-align: left; white-space: normal; box-shadow: 0 16px 40px rgba(0,0,0,.35); font-family: Arial, Helvetica, sans-serif; }
.zt * { box-sizing: border-box; }
.zt button { font: inherit; }
.zt-hero { position: relative; padding: 14px 18px 12px; text-align: center;
  background: radial-gradient(circle at 50% 0%, #2b3f7a 0%, #141b2d 62%, var(--zt-bg) 100%); }
.zt-hero img.zt-logo { display: block; width: min(420px, 80%); height: auto; margin: 0 auto 6px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.zt-tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 4px auto 6px; max-width: 1000px; }
.zt-tier { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 800;
  background: rgba(255,255,255,.08); color: var(--zt-text); border: 2px solid rgba(255,255,255,.14); }
.zt-tier b { font-weight: 900; }
.zt-tier.pro { border-color: rgba(255,181,43,.6); }
.zt-tier.max { border-color: rgba(143,79,224,.75); }
.zt-tier.has { background: rgba(38,214,189,.16); border-color: var(--zt-accent); }
.zt-tier .zt-check { color: var(--zt-accent); font-weight: 900; }
.zt-status { margin: 4px auto 0; max-width: 760px; color: var(--zt-dim); font-size: 14px; line-height: 1.4; }
.zt-status a { color: var(--zt-gold); font-weight: 800; }

.zt-body { padding: 4px 18px 18px; }
.zt-albums { display: flex; gap: 12px; overflow-x: auto; padding: 12px 2px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.zt-album { flex: 0 0 108px; width: 108px; min-width: 0; scroll-snap-align: start; padding: 8px; border-radius: 14px; background: var(--zt-panel); border: 2px solid transparent;
  color: var(--zt-text); cursor: pointer; text-align: left; transition: background .15s, transform .15s; }
.zt-album:hover { background: var(--zt-hover); transform: translateY(-2px); }
.zt-album.on { border-color: var(--zt-accent); background: var(--zt-hover); }
.zt-album img, .zt-album .zt-all { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.zt-album .zt-all { display: flex; align-items: center; justify-content: center; font-size: 38px;
  background: linear-gradient(135deg, #26d6bd, #2a68e6 55%, #8f4fe0); }
.zt-album strong { display: block; margin-top: 8px; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-album small { color: var(--zt-dim); font-size: 12px; }

.zt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 4px 0 10px; }
.zt-bigplay { width: 54px; height: 54px; border: 0; border-radius: 50%; background: var(--zt-accent); color: #062a26; font-size: 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(38,214,189,.35); transition: transform .12s; }
.zt-bigplay:hover { transform: scale(1.06); }
.zt-iconbtn { border: 0; background: transparent; color: var(--zt-dim); font-size: 20px; cursor: pointer; padding: 8px; border-radius: 10px; line-height: 1; }
.zt-iconbtn:hover { color: var(--zt-text); background: rgba(255,255,255,.07); }
.zt-iconbtn.on { color: var(--zt-accent); }
.zt-heading { flex: 1 1 200px; min-width: 0; }
.zt-heading h3 { margin: 0; font-size: 22px; color: var(--zt-text); }
.zt-heading small { color: var(--zt-dim); }
.zt-search { flex: 0 1 240px; min-width: 150px; padding: 10px 12px; border-radius: 999px; border: 2px solid #2c3650; background: #0b1019;
  color: var(--zt-text); font-size: 15px; }
.zt-search::placeholder { color: #7d8aa6; }

.zt-list { border-top: 1px solid #263048; }
.zt-more { display: block; margin: 10px auto 0; padding: 10px 22px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 800; }
.zt-more[hidden] { display: none; }
.zt-row { display: grid; grid-template-columns: 34px 44px minmax(0, 1.6fr) minmax(0, 1fr) 56px 40px; gap: 12px; align-items: center;
  padding: 7px 8px; border-radius: 10px; cursor: pointer; color: var(--zt-text); }
.zt-row:hover { background: var(--zt-row); }
.zt-row.now { background: var(--zt-hover); }
.zt-row.now .zt-title { color: var(--zt-accent); }
.zt-num { color: var(--zt-dim); text-align: center; font-size: 14px; position: relative; }
.zt-row:hover .zt-num span { visibility: hidden; }
.zt-row:hover .zt-num::after { content: "\25B6"; position: absolute; inset: 0; color: var(--zt-text); }
.zt-row.now.playing .zt-num::after, .zt-row.now.playing:hover .zt-num::after { content: none; }
.zt-row img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.zt-title { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-artist { color: var(--zt-dim); font-size: 13px; }
.zt-albumname { color: var(--zt-dim); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-time { color: var(--zt-dim); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.zt-dl { border: 0; background: transparent; color: var(--zt-dim); font-size: 17px; cursor: pointer; border-radius: 8px; padding: 6px; text-decoration: none; text-align: center; }
.zt-dl:hover { color: var(--zt-text); background: rgba(255,255,255,.08); }
.zt-empty { padding: 22px; text-align: center; color: var(--zt-dim); font-weight: 700; }

/* little equalizer on the playing row */
.zt-eq { display: none; height: 14px; align-items: flex-end; justify-content: center; gap: 2px; }
.zt-row.now.playing .zt-eq { display: flex; }
.zt-row.now.playing .zt-num span { display: none; }
.zt-eq i { width: 3px; background: var(--zt-accent); border-radius: 2px; animation: zt-eq 0.9s ease-in-out infinite; }
.zt-eq i:nth-child(2) { animation-delay: -.3s; } .zt-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes zt-eq { 0%,100% { height: 4px; } 50% { height: 14px; } }

/* player bar */
.zt-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482000; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 16px;
  background: #0a0e16; color: #f4f7ff; border-top: 1px solid #263048; box-shadow: 0 -10px 30px rgba(0,0,0,.4);
  font-family: Arial, Helvetica, sans-serif; text-align: left; white-space: normal; }
.zt-player[hidden] { display: none; }
.zt-player * { box-sizing: border-box; }
.zt-np { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zt-np img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.zt-np strong { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-np small { color: #a7b3cc; font-size: 13px; }
.zt-badge[hidden] { display: none; }
.zt-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 900; background: #ffb52b; color: #2a1600; vertical-align: middle; }
.zt-center { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.zt-controls { display: flex; align-items: center; gap: 6px; }
.zt-controls .zt-iconbtn { color: #c9d3e8; font-size: 18px; }
.zt-controls .zt-iconbtn.on { color: #26d6bd; }
.zt-pp { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: #0b1019; font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.zt-progress { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 12px; color: #a7b3cc; font-variant-numeric: tabular-nums; }
.zt-progress input, .zt-vol input { flex: 1 1 auto; width: 100%; accent-color: #26d6bd; cursor: pointer; }
.zt-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.zt-vol { display: flex; align-items: center; gap: 6px; width: 140px; }
.zt-upsell { grid-column: 1 / -1; margin: -2px 0 0; text-align: center; font-size: 13px; color: #ffd23f; font-weight: 800; }
.zt-upsell a { color: #ffd23f; }
.zt-upsell[hidden] { display: none; }
body.zt-has-player { padding-bottom: 96px; }

@media (max-width: 760px) {
  .zt-body { padding: 4px 10px 14px; }
  .zt-hero { padding: 14px 10px 12px; }
  .zt-tier { font-size: 12px; padding: 6px 10px; }
  .zt-album { flex-basis: 96px; width: 96px; }
  .zt-row { grid-template-columns: 22px 44px minmax(0, 1fr) 40px auto; gap: 8px; padding: 7px 4px; }
  .zt-albumname { display: none; }
  .zt-heading { flex: 1 1 0; }
  .zt-heading h3 { font-size: 19px; }
  .zt-search { flex: 1 1 100%; }
  .zt-bigplay { width: 46px; height: 46px; font-size: 19px; }
  /* Phones (Tim, 10 Oct 2026): one slim bar, about 80px tall instead of 135:
     song + buttons + close on one line, a thin progress bar under it. */
  .zt-player { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "np ctrl close" "prog prog prog" "up up up";
    gap: 2px 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .zt-np { grid-area: np; gap: 8px; }
  .zt-center { display: contents; }
  .zt-controls { grid-area: ctrl; gap: 0; }
  .zt-progress { grid-area: prog; font-size: 11px; gap: 6px; }
  .zt-right { grid-area: close; }
  .zt-vol { display: none; }
  .zt-upsell { grid-area: up; font-size: 12px; margin: 0; }
  .zt-np img { width: 40px; height: 40px; }
  .zt-np strong { font-size: 14px; }
  .zt-np small { font-size: 12px; }
  .zt-badge { display: none !important; }
  .zt-pp { width: 36px; height: 36px; font-size: 15px; }
  .zt-controls .zt-shuffle, .zt-controls .zt-repeat { display: none; }
  body.zt-has-player { padding-bottom: 96px; }
}

/* The home page styles every <button> with !important (teal fill, black
 * border, drop shadow). Undo that inside ZoodleTunes; the ids win. */
#zoodleTunes button, #ztPlayer button {
  border: 0 !important; box-shadow: none !important; margin: 0; transform: none !important; filter: none !important;
  color: inherit !important; background: transparent !important; }
#zoodleTunes .zt-album { background: var(--zt-panel) !important; border: 2px solid transparent !important; color: var(--zt-text) !important; padding: 8px; border-radius: 14px; }
#zoodleTunes .zt-album:hover { background: var(--zt-hover) !important; transform: translateY(-2px) !important; }
#zoodleTunes .zt-album.on { border-color: var(--zt-accent) !important; background: var(--zt-hover) !important; }
#zoodleTunes .zt-bigplay { background: var(--zt-accent) !important; color: #062a26 !important; box-shadow: 0 8px 18px rgba(38,214,189,.35) !important; padding: 0; border-radius: 50%; }
#zoodleTunes .zt-bigplay:hover { transform: scale(1.06) !important; }
#zoodleTunes .zt-iconbtn, #ztPlayer .zt-iconbtn { color: var(--zt-dim, #c9d3e8) !important; padding: 8px; border-radius: 10px; }
#zoodleTunes .zt-iconbtn:hover, #ztPlayer .zt-iconbtn:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; }
#ztPlayer .zt-iconbtn { color: #c9d3e8 !important; }
#ztPlayer .zt-iconbtn.on, #zoodleTunes .zt-iconbtn.on { color: #26d6bd !important; }
#ztPlayer .zt-pp { background: #fff !important; color: #0b1019 !important; padding: 0; border-radius: 50%; }
#ztPlayer .zt-pp:hover { transform: scale(1.06) !important; }
#zoodleTunes .zt-dl { color: var(--zt-dim) !important; }
#zoodleTunes .zt-dl:hover { color: #fff !important; }
#zoodleTunes .zt-more { background: var(--zt-panel) !important; color: var(--zt-accent) !important; border: 2px solid var(--zt-accent) !important;
  padding: 10px 22px; border-radius: 999px; margin: 10px auto 0; }
#zoodleTunes .zt-more:hover { background: var(--zt-hover) !important; }
/* The home page gives every <input> padding, a border and a 10px margin,
 * which made the player's sliders 44px tall. Keep them slim. */
#ztPlayer input[type="range"] { height: 18px; min-height: 0; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; }