:root{--bg:#f7f8fb;--surface:#fff;--surface2:#f0f3f7;--text:#111827;--muted:#667085;--line:#e5e7eb;--brand:#111827;--mint:#2ee6a6;--mintdark:#0e8a65;--danger:#c24155;--shadow:0 18px 50px rgba(15,23,42,.08);--max:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}.hidden{display:none!important}.shell{width:min(var(--max),calc(100% - 32px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-weight:950}.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--brand);color:var(--mint);display:grid;place-items:center}.nav-links{display:flex;gap:24px;color:#475467;font-size:14px;font-weight:700}.nav-actions{display:flex;gap:8px;align-items:center}.user-email{font-size:11px;color:var(--muted);max-width:160px;overflow:hidden;text-overflow:ellipsis}
.btn{border:1px solid var(--line);background:#fff;color:var(--text);padding:10px 14px;border-radius:11px;font-weight:800}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn-mint{background:var(--mint);border-color:var(--mint);color:#06251b}.btn-danger{color:var(--danger)}.btn-sm{font-size:12px;padding:7px 10px}.full{width:100%}
.hero{padding:84px 0 46px;background:linear-gradient(180deg,#fff,#f7f8fb)}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:900;color:var(--mintdark)}.hero h1{font-size:clamp(48px,7vw,82px);line-height:.94;letter-spacing:-.06em;margin:14px 0 18px}.hero h1 span{color:var(--mintdark)}.hero p{font-size:17px;line-height:1.7;color:var(--muted);max-width:680px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.hero-card{min-height:360px;border-radius:28px;background:var(--brand);color:#fff;padding:30px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow)}.music-note{font-size:90px;color:var(--mint)}.hero-card h3{font-size:30px;margin:0}.hero-card p{font-size:14px;color:#cbd5e1}
.shared-panel{background:#effcf7;border-top:1px solid #d7f3e8;border-bottom:1px solid #d7f3e8}.shared-inner{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:16px}.shared-inner small,.shared-inner span{display:block;color:var(--muted);font-size:10px}.shared-inner strong{display:block;margin:4px 0}.shared-actions{display:flex;gap:8px}
.section{padding:68px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-head h2{font-size:34px;letter-spacing:-.04em;margin:6px 0 0}.section-head p{margin:0;color:var(--muted);max-width:560px}.toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}.tabs{display:flex;background:#fff;border:1px solid var(--line);padding:4px;border-radius:12px}.tab{border:0;background:transparent;color:var(--muted);padding:9px 12px;border-radius:9px;font-weight:800}.tab.active{background:var(--brand);color:#fff}.search{width:min(390px,100%);display:flex;align-items:center;border:1px solid var(--line);background:#fff;border-radius:12px;padding:0 12px}.search input{border:0;outline:0;width:100%;padding:10px 5px;background:transparent}
.track-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.track-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 28px rgba(15,23,42,.04)}.track-cover{aspect-ratio:1/1;position:relative;background:#eef1f4}.track-cover img{width:100%;height:100%;object-fit:cover}.cover-placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:56px;color:#8190a4;background:linear-gradient(135deg,#eef1f4,#e7f8f2)}.play-fab{position:absolute;right:12px;bottom:12px;width:45px;height:45px;border:0;border-radius:50%;background:var(--mint);font-weight:900}.track-info{padding:14px}.track-kicker{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}.track-category,.privacy-dot{font-size:9px;font-weight:900;color:#667085}.privacy-dot.public{color:#16805f}.privacy-dot.private{color:#986a10}.track-title-link{width:100%;border:0;background:transparent;padding:0;text-align:left;font-weight:900;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:12px;color:var(--muted);margin-top:4px}.license-row{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}.license-badge{display:inline-flex;padding:5px 7px;border-radius:7px;font-size:8px;font-weight:900;letter-spacing:.05em;border:1px solid var(--line)}.license-badge.original{background:#111827;color:#ffe080}.license-badge.arr{background:#f2f4f7;color:#475467}.license-badge.cc{background:#eef6ff;color:#246b9c}.license-badge.pd{background:#edf9f2;color:#20805a}.youtube-badge{background:#fff1f1;color:#c52828;border-color:#ffd6d6}.track-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:12px}.tiny-actions{display:flex;gap:4px;flex-wrap:wrap}.tiny-btn{border:1px solid var(--line);background:#fff;padding:6px 7px;border-radius:8px;font-size:10px;font-weight:800}.tiny-btn.danger{color:var(--danger)}.plays{font-size:10px;color:var(--muted)}.empty-state{grid-column:1/-1;text-align:center;padding:50px;color:var(--muted);border:1px dashed var(--line);border-radius:16px}
.licensing-section{padding:86px 0;background:#111827;color:#fff}.licensing-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}.licensing-grid h2{font-size:44px;letter-spacing:-.04em;margin:10px 0}.licensing-grid p{color:#aeb8c5;line-height:1.7}.license-list{display:grid;gap:12px}.license-item{display:flex;gap:13px;align-items:center;border:1px solid #2d3746;background:#171f2b;padding:16px;border-radius:16px}.license-item small{display:block;color:#98a5b4;margin-top:4px}
.creator-section{background:#fff}.creator-box{display:flex;justify-content:space-between;align-items:center;gap:24px;border:1px solid var(--line);border-radius:24px;padding:32px}.creator-box h2{font-size:38px;margin:8px 0}.creator-box p{color:var(--muted)}
footer{border-top:1px solid var(--line);background:#fff}.footer-inner{min-height:90px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}
.player-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:80;width:min(1000px,calc(100% - 26px));display:grid;grid-template-columns:230px 1fr auto;align-items:center;gap:12px;padding:10px;background:rgba(17,24,39,.96);color:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.3)}.now-playing{display:flex;align-items:center;gap:9px;min-width:0}.now-playing img,.now-cover-empty{width:48px;height:48px;border-radius:10px;object-fit:cover;background:#263142}.now-cover-empty{display:grid;place-items:center}.now-copy{display:flex;flex-direction:column;min-width:0}.now-copy strong,.now-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-copy span{font-size:11px;color:#b9c2ce}audio{width:100%}.icon-btn{border:1px solid #374151;background:#111827;color:white;width:36px;height:36px;border-radius:10px}
.modal{position:fixed;inset:0;z-index:110;background:rgba(15,23,42,.68);display:grid;place-items:center;padding:18px}.modal-card{position:relative;width:min(760px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;padding:24px;box-shadow:0 25px 90px rgba(0,0,0,.28)}.small-card{width:min(460px,100%)}.large-card{width:min(800px,100%)}.modal-close{position:absolute;right:16px;top:16px;width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:10px}.modal-card h2{font-size:30px;margin:7px 0}.modal-card p{color:var(--muted)}.mode-switch{display:flex;margin:16px 0;border:1px solid var(--line);padding:4px;border-radius:11px}.mode-btn{flex:1;border:0;background:transparent;padding:9px;border-radius:8px;font-weight:800}.mode-btn.active{background:var(--brand);color:#fff}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:block}.field-wide{grid-column:1/-1}.field span{display:block;font-size:11px;font-weight:800;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 11px;outline:0;background:#fff}.field textarea{resize:vertical}.field small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.progress{height:8px;background:#eef1f5;border-radius:99px;overflow:hidden;margin:8px 0}.progress div{width:0;height:100%;background:var(--mint)}
.track-detail-card{width:min(920px,100%)}.track-detail-layout{display:grid;grid-template-columns:340px 1fr;gap:30px}.detail-cover{aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:#eef1f4}.detail-cover img{width:100%;height:100%;object-fit:cover}.detail-content h2{font-size:44px;letter-spacing:-.04em;margin:12px 0 6px}.detail-artist{margin:0 0 14px!important}.detail-badges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}.verified-badge{padding:5px 7px;border-radius:7px;background:#effaf5;color:#1d805f;font-size:9px;font-weight:900}.detail-description{line-height:1.65}.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0}.detail-meta dt{font-size:9px;color:var(--muted);font-weight:900;text-transform:uppercase}.detail-meta dd{margin:4px 0 0;font-size:12px;font-weight:800}.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.youtube-wrap{margin-top:14px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}.youtube-wrap iframe{width:100%;height:100%;border:0}
.toast{position:fixed;right:18px;top:18px;z-index:200;max-width:390px;background:#111827;color:#fff;border-radius:11px;padding:11px 13px;opacity:0;pointer-events:none;transform:translateY(-10px);transition:.2s}.toast.show{opacity:1;transform:none}.toast.error{background:#8a2436}
@media(max-width:900px){.nav-links{display:none}.hero-grid,.licensing-grid,.track-detail-layout{grid-template-columns:1fr}.track-grid{grid-template-columns:repeat(3,1fr)}.detail-cover{max-width:360px}.player-bar{grid-template-columns:1fr}}
@media(max-width:650px){.shell{width:min(100% - 18px,var(--max))}.track-grid{grid-template-columns:repeat(2,1fr);gap:10px}.section-head,.creator-box,.shared-inner{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.field-wide{grid-column:auto}.hero{padding-top:50px}.hero-card{min-height:260px}.user-email{display:none}}
@media(max-width:390px){.track-grid{grid-template-columns:1fr}}





/* SHANNA KIDS v1.0 — header logo sizing */
.brand-logo-link{
  display:flex;
  align-items:center;
  min-width:0;
  line-height:0;
}

.brand-logo{
  display:block;
  width:auto;
  height:34px;
  max-width:190px;
  object-fit:contain;
}

.site-header .nav{
  min-height:64px;
}

@media(max-width:700px){
  .brand-logo{
    height:30px;
    max-width:160px;
  }
}

@media(max-width:430px){
  .brand-logo{
    height:27px;
    max-width:145px;
  }
}


/* =========================================================
   SHANNA KIDS v1.0 — SoundCloud-inspired layout
   Keeps existing SHANNA KIDS colors
   ========================================================= */

:root{
  --sc-bg: var(--bg, #f6faf9);
  --sc-card: var(--surface, #ffffff);
  --sc-text: var(--text, #18212b);
  --sc-muted: var(--muted, #7b8794);
  --sc-accent: var(--primary, #ff78b7);
  --sc-border: rgba(23, 35, 48, .10);
}

body{
  background: var(--sc-bg);
}

.sc-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sc-border);
}

.sc-main{
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
}

.sc-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 28px;
  align-items: start;
}

.sc-feed{
  min-width: 0;
}

.sc-sidebar{
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sc-side-card{
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 8px 26px rgba(30, 42, 56, .05);
}

.sc-side-card p{
  margin: 8px 0 0;
  color: var(--sc-muted);
  line-height: 1.55;
  font-size: 14px;
}

.sc-side-title{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--sc-text);
}

.sc-side-card a{
  display: block;
  padding: 9px 0;
  color: var(--sc-text);
  text-decoration: none;
  border-bottom: 1px solid var(--sc-border);
  font-size: 14px;
}

.sc-side-card a:last-child{
  border-bottom: 0;
}

.sc-side-small{
  gap: 6px;
  display: flex;
  flex-direction: column;
  color: var(--sc-muted);
  font-size: 12px;
}

/* Hero becomes compact like a music platform landing strip */
.hero{
  margin: 22px 0 20px;
  border-radius: 18px;
  overflow: hidden;
  min-height: unset;
}

.hero-inner,
.hero-content{
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Track grids become a feed of horizontal track cards */
.track-grid,
.tracks-grid,
#publicTracks,
#myTracks{
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

.track-card,
.music-card,
.track{
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 10px 14px 10px 10px;
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(30,42,56,.04);
}

.track-card:hover,
.music-card:hover,
.track:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(30,42,56,.08);
}

.track-card img,
.music-card img,
.track img,
.track-cover{
  width: 96px !important;
  height: 96px !important;
  min-width: 96px;
  object-fit: cover;
  border-radius: 10px;
}

/* Make text content feel like a waveform/feed row */
.track-card .title,
.music-card .title,
.track .title,
.track-title{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 5px;
}

.track-card .artist,
.music-card .artist,
.track .artist,
.track-artist{
  color: var(--sc-muted);
  font-size: 13px;
}

/* Real animated equalizer */

/* Buttons */
button,
.btn,
.button{
  border-radius: 999px;
}

.play-btn,
.btn-primary,
.primary{
  box-shadow: none;
}

/* Player becomes SoundCloud-like fixed transport bar */
#playerBar,
.player-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  border-radius: 0 !important;
  border-top: 1px solid var(--sc-border);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -6px 24px rgba(20,30,40,.08);
}

body{
  padding-bottom: 88px;
}

#playerBar audio,
.player-bar audio{
  width: min(760px, 100%);
}

/* Section headers */
.section-head,
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px;
  margin-bottom:14px;
}

.section-title,
.section h2{
  font-size: 22px;
  line-height: 1.2;
}

/* Desktop navbar spacing */
.site-header .nav,
.nav{
  min-height: 64px;
}

/* Tablet/mobile */
@media(max-width: 980px){
  .sc-layout{
    grid-template-columns: 1fr;
  }

  .sc-sidebar{
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .sc-side-small{
    grid-column: 1 / -1;
  }
}

@media(max-width: 700px){
  .sc-main{
    width: min(100% - 20px, 1240px);
  }

  .sc-sidebar{
    grid-template-columns: 1fr;
  }

  .track-card,
  .music-card,
  .track{
    grid-template-columns: 74px minmax(0,1fr);
    min-height: 92px;
    gap: 12px;
    padding: 9px;
  }

  .track-card img,
  .music-card img,
  .track img,
  .track-cover{
    width: 74px !important;
    height: 74px !important;
    min-width: 74px;
  }

  .track-card::after,
  .music-card::after,
  .track::after{
    display:none;
  }

  .hero-inner,
  .hero-content{
    padding-top: 22px;
    padding-bottom: 22px;
  }
}


/* =========================================================
   SHANNA KIDS v1.0 — Bottom Player Layout Fix
   ========================================================= */

#playerBar.player-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:100;
  width:100%;
  min-height:78px;
  box-sizing:border-box;

  display:grid;
  grid-template-columns:minmax(210px,280px) minmax(0,1fr) 42px;
  align-items:center;
  gap:18px;

  padding:10px max(16px, calc((100vw - 1240px)/2));
  margin:0;

  border-radius:0 !important;
  border-top:1px solid var(--sc-border);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 -6px 24px rgba(20,30,40,.08);
}

#playerBar .now-playing{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-width:0;
  width:100%;
}

#playerBar #nowCover,
#playerBar .now-cover-empty{
  width:54px !important;
  height:54px !important;
  min-width:54px;
  border-radius:10px;
  object-fit:cover;
}

#playerBar .now-meta{
  min-width:0;
}

#playerBar #nowTitle,
#playerBar #nowArtist{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#playerBar audio{
  display:block;
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
}

#playerBar #closePlayerBtn{
  width:38px;
  height:38px;
  min-width:38px;
  display:grid;
  place-items:center;
  justify-self:end;
  align-self:center;
}

body{
  padding-bottom:96px;
}

@media(max-width:900px){
  #playerBar.player-bar{
    grid-template-columns:minmax(170px,220px) minmax(0,1fr) 40px;
    gap:12px;
    padding:9px 12px;
  }

  #playerBar .now-playing{
    grid-template-columns:46px minmax(0,1fr);
  }

  #playerBar #nowCover,
  #playerBar .now-cover-empty{
    width:46px !important;
    height:46px !important;
    min-width:46px;
  }
}

@media(max-width:700px){
  #playerBar.player-bar{
    grid-template-columns:minmax(0,1fr) 40px;
    grid-template-rows:auto auto;
    gap:8px 10px;
    padding:8px 10px 10px;
  }

  #playerBar .now-playing{
    grid-column:1;
    grid-row:1;
    width:100%;
  }

  #playerBar #closePlayerBtn{
    grid-column:2;
    grid-row:1;
  }

  #playerBar audio{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
  }

  body{
    padding-bottom:126px;
  }
}

@media(max-width:430px){
  #playerBar .now-playing{
    grid-template-columns:42px minmax(0,1fr);
  }

  #playerBar #nowCover,
  #playerBar .now-cover-empty{
    width:42px !important;
    height:42px !important;
    min-width:42px;
  }
}


/* =========================================================
   SHANNA KIDS v1.0 — SoundCloud-style Waveform Progress
   ========================================================= */

.track-card{
  grid-template-columns:96px minmax(0,1fr) 180px !important;
}

.track-wave{
  position:relative;
  height:46px;
  min-width:140px;
  overflow:hidden;
  border-radius:8px;
}

.wave-bars{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  gap:3px;
  opacity:.28;
}

.wave-bars span{
  display:block;
  flex:1 1 0;
  min-width:2px;
  border-radius:999px;
  background:var(--sc-accent);
}

.wave-bars span:nth-child(1){height:18%}
.wave-bars span:nth-child(2){height:36%}
.wave-bars span:nth-child(3){height:62%}
.wave-bars span:nth-child(4){height:42%}
.wave-bars span:nth-child(5){height:78%}
.wave-bars span:nth-child(6){height:54%}
.wave-bars span:nth-child(7){height:88%}
.wave-bars span:nth-child(8){height:48%}
.wave-bars span:nth-child(9){height:70%}
.wave-bars span:nth-child(10){height:40%}
.wave-bars span:nth-child(11){height:82%}
.wave-bars span:nth-child(12){height:58%}
.wave-bars span:nth-child(13){height:94%}
.wave-bars span:nth-child(14){height:66%}
.wave-bars span:nth-child(15){height:44%}
.wave-bars span:nth-child(16){height:72%}
.wave-bars span:nth-child(17){height:52%}
.wave-bars span:nth-child(18){height:84%}
.wave-bars span:nth-child(19){height:38%}
.wave-bars span:nth-child(20){height:68%}
.wave-bars span:nth-child(21){height:90%}
.wave-bars span:nth-child(22){height:50%}
.wave-bars span:nth-child(23){height:74%}
.wave-bars span:nth-child(24){height:30%}

.wave-progress{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  overflow:hidden;
  transition:width .10s linear;
  pointer-events:none;
}

.wave-progress::before{
  content:"";
  position:absolute;
  inset:0;
  width:180px;
  display:block;
  background:
    repeating-linear-gradient(
      90deg,
      var(--sc-accent) 0 5px,
      transparent 5px 8px
    );
  opacity:1;
}

/* subtle moving head */
.wave-progress::after{
  content:"";
  position:absolute;
  top:3px;
  right:0;
  bottom:3px;
  width:2px;
  border-radius:99px;
  background:var(--sc-accent);
  box-shadow:0 0 8px color-mix(in srgb, var(--sc-accent) 55%, transparent);
}

.track-card.is-playing .track-wave{
  opacity:1;
}

.play-fab{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  padding:0;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}

@media(max-width:980px){
  .track-card{
    grid-template-columns:86px minmax(0,1fr) 140px !important;
  }

  .track-wave{
    min-width:110px;
  }

  .wave-progress::before{
    width:140px;
  }
}

@media(max-width:700px){
  .track-card{
    grid-template-columns:74px minmax(0,1fr) !important;
  }

  .track-wave{
    grid-column:2;
    height:28px;
    min-width:0;
    width:100%;
    margin-top:-2px;
  }

  .wave-progress::before{
    width:100vw;
  }
}


/* =========================================================
   SHANNA KIDS v1.0 — Center Audio Controls
   ========================================================= */

#playerBar.player-bar{
  grid-template-columns:260px minmax(0,1fr) 42px !important;
  align-items:center !important;
}

#playerBar audio#audioPlayer{
  width:min(760px, 100%) !important;
  max-width:760px !important;
  min-width:280px;
  justify-self:center !important;
  align-self:center !important;
  margin:0 auto !important;
  display:block !important;
}

#playerBar .now-playing{
  justify-self:start;
}

#playerBar #closePlayerBtn{
  justify-self:end;
}

@media(max-width:900px){
  #playerBar.player-bar{
    grid-template-columns:210px minmax(0,1fr) 40px !important;
  }

  #playerBar audio#audioPlayer{
    width:100% !important;
    max-width:100% !important;
    min-width:0;
  }
}

@media(max-width:700px){
  #playerBar.player-bar{
    grid-template-columns:minmax(0,1fr) 40px !important;
    grid-template-rows:auto auto !important;
  }

  #playerBar audio#audioPlayer{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
    margin:0 !important;
  }
}