/* === preview.css === */
:root {
  --background:#050805;
  --surface:#0d140d;
  --elevated:#142014;
  --accent:#00ff96;
  --text:#f3fbf2;
  --muted:#9cb29b;
  --line:rgba(190,255,186,0.14)
}

* {
  box-sizing:border-box
}

html,body {
  margin:0;
  min-height:100%;
  background:var(--background,#090b0a);
  color:var(--text,#f4f6ef);
  font-family:Arial,Helvetica,sans-serif
}

button,input,a {
  -webkit-tap-highlight-color:transparent
}

button,input,textarea {
  font:inherit
}

button {
  border:0;
  cursor:pointer;
  color:inherit;
  background:none
}

button:disabled {
  opacity:.5;
  cursor:wait
}

button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}

a {
  color:inherit;
  text-decoration:none
}

svg {
  width:24px;
  height:24px;
  flex-shrink:0
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3,.wordmark {
  font-family:Arial,Helvetica,sans-serif
}

button:active {
  opacity:.75
}

.workbench {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(70px,10vw,180px);
  min-height:100dvh;
  padding:30px;
  background:radial-gradient(ellipse at 90% 0%,#24302166,transparent 55%),radial-gradient(ellipse at 0% 100%,#1b241c66,transparent 50%),var(--background)
}

.intro {
  width:400px;
  flex-shrink:0
}

.wordmark {
  display:inline-flex;
  align-items:baseline;
  font-size:34px;
  font-weight:800;
  letter-spacing:-2.5px
}

.wordmark span {
  font-size:12px;
  margin-left:4px;
  color:var(--accent)
}

.intro>.wordmark {
  margin-bottom:62px
}

.eyebrow {
  font-size:9px;
  letter-spacing:2px;
  font-weight:700;
  color:var(--accent)
}

.intro h1 {
  font-size:clamp(48px,5.5vw,76px);
  line-height:1.1;
  letter-spacing:-4px;
  font-weight:800;
  margin:17px 0 23px
}

.intro h1 em {
  font-style:normal;
  color:var(--accent)
}

.intro-copy {
  color:var(--muted);
  font-size:15px;
  line-height:1.9;
  margin-bottom:35px
}

.preview-instructions {
  display:flex;
  gap:17px;
  align-items:center;
  margin-top:22px
}

.preview-instructions>span {
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:50%;
  width:34px;
  height:34px;
  display:grid;
  place-items:center
}

.preview-instructions p {
  font-size:13px;
  line-height:1.65
}

.preview-instructions small {
  font-size:12px;
  color:var(--muted)
}

.preview-source {
  border-top:1px solid var(--line);
  margin-top:42px;
  padding-top:24px
}

.preview-source>p:first-child {
  font-size:8px;
  letter-spacing:1.8px;
  color:var(--muted)
}

.preview-source>span {
  display:block;
  font-size:11px;
  margin-top:9px;
  color:var(--muted)
}

.preview-source button {
  font-size:12px;
  margin:14px 0 0;
  padding:0;
  color:var(--accent)
}

.preview-source button span {
  margin-left:30px
}

#source-status {
  font-size:11px;
  color:var(--accent);
  margin-top:10px
}

.device {
  width:390px;
  height:min(844px,calc(100dvh - 60px));
  min-height:640px;
  flex-shrink:0;
  border:7px solid #242824;
  border-radius:49px;
  background:var(--background);
  box-shadow:0 0 0 1px #41483f,0 40px 100px #000b;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column
}

.statusbar {
  height:48px;
  min-height:48px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 23px;
  font-size:11px;
  font-weight:700;
  position:relative;
  z-index:10;
  background:#090b0a
}

.island {
  position:absolute;
  width:103px;
  height:26px;
  border-radius:20px;
  background:#000;
  top:9px;
  left:50%;
  transform:translateX(-50%)
}

#screen {
  flex:1;
  min-height:0;
  overflow:hidden;
  position:relative
}

.tabbar {
  position:relative;
  display:flex;
  min-height:65px;
  background:var(--background);
  z-index:5;
  border-top:1px solid #ffffff05
}

.tabbar button {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:9px;
  font-weight:500;
  min-height:58px
}

.tabbar button svg {
  width:22px;
  height:22px
}

.tabbar button.active {
  color:var(--accent)
}

.home-indicator {
  height:15px;
  background:var(--background);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  z-index:5
}

.home-indicator:after {
  content:'';
  height:4px;
  width:118px;
  border-radius:4px;
  background:#f4f6ef;
  margin-top:3px
}

.feed-header {
  height:70px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:flex-start;
  padding:18px 22px;
  background:linear-gradient(#0008,transparent);
  z-index:3;
  justify-content:space-between
}

.feed-header .wordmark {
  font-size:26px;
  line-height:1;
  letter-spacing:-1.5px
}

.feed-header .wordmark span {
  font-size:9px
}

.feed-switch {
  display:flex;
  gap:16px;
  margin-top:4px
}

.feed-switch button {
  padding:0;
  font-size:11px;
  font-weight:600;
  color:#ffffff65;
  position:relative
}

.feed-switch button.active {
  color:#fff
}

.feed-switch button.active:after {
  content:'';
  height:2px;
  width:15px;
  background:var(--accent);
  border-radius:2px;
  position:absolute;
  bottom:-10px;
  left:calc(50% - 7.5px)
}

.reels {
  height:100%;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  overscroll-behavior:contain;
  scrollbar-width:none
}

.reels::-webkit-scrollbar {
  display:none
}

.reel {
  height:100%;
  min-height:100%;
  position:relative;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden
}

.art {
  position:relative;
  background:linear-gradient(150deg,var(--art-start),var(--art-end));
  overflow:hidden;
  isolation:isolate
}

.hero-art {
  position:absolute;
  inset:0
}

.art img,.art video {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  z-index:3
}

.art-shape {
  position:absolute;
  width:78%;
  aspect-ratio:1;
  top:8%;
  left:12%;
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#edf2c9 0%,#d6e1ac 19%,#819368 39%,#273d29 68%,#122215 88%);
  box-shadow:inset 0 0 35px #101b1366,15px 20px 70px #071d13aa;
  transform:rotate(-25deg);
  z-index:1
}

.art-shape:after {
  content:'';
  position:absolute;
  inset:-35%;
  border-radius:50%;
  border:1px solid #e7f4b733;
  transform:scaleY(.36) rotate(-40deg);
  box-shadow:0 0 0 12px #e7f4b708,0 0 0 24px #e7f4b708
}

.art-lines {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,#0000 0px,#0000 3px,#00000009 4px),linear-gradient(125deg,#e9f6ca33,transparent 45%);
  z-index:2;
  pointer-events:none
}

.album-type {
  position:absolute;
  top:34%;
  left:8%;
  font-family:Arial,Helvetica,sans-serif;
  letter-spacing:-6px;
  line-height:.82;
  font-size:clamp(60px,5vw,93px);
  font-weight:800;
  white-space:pre-wrap;
  z-index:2;
  color:#eaf0c9cc;
  transform:rotate(-8deg);
  mix-blend-mode:overlay;
  max-width:90%;
  overflow-wrap:anywhere
}

.art-edition {
  position:absolute;
  top:16%;
  left:8%;
  font-size:6px;
  letter-spacing:2.8px;
  z-index:2;
  color:#f4f6ef80;
  writing-mode:vertical-rl
}

.rings .art-shape {
  background:radial-gradient(circle,#daccf355 15%,#2b2045 17%,#c9a7f7 20%,#392d54 24%,#b3a4d4 33%,#3e2d63 37%,#b9a1da 43%,#32264a 45%,#af89cf 48%,#3b2659 56%,#b3a4d4 67%,#34274b 72%);
  transform:rotate(-20deg) scaleY(1.3);
  box-shadow:15px 30px 65px #281739aa
}

.sun .art-shape {
  background:radial-gradient(circle at 40% 25%,#fbe8bd,#f3b67c 30%,#a66d4b 63%,#39291f 95%);
  border-radius:47% 53% 40% 60%
}

.reel-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#00000008 0%,#00000000 24%,#090b0a30 40%,#090b0ac4 69%,#090b0afb 100%);
  z-index:1
}

.hero-play {
  position:absolute;
  top:34%;
  left:calc(50% - 30px);
  width:60px;
  height:60px;
  border-radius:50%;
  background:#ffffff0c;
  border:1px solid #ffffff35;
  backdrop-filter:blur(15px);
  display:grid;
  place-items:center;
  z-index:2;
  transition:opacity .2s
}

.hero-play svg {
  width:20px;
  height:20px;
  margin-left:2px
}

.hero-play.is-playing {
  opacity:.35
}

.reel-bottom {
  position:absolute;
  left:23px;
  right:20px;
  bottom:23px;
  z-index:2
}

.reel-details {
  display:flex;
  align-items:flex-end;
  gap:12px
}

.track-caption {
  flex:1;
  min-width:0
}

.track-caption .eyebrow {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:8px;
  letter-spacing:1.7px;
  text-transform:uppercase
}

.live-dot {
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:50%
}

.track-caption h2 {
  font-size:43px;
  letter-spacing:-2.3px;
  line-height:1.08;
  font-weight:800;
  margin:13px 0 14px;
  overflow-wrap:anywhere
}

.artist-link {
  display:flex;
  gap:7px;
  align-items:center;
  padding:0;
  font-size:12px
}

.artist-link svg {
  width:12px;
  height:12px;
  margin-left:2px
}

.avatar {
  width:26px;
  height:26px;
  flex-shrink:0;
  display:inline-grid;
  place-items:center;
  overflow:hidden;
  position:relative;
  border-radius:50%;
  background:linear-gradient(130deg,var(--avatar-color,#00ff96),#2a432a);
  font-size:12px;
  font-weight:700;
  color:var(--background)
}

.avatar img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.description {
  font-size:11px;
  color:#ffffff80;
  line-height:1.7;
  margin:12px 0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere
}

.track-meta {
  display:flex;
  gap:7px;
  color:#ffffff65;
  font-size:9px;
  flex-wrap:wrap
}

.reel-actions {
  display:flex;
  flex-direction:column;
  gap:22px;
  flex-shrink:0
}

.reel-action {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0;
  gap:6px;
  min-width:38px;
  min-height:44px
}

.reel-action svg {
  height:24px;
  width:24px
}

.reel-action span {
  font-size:8px;
  color:#ffffffaa
}

.active[data-toggle] {
  color:var(--accent)
}

.active[data-toggle] svg {
  fill:currentColor
}

.listen-hint {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:8px;
  color:#ffffff65;
  margin-top:24px
}

.listen-hint svg {
  width:12px;
  height:12px;
  color:var(--accent)
}

.reel-number {
  margin-left:auto;
  letter-spacing:1px;
  font-size:7px
}

.reel-progress {
  margin-top:12px;
  width:100%;
  height:2px;
  background:#ffffff15;
  border-radius:2px
}

.reel-progress span,.mini-progress span {
  display:block;
  background:var(--accent);
  height:100%;
  width:0
}

.page {
  height:100%;
  overflow-y:auto;
  padding:24px 22px 28px;
  scrollbar-width:none
}

.page>.eyebrow {
  font-size:8px;
  margin-bottom:14px
}

.page>h2,.explore-heading h2 {
  font-size:34px;
  line-height:1.14;
  letter-spacing:-1.7px;
  font-weight:800
}

.page-subtitle {
  font-size:11px;
  color:var(--muted);
  line-height:1.9;
  margin:14px 0 22px
}

.explore-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between
}

.explore-heading>.eyebrow {
  margin-bottom:15px
}

.explore-heading>div>.eyebrow {
  margin-bottom:12px;
  font-size:7px;
  letter-spacing:1.6px
}

.explore-heading>svg {
  color:var(--accent);
  width:30px;
  height:30px;
  margin-top:32px
}

.search {
  display:flex;
  align-items:center;
  gap:11px;
  background:var(--surface);
  padding:14px;
  border-radius:14px;
  margin-top:25px
}

.search svg {
  width:17px;
  height:17px;
  color:var(--muted)
}

.search input {
  width:100%;
  min-width:0;
  background:none;
  border:0;
  color:var(--text);
  outline:0;
  font-size:11px
}

.search input::placeholder {
  color:var(--muted)
}

.genre-chips {
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  margin:21px 0 24px
}

.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  gap:6px;
  padding:10px 16px;
  min-height:38px;
  border-radius:30px;
  background:var(--surface);
  font-size:10px;
  font-weight:600
}

.pill.primary {
  background:var(--accent);
  color:var(--background)
}

.pill svg {
  width:12px;
  height:12px
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:24px 0 17px
}

.section-heading h3 {
  font-size:17px;
  letter-spacing:-.4px
}

.section-heading>span {
  color:var(--muted);
  font-size:9px
}

.album-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:21px 13px
}

.album-card {
  padding:6px;
  border-radius:14px;
  text-align:left;
  position:relative;
  min-width:0
}

.album-card>.art {
  width:100%;
  aspect-ratio:1;
  border-radius:19px
}

.album-card>.art .album-type {
  font-size:34px;
  letter-spacing:-2px;
  top:42%;
  left:10%
}

.album-card>.art .art-edition {
  font-size:3px;
  letter-spacing:1.5px
}

.album-card>strong {
  display:block;
  font-size:11px;
  margin:10px 0 5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.album-card>small {
  display:block;
  font-size:9px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.card-play {
  position:absolute;
  right:9px;
  top:calc((100vw - 70px)/2 - 41px);
  top:105px;
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#ffffff20;
  backdrop-filter:blur(10px)
}

.card-play svg {
  width:11px;
  height:11px
}

.creator-rail {
  display:flex;
  gap:20px;
  overflow-x:auto;
  scrollbar-width:none;
  margin-top:20px
}

.creator-rail>button {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0;
  min-width:72px
}

.creator-rail .avatar {
  width:62px;
  height:62px;
  font-size:26px;
  margin-bottom:10px
}

.creator-rail strong {
  font-size:10px
}

.creator-rail small {
  font-size:8px;
  color:var(--muted);
  margin-top:5px
}

.empty {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  min-height:300px;
  gap:18px;
  padding:25px
}

.empty>svg {
  height:32px;
  width:32px;
  color:var(--accent)
}

.empty h2 {
  font-size:28px
}

.empty h3 {
  font-size:19px;
  letter-spacing:-.6px
}

.empty p {
  font-size:12px;
  color:var(--muted);
  line-height:1.8
}

.preview-note {
  font-size:9px;
  color:var(--muted);
  line-height:1.7;
  margin-top:28px
}

.track-row {
  display:flex;
  align-items:center;
  gap:6px;
  margin:14px 0
}

.row-play {
  display:flex;
  gap:12px;
  align-items:center;
  padding:0;
  flex:1;
  min-width:0;
  text-align:left
}

.row-play .art {
  height:48px;
  width:48px;
  border-radius:11px;
  flex-shrink:0
}

.row-play .album-type {
  font-size:13px;
  letter-spacing:-1px
}

.row-play .art-edition {
  display:none
}

.row-play>:where(span:not(.row-duration,.row-track-tags)) {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0
}

.row-play strong {
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.row-play small {
  font-size:9px;
  color:var(--muted)
}

.row-duration {
  font-size:9px;
  color:var(--muted);
  margin-left:auto
}

.row-save {
  padding:10px;
  display:grid;
  place-items:center
}

.row-save svg {
  width:17px;
  height:17px
}

.account-art {
  height:130px;
  background:radial-gradient(ellipse at 50% 50%,#42572d,#0d120c 70%);
  display:grid;
  place-items:center;
  margin:22px 0
}

.account-art svg {
  width:70px;
  height:70px;
  color:var(--accent)
}

.account-page>h3 {
  font-size:25px;
  line-height:1.25;
  letter-spacing:-1px
}

.account-stats {
  display:flex;
  justify-content:space-between;
  margin:27px 0
}

.account-stats>div {
  display:flex;
  flex-direction:column;
  gap:8px
}

.account-stats strong {
  font-size:24px
}

.account-stats span {
  font-size:9px;
  color:var(--muted)
}

.account-brand {
  display:block;
  font-size:31px;
  font-weight:800;
  letter-spacing:-1.5px;
  margin-top:40px;
  color:var(--accent)
}

.account-brand>span {
  font-size:11px;
  margin-left:4px
}

.account-page .preview-note {
  margin-top:8px
}

.mobile-source {
  margin-top:20px;
  font-size:10px
}

#mini-player {
  background:var(--surface);
  display:flex;
  align-items:center;
  padding:9px 14px;
  gap:10px;
  position:relative;
  min-height:61px
}

#mini-player[hidden] {
  display:none
}

.mini-open {
  display:flex;
  gap:10px;
  align-items:center;
  padding:0;
  flex:1;
  min-width:0;
  text-align:left
}

.mini-open>.art {
  width:37px;
  height:37px;
  border-radius:9px;
  flex-shrink:0
}

.mini-open .album-type {
  font-size:10px;
  letter-spacing:-.5px
}

.mini-open .art-edition {
  display:none
}

.mini-open>span {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0
}

.mini-open strong {
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.mini-open small {
  font-size:8px;
  color:var(--muted)
}

#mini-player>button:not(.mini-open) {
  padding:6px;
  display:grid;
  place-items:center;
  min-height:42px;
  min-width:32px
}

#mini-player>button>svg {
  width:17px;
  height:17px
}

.mini-progress {
  position:absolute;
  bottom:0;
  left:0;
  height:2px;
  width:100%;
  background:var(--line)
}

#toast {
  position:absolute;
  bottom:94px;
  left:20px;
  right:20px;
  background:var(--accent);
  color:#111b0b;
  border-radius:14px;
  padding:14px;
  font-size:11px;
  z-index:20;
  pointer-events:none;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .2s,transform .2s
}

#toast.visible {
  opacity:1;
  transform:translateY(0)
}

dialog {
  background:var(--background);
  color:var(--text);
  border:1px solid var(--line);
  padding:0;
  border-radius:32px;
  width:min(390px,calc(100vw - 28px));
  max-height:85dvh;
  box-shadow:0 30px 100px #000a
}

dialog::backdrop {
  background:#000a;
  backdrop-filter:blur(10px)
}

.sheet-body {
  padding:22px
}

.sheet-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:26px
}

.sheet-header .eyebrow {
  font-size:8px
}

.icon-button {
  width:40px;
  height:40px;
  display:grid;
  place-items:center
}

.icon-button svg {
  width:20px;
  height:20px
}

.artist-hero {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin:15px 0 25px
}

.artist-hero>.avatar {
  width:95px;
  height:95px;
  font-size:42px
}

.sheet-body>h2 {
  font-size:34px;
  letter-spacing:-1.4px
}

.artist-handle,.artist-location {
  color:var(--muted);
  font-size:11px;
  margin:10px 0
}

.artist-bio {
  font-size:12px;
  line-height:1.8;
  margin:22px 0 10px
}

.artist-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:26px 0;
  border-bottom:1px solid var(--line);
  padding-bottom:26px;
  align-items:center
}

.artist-stats>div,.artist-stats>button {
  display:flex;
  flex-direction:column;
  gap:7px
}
.artist-stats>button { min-width:0; min-height:44px; padding:0; text-align:left; color:inherit; }

.artist-stats strong {
  font-size:19px
}

.artist-stats small {
  font-size:9px;
  color:var(--muted)
}
#profile-connections-sheet>.profile-connections { display:flex; flex-direction:column; gap:12px; padding:20px; max-height:calc(var(--app-sheet-height) - 2px); }
.profile-connections .sheet-header { flex:none; margin:0; }
.profile-connections>.preview-note { flex:none; margin:0; text-align:left; }
.profile-connections-list { flex:0 1 auto; overflow-y:auto; min-height:0; max-height:60dvh; }
.profile-connection-person { display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:8px 0; text-align:left; }
.profile-connection-person>.avatar { flex:none; width:44px; height:44px; }
.profile-connection-person>span:not(.avatar) { display:grid; flex:1; gap:4px; min-width:0; }
.profile-connection-person strong { display:flex; align-items:center; gap:4px; min-width:0; font-size:14px; line-height:18px; }
.profile-connection-name { min-width:0; overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.profile-connection-person small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:12px; line-height:16px; }

.circle-play {
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  flex-shrink:0;
  background:var(--accent);
  color:var(--background);
  border-radius:50%;
  margin-left:auto
}

.circle-play svg {
  width:20px;
  height:20px
}

.sheet-body>h3 {
  font-size:18px;
  margin:23px 0
}

.now-playing>.art,.now-playing-cover>.art {
  aspect-ratio:1;
  width:100%;
  border-radius:0
}

.now-playing .album-type {
  font-size:80px
}

.now-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:28px 0
}

.now-title h2 {
  font-size:27px;
  letter-spacing:-1px
}

.now-title>div>button {
  font-size:12px;
  color:var(--muted);
  margin-top:9px;
  padding:0
}

.now-playing input[type=range] {
  width:100%;
  accent-color:var(--accent)
}

.time-labels {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  margin-top:6px;
  font-variant-numeric:tabular-nums
}

.playback-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  margin:30px 0
}

.playback-controls>button {
  margin:0
}

.playback-controls>.circle-play {
  width:72px;
  height:72px
}

.playback-controls>button>svg {
  width:23px;
  height:23px
}

.no-results {
  font-size:12px;
  color:var(--muted);
  grid-column:1/-1;
  padding:20px 0
}

.now-playing .preview-note {
  text-align:center
}

@media(min-width:1500px) {
  .device {
    height:844px
  }

  .intro {
    width:450px
  }

}

@media(max-width:850px) {
  .workbench {
    gap:35px;
    padding:20px
  }

  .intro {
    width:260px
  }

  .intro h1 {
    font-size:48px;
    letter-spacing:-2.5px
  }

  .intro-copy {
    font-size:12px
  }

  .intro>.wordmark {
    margin-bottom:35px
  }

  .device {
    width:370px
  }

}

@media(max-width:700px) {
  .intro {
    display:none
  }

  .workbench {
    padding:0;
    display:block;
    height:100dvh;
    min-height:0;
    background:var(--background)
  }

  .device {
    width:100%;
    height:100dvh;
    min-height:0;
    border:0;
    border-radius:0;
    box-shadow:none
  }

  .statusbar {
    display:none
  }

  .home-indicator {
    display:none
  }

  .home-indicator:after {
    display:none
  }

  .tabbar {
    min-height:66px
  }

  .tabbar button {
    min-height:66px;
    font-size:10px
  }

  .feed-header {
    padding-top:calc(20px + env(safe-area-inset-top));
    height:calc(80px + env(safe-area-inset-top))
  }

  .album-type {
    font-size:100px
  }

  .track-caption h2 {
    font-size:48px
  }

  .reel-bottom {
    bottom:25px;
    left:24px;
    right:22px
  }

  .description {
    font-size:13px
  }

  .track-meta {
    font-size:11px
  }

  .artist-link {
    font-size:13px
  }

  .listen-hint {
    font-size:9px
  }

  .reel-action span {
    font-size:9px
  }

  .reel-actions {
    gap:26px
  }

  .page {
    padding:calc(25px + env(safe-area-inset-top)) 24px 30px
  }

  .album-card>.art .album-type {
    font-size:42px
  }

  .card-play {
    top:auto;
    bottom:61px
  }

  .page>h2,.explore-heading h2 {
    font-size:39px
  }

  .page-subtitle {
    font-size:13px
  }

  .search input {
    font-size:13px
  }

  .pill {
    font-size:12px;
    min-height:42px
  }

  .album-card>strong {
    font-size:13px
  }

  .album-card>small {
    font-size:11px
  }

  .section-heading h3 {
    font-size:20px
  }

  .row-play strong {
    font-size:13px
  }

  .row-play small {
    font-size:11px
  }

  .row-play .art {
    height:56px;
    width:56px
  }

  .reel-number {
    font-size:8px
  }

  dialog {
    width:calc(100vw - 16px);
    border-radius:30px 30px 0 0;
    max-height:90dvh;
    margin:auto auto 0
  }

  .now-playing .album-type {
    font-size:90px
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important
  }

}

.wordmark img {
  display:block;
  width:180px;
  height:auto
}

.feed-header .wordmark img {
  width:126px
}

.feed-header .wordmark {
  padding-top:0
}

.account-brand-logo {
  display:block;
  width:180px;
  height:auto;
  margin-top:40px
}

body,button,input,select,textarea {
  font-family:Arial,Helvetica,sans-serif
}

/* Square artwork stays intact while each track still occupies one swipe page. */
.reel { display:flex; flex-direction:column; padding:64px 0 16px; gap:0; background:transparent; }
.cover-stage { flex:none; width:100%; aspect-ratio:1; display:grid; place-items:center; margin-block:auto; }
.square-cover { width:100%; aspect-ratio:1; border-radius:0; position:relative; overflow:hidden; }
.hero-art { position:absolute; inset:0; }
.art .track-cover-media {
  inset:auto; top:50%; left:50%; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:var(--cover-x,50%) var(--cover-y,50%);
  transform:translate(calc(-50% + var(--cover-pan-x,0%)),calc(-50% + var(--cover-pan-y,0%))) scale(var(--cover-zoom,1));
  transform-origin:center; pointer-events:none;
}
.hero-play { inset:0; width:100%; height:100%; border:0; border-radius:0; transform:none; background:transparent; backdrop-filter:none; opacity:1!important; display:flex; align-items:flex-end; justify-content:flex-end; padding:14px; }
.hero-play svg { width:54px; height:54px; padding:17px; color:var(--background); background:var(--accent); border-radius:50%; }
.cover-fallback { position:absolute; inset:0; display:grid; place-items:center; padding:20px; font-size:24px; font-weight:700; text-align:center; color:#fff9; }
.art:has(>.track-cover-media.is-loaded)>.cover-fallback { visibility:hidden; }
.reel-bottom { position:static; flex:none; width:100%; padding:16px 18px 0; }
.track-caption h2 { font-size:30px; line-height:1.05; margin:9px 0 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.description { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:10px 0; }
.track-meta { margin-top:10px; }
.reel-actions { flex-direction:row; justify-content:flex-start; gap:27px; margin-top:16px; }
.reel-action { gap:4px; }
.reel-action svg { width:23px; height:23px; }
.listen-hint { padding-top:15px; margin-top:0; font-size:10px; }
.reel-progress { margin-top:10px; }
.feed-header { background:linear-gradient(var(--background) 70%,transparent); }
.catalog-state { height:100%; padding-top:100px; }
.catalog-state h2 { font-size:25px; }
.avatar { flex:none; }
.avatar-icon { position:absolute; inset:0; width:100%; height:100%; background:var(--avatar-icon); -webkit-mask:url('/default-profile-avatar.png') center/cover no-repeat; mask:url('/default-profile-avatar.png') center/cover no-repeat; }
.avatar img,.avatar video { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.profile-shell { position:relative; isolation:isolate; min-height:100%; color:var(--profile-text); font-family:var(--profile-font); font-variation-settings:"wght" var(--profile-weight,400); }
.profile-background { position:absolute; inset:0; z-index:-1; overflow:hidden; }
.profile-banner { position:relative; height:185px; overflow:hidden; }
.profile-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
video.track-cover-media,
video.profile-media { pointer-events:none; }
video.track-cover-media::-webkit-media-controls,
video.track-cover-media::-webkit-media-controls-panel,
video.track-cover-media::-webkit-media-controls-play-button,
video.track-cover-media::-webkit-media-controls-start-playback-button,
video.track-cover-media::-webkit-media-controls-overlay-play-button,
video.profile-media::-webkit-media-controls,
video.profile-media::-webkit-media-controls-panel,
video.profile-media::-webkit-media-controls-play-button,
video.profile-media::-webkit-media-controls-start-playback-button,
video.profile-media::-webkit-media-controls-overlay-play-button {
  display:none !important;
  opacity:0 !important;
  -webkit-appearance:none;
}
.profile-content { position:relative; padding-top:0; }
.profile-content,.profile-content button,.profile-content strong,.profile-content h2,.profile-content h3 { font-family:var(--profile-font); font-variation-settings:"wght" var(--profile-weight,400); }
.profile-content .artist-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:start; margin-top:-44px; margin-bottom:0; position:relative; }
.profile-identity { min-width:0; overflow-wrap:anywhere; }
.profile-identity>.avatar { display:grid; width:108px; height:108px; border:0; font-size:42px; }
.profile-content .profile-identity>h2 { margin-top:12px; font-size:clamp(22px,5.8vw,34px); line-height:1.15; letter-spacing:-0.03em; overflow-wrap:normal; word-break:normal; }
.profile-content .artist-hero:has(.profile-follow-actions) { align-items:flex-start; }
.profile-follow-actions { display:flex; flex-direction:row; align-items:center; gap:8px; width:auto; margin-top:56px; }
.profile-content .profile-follow-actions .pill { min-height:44px; color:var(--profile-text); }
.profile-shell::selection,.profile-shell ::selection { background:var(--profile-selection-bg); color:var(--profile-selection-text); text-shadow:none; }
.profile-shell .profile-follow-actions [data-follow]:not(.primary) { background:var(--profile-selection-bg); color:var(--profile-selection-text); border-color:var(--profile-selection-bg); }
.profile-shell .track-row.is-current { background:transparent; box-shadow:inset 0 0 0 1.5px var(--profile-selection-bg); }
.profile-shell .row-save.active { background:var(--profile-selection-bg); color:var(--profile-selection-text); }
.profile-content .artist-handle,.profile-content .artist-location,.profile-content .artist-stats small,.profile-content .track-row small,.profile-content .row-duration { color:var(--profile-muted); }
.profile-content .row-play,.profile-content .artist-bio,.profile-content h2,.profile-content h3 { color:var(--profile-text); }
.profile-message { margin:0 0 24px; background:#ffffff15; color:var(--profile-text); border:1px solid #ffffff25; }
.inbox-page .section-heading { margin-top:0; }
.inbox-page h2 { margin-bottom:0; font-size:34px; }
.inbox-thread { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:18px 0; background:none; border:0; border-bottom:1px solid var(--line); }
.inbox-thread .avatar { width:54px; height:54px; }
.inbox-thread>span:not(.avatar) { display:flex; flex-direction:column; gap:7px; flex:1; min-width:0; }
.inbox-thread strong { font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-thread small { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.inbox-thread em { font-size:10px; font-style:normal; color:var(--accent); }
.inbox-error,#auth-error,#compose-error,#message-error { color:#edb47f; font-size:13px; }
#preview-sign-in,#compose-message { display:flex; flex-direction:column; gap:18px; }
#preview-sign-in label,#compose-message>label { display:flex; flex-direction:column; gap:10px; font-size:13px; }
#preview-sign-in input,#compose-message>label input { width:100%; background:var(--elevated); border:1px solid var(--line); border-radius:14px; color:var(--text); padding:14px; }
.person-picker { display:flex; align-items:center; gap:12px; padding:12px 0; cursor:pointer; }
.person-picker>span:not(.avatar) { flex:1; display:flex; flex-direction:column; gap:6px; }
.person-picker small { color:var(--muted); }
.person-picker input { accent-color:var(--accent); width:20px; height:20px; }
#people-results { max-height:340px; overflow-y:auto; }
.conversation { display:flex; flex-direction:column; height:650px; max-height:90dvh; padding:22px; gap:15px; }
.conversation .sheet-header { flex:none; }
.conversation h3 { font-size:18px; }
.conversation .sheet-header small { color:var(--muted); font-size:11px; }
.messages { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.message-bubble { align-self:flex-start; max-width:88%; border-radius:18px; padding:14px; background:var(--surface); overflow-wrap:anywhere; }
.message-bubble.mine { align-self:flex-end; background:var(--elevated); }
.message-bubble>strong { font-size:11px; color:var(--accent); }
.message-bubble p { font-size:14px; white-space:pre-wrap; margin:0 0 8px; line-height:1.45; }
.message-bubble small { display:block; font-size:10px; color:var(--muted); margin-top:8px; }
.message-bubble a { color:var(--accent); }
.message-track { display:flex; align-items:center; gap:9px; border:0; background:#ffffff0a; border-radius:12px; padding:8px; text-align:left; }
.message-track .art { width:44px; height:44px; border-radius:8px; flex:none; }
.message-track strong { font-size:12px; }
.message-track>svg { width:16px; flex:none; }
#send-message { display:flex; gap:10px; align-items:flex-end; }
#send-message textarea { flex:1; min-width:0; resize:none; height:48px; max-height:120px; padding:14px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:var(--elevated); }
#send-message .circle-play { width:46px; height:46px; flex:none; }
@media(max-height:700px) { .reel { gap:0; padding-top:64px; padding-bottom:10px; } .track-caption h2 { font-size:25px; margin:6px 0; -webkit-line-clamp:1; } .description { display:none; } .reel-actions { margin-top:10px; } .listen-hint { padding-top:8px; } }

/* Website palette and controls, alongside the app's swipe feed and player. */
:root { --site-background:radial-gradient(circle at top left,rgba(0, 255, 150,.24),transparent 32%),radial-gradient(circle at top right,rgba(216,255,212,.18),transparent 28%),linear-gradient(145deg,#050805 0%,#0b160a 48%,#030603 100%); }
body { font-weight:700; }
.workbench,.device { background:var(--site-background); }
.statusbar,.home-indicator { background:var(--background); }
#screen { background:var(--site-background); }
.page { padding:20px 16px 32px; }
.page-brand { display:flex; align-items:center; min-height:36px; margin-bottom:24px; padding-bottom:14px; border-bottom:1px solid #ffffff1a; }
.page-brand img { width:126px; height:auto; display:block; }
.page h2,.inbox-page h2 { font-size:26px; line-height:1.15; letter-spacing:-.6px; margin:0; }
.page-subtitle { font-size:12px; line-height:1.5; margin:9px 0 20px; }
.section-heading { margin-top:24px; margin-bottom:14px; }
.section-heading h3 { font-size:15px; letter-spacing:0; }
.search { border:1px solid #ffffff1f; border-radius:999px; background:#ffffff0d; padding:0 14px; min-height:42px; }
.search input { padding:12px 0; font-size:12px; font-weight:700; }
.pill { border:1px solid #ffffff1f; background:#ffffff0d; border-radius:999px; padding:10px 14px; min-height:38px; color:var(--text); font-size:12px; font-weight:700; }
.pill.primary { background:linear-gradient(180deg,rgba(0, 255, 150,.2),rgba(121,217,114,.1)); border-color:rgba(0, 255, 150,.34); color:var(--text); }
.genre-chips { gap:7px; margin:16px 0 0; }
.album-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 12px; }
.album-card .art { border-radius:12px; }
.album-card>strong { font-size:11px; line-height:1.3; margin-top:8px; }
.album-card>small { font-size:10px; line-height:1.4; color:var(--muted); }
.card-play { width:28px; height:28px; bottom:58px; right:7px; background:#040c04b8; border:1px solid #ffffff24; }
.card-play svg { width:12px; height:12px; }
.track-row { border-bottom:1px solid #ffffff12; padding:10px 0; }
.track-row .art { border-radius:12px; }
.account-stats { padding:18px; border:1px solid #ffffff1a; border-radius:16px; background:rgba(13,24,13,.82); }
.account-stats strong { font-size:24px; }
.account-stats span { font-size:10px; }
.tabbar { background:rgba(7,14,7,.95); border-top:1px solid #ffffff1a; }
.tabbar button { font-weight:700; color:var(--muted); }
.tabbar button.active { background:linear-gradient(180deg,rgba(0, 255, 150,.1),transparent); }
.feed-header { height:64px; padding-top:16px; padding-bottom:12px; background:linear-gradient(135deg,rgba(10,20,10,.96),rgba(5,10,5,.84)); border-bottom:1px solid #ffffff1a; }
.feed-switch { gap:6px; }
.feed-switch button { padding:7px 9px; border:1px solid #ffffff1f; border-radius:999px; font-size:11px; color:var(--muted); }
.feed-switch button.active { background:rgba(0, 255, 150,.12); border-color:rgba(0, 255, 150,.34); color:var(--text); }
.feed-switch button.active:after { display:none; }
.track-caption h2 { font-size:26px; letter-spacing:-.5px; margin:8px 0 10px; }
.track-caption .eyebrow { font-size:9px; letter-spacing:.5px; }
.track-caption .description { color:var(--muted); font-size:12px; }
.track-meta { color:var(--muted); }
.reel-actions { gap:24px; margin-top:14px; }
.listen-hint { padding-top:12px; color:var(--muted); }
.reel-number { font-size:9px; }
.profile-content .pill.primary { color:var(--profile-text); }
@media(max-height:740px) { .track-caption h2 { font-size:23px; -webkit-line-clamp:1; margin:7px 0; } .description { display:none; } .track-meta { margin-top:6px; } .reel-bottom { padding-top:12px; } .reel-actions { margin-top:10px; } .listen-hint { padding-top:8px; } }
@media(max-height:610px) { .track-caption .eyebrow,.track-meta,.listen-hint { display:none; } .reel-bottom { padding-top:10px; } .reel-actions { margin-top:9px; } .reel-progress { margin-top:8px; } }
@media(max-height:740px) {
  .track-caption { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:10px; }
  .track-caption .eyebrow,.track-meta,.listen-hint { display:none; }
  .track-caption h2 { font-size:20px; margin:0; }
  .track-caption .artist-link { max-width:130px; margin:0; gap:5px; font-size:12px; }
  .track-caption .artist-link strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .track-caption .artist-link .avatar { width:22px; height:22px; }
  .reel-bottom { padding-top:8px; }
  .reel-actions { margin-top:8px; }
  .reel-progress { margin-top:6px; }
}

/* Compact post footer and a shared header across every screen. */
#app-header { position:relative; inset:auto; flex:none; height:44px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; }
#app-header .wordmark img { width:104px; }
#app-header .wordmark { flex:0 1 104px; min-width:68px; }
#app-header .wordmark img { width:100%; max-width:104px; height:auto; }
.header-inbox { display:grid; place-items:center; width:44px; height:44px; color:var(--text); cursor:pointer; }
.header-inbox svg { width:20px; height:20px; }
.header-inbox.active { color:var(--accent); }
.header-actions { display:flex; align-items:center; gap:0; }
.header-actions { flex:none; }
.header-profile .avatar { width:26px; height:26px; }
.header-profile.active .avatar { outline:2px solid var(--accent); outline-offset:1px; }
.header-inbox { position:relative; text-decoration:none; }
.notification-badge { position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.notifications-page .section-heading { margin-top:0; gap:12px; }
.notification-row { display:flex; align-items:flex-start; gap:12px; width:100%; padding:16px 0; border-bottom:1px solid var(--line); text-align:left; font-size:14px; font-weight:400; }
.notification-row.unread { font-weight:700; }
.notification-row>svg { width:22px; height:22px; flex:none; }
.notification-row>span { flex:1; min-width:0; overflow-wrap:anywhere; }
.notification-row small { display:block; margin-top:7px; color:var(--muted); font-size:11px; font-weight:400; }
.notification-row>i { width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; margin-top:6px; }
.feed-switch { margin:0; gap:4px; }
.feed-switch button { display:grid; place-items:center; width:44px; height:44px; padding:9px; }
.feed-switch svg { width:22px; height:22px; }
.tabbar .music-tab svg { width:44px; height:44px; padding:10px; border-radius:0; background:var(--accent); color:var(--background); }
#screen[hidden],#post-sheet[hidden] { display:none; }
#post-sheet { position:relative; flex:1; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; }
.post-audio-loading { display:none; }
#post-sheet[data-picking-audio] .post-audio-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); }
#post-sheet[data-picking-audio] #new-post>:not(.post-audio-loading) { visibility:hidden; }
#post-sheet[data-picking-media] .post-audio-loading { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center; color:var(--muted); background:var(--background); }
#post-sheet[data-picking-media] #new-post>:not(.post-audio-loading) { visibility:hidden; }
.post-loading-picker { min-width:220px; min-height:44px; color:var(--text); }
[data-post-selection-error] { color:#edb47f; font-size:13px; }
.share-track-title { margin:0 0 14px; color:var(--muted); font-size:13px; }
.share-order { margin:14px 0 6px; font-size:11px; color:var(--muted); }
.share-people { max-height:42dvh; overflow-y:auto; overscroll-behavior:contain; }
.share-person { display:flex; align-items:center; gap:12px; min-height:68px; padding:8px 0; cursor:pointer; }
.share-person .avatar { width:44px; height:44px; flex:none; }
.share-person>span:not(.avatar) { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.share-person strong { font-size:14px; overflow-wrap:anywhere; }
.share-person small { color:var(--muted); font-size:11px; }
.share-person input { width:22px; height:22px; accent-color:var(--accent); }
.share-card-actions { display:flex; align-items:center; gap:12px; margin-top:14px; }
.share-card-actions .pill { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; }
.share-card-actions svg { width:18px; height:18px; }
.share-error { font-size:12px; color:#edb47f; }
.info-free-download { border-top:1px solid var(--line); padding:16px 0; }
.info-free-download p { font-size:13px; line-height:1.5; }
.free-download-consent { display:flex; align-items:flex-start; gap:12px; padding:12px 0; font-size:13px; line-height:1.5; }
.free-download-consent input { flex:none; width:22px; height:22px; accent-color:var(--accent); }
.info-free-download .pill { min-height:44px; }
[data-free-error] { color:#edb47f; }
.cover-like-burst { position:absolute; inset:0; z-index:4; display:grid; place-items:center; color:var(--accent); pointer-events:none; animation:cover-heart-pop .65s ease-out forwards; }
.cover-like-burst svg { width:90px; height:90px; filter:drop-shadow(0 3px 12px #0008); }
@keyframes cover-heart-pop { 0% { opacity:0; transform:scale(.5); } 25%,65% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.15); } }
.now-playing-cover { position:relative; }
.hero-play { touch-action:manipulation; }
#profile-editor { flex:1; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; }
#profile-editor[hidden] { display:none; }
.own-profile { padding:0; }
.profile-edit-button { margin-top:52px; font-family:Arial,sans-serif; font-size:12px; }
.profile-edit-button { display:flex; align-items:center; gap:6px; }
.profile-edit-button svg { width:16px; height:16px; }
.settings-heading { display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.settings-heading .search-back { margin:0; }
.settings-group { padding:16px; border:1px solid var(--line); border-radius:14px; margin-bottom:16px; }
.settings-group h3 { font-size:14px; margin:0 0 12px; color:var(--muted); }
.settings-row { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; text-decoration:none; text-align:left; color:var(--text); font-size:14px; overflow-wrap:anywhere; }
.settings-row svg,
.settings-row>.material-symbols-outlined { width:20px; height:20px; flex:none; }
.settings-row>span:not(.material-symbols-outlined) { flex:1; min-width:0; }
.settings-row small,.settings-toggle small { display:block; font-size:12px; font-weight:400; line-height:1.4; color:var(--muted); margin-top:5px; }
.settings-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:8px 0; font-size:14px; }
.settings-toggle>span { min-width:0; }
.settings-toggle input { appearance:none; -webkit-appearance:none; flex:none; width:44px; height:26px; margin:0; border:1px solid var(--line); border-radius:999px; background:var(--elevated); cursor:pointer; }
.settings-toggle input::before { content:''; display:block; width:18px; height:18px; border-radius:50%; background:var(--muted); margin:3px; }
.settings-toggle input:checked { background:var(--accent); border-color:var(--accent); }
.settings-toggle input:checked::before { background:var(--background); transform:translateX(18px); }
.settings-toggle input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.settings-email { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.profile-verified { display:inline-flex; align-items:center; justify-content:center; flex:none; width:14px; height:14px; color:#00ff96; vertical-align:middle; }
.profile-content .profile-verified { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:7px; color:#00ff96; vertical-align:middle; }
.profile-verified>svg { display:block; width:100%; height:100%; }
.profile-content .profile-vip { display:inline-block; margin-left:6px; padding:3px 6px; border-radius:999px; background:#9600ff; color:white; font:700 10px Arial,sans-serif; vertical-align:middle; }
.artist-listeners { font-size:12px; color:var(--profile-muted); }
.profile-social-links { display:flex; flex-wrap:nowrap; align-items:center; gap:clamp(5px,1.8vw,10px); margin:14px 0 18px; overflow-x:auto; scrollbar-width:none; }
.profile-social-links::-webkit-scrollbar { display:none; }
.edit-profile-grid { display:grid; grid-template-columns:minmax(260px,1fr) minmax(300px,1.35fr); gap:24px; align-items:start; }
.edit-profile-preview-wrap { position:sticky; top:0; z-index:5; background:var(--background); padding:8px 0 10px; }
@media (max-width:760px) {
  .edit-profile-grid { grid-template-columns:1fr; gap:16px; }
  .edit-profile-preview-wrap { position:static; }
}
.profile-social-links a { text-decoration:none; overflow-wrap:anywhere; max-width:100%; }
.profile-social-links .profile-social-icon { position:relative; display:grid; place-items:center; flex:none; width:44px; height:44px; max-width:none; padding:0; border:1px solid #ffffff30; border-radius:50%; background:var(--social-color,#ffffff20); color:var(--social-ink,#fff); box-shadow:0 8px 20px #0003; }
.profile-site-favicon { position:absolute; width:24px; height:24px; object-fit:contain; opacity:0; }
.profile-social-icon.has-favicon .profile-site-favicon { opacity:1; }
.profile-social-icon.has-favicon>svg { visibility:hidden; }
.profile-mutuals-block { display:grid; gap:6px; margin-top:10px; }
.profile-mutuals-row { display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(4px,1.5vw,8px); overflow-x:auto; scrollbar-width:none; }
.profile-mutuals-row::-webkit-scrollbar { display:none; }
.profile-mutuals-label { color:var(--profile-muted,var(--muted)); font-size:12px; font-weight:600; }
.profile-mutual-chip { display:inline-flex; align-items:center; gap:clamp(4px,1.2vw,6px); padding:2px clamp(7px,2vw,10px) 2px 3px; min-height:26px; min-width:0; flex:0 1 auto; border-radius:999px; border:1px solid color-mix(in srgb, var(--profile-text, var(--text)) 18%, transparent); background:color-mix(in srgb, var(--profile-text, var(--text)) 8%, transparent); color:var(--profile-text, var(--text)); font-size:clamp(10.5px,2.9vw,12px); font-weight:600; white-space:nowrap; cursor:pointer; }
.profile-mutual-chip > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-mutual-chip .avatar { width:clamp(16px,4.5vw,20px); height:clamp(16px,4.5vw,20px); min-width:clamp(16px,4.5vw,20px); font-size:clamp(8px,2.4vw,10px); border-radius:50%; flex:none; }
.profile-mutual-more { width:clamp(24px,6.5vw,28px); height:clamp(24px,6.5vw,28px); min-height:24px; flex:none; padding:0; display:inline-grid; place-items:center; border-radius:50%; border:1px solid color-mix(in srgb, var(--profile-text, var(--text)) 18%, transparent); background:color-mix(in srgb, var(--profile-text, var(--text)) 8%, transparent); color:var(--profile-text, var(--text)); cursor:pointer; }
.profile-mutual-more svg { width:15px; height:15px; }
.profile-social-links .profile-social-icon svg { width:21px; height:21px; fill:currentColor; stroke:none; }
.profile-social-links button.profile-social-icon { appearance:none; font:inherit; cursor:pointer; }
.profile-social--youtube { --social-color:#f00; }
.profile-social--spotify { --social-color:#1db954; }
.profile-social--apple-music { --social-color:linear-gradient(135deg,#fa57c1,#ff4f58 52%,#ff9a3d); }
.profile-social--soundcloud { --social-color:#ff5500; }
.profile-social--traktrain { --social-color:#fff; --social-ink:#111; }
.profile-social--beatstars { --social-color:#191919; --social-ink:#f5c542; }
.profile-social--instagram { --social-color:linear-gradient(135deg,#f58529,#dd2a7b 45%,#8134af 78%,#515bd4); }
.profile-social--tiktok { --social-color:linear-gradient(135deg,#25f4ee,#111 48%,#fe2c55); }
.profile-social--x { --social-color:#111; }
.profile-social--message { --social-color:var(--accent); --social-ink:var(--background); }
.profile-edit-form { display:flex; flex-direction:column; gap:18px; padding:16px; }
.profile-edit-form .sheet-header { margin:0; }
.profile-edit-form h2 { font-size:22px; margin:0; }
.profile-edit-form fieldset { display:flex; flex-direction:column; gap:14px; min-width:0; border:1px solid var(--line); border-radius:14px; padding:16px; }
.profile-edit-form legend { font-size:15px; padding:0 6px; }
.profile-edit-form label { display:flex; flex-direction:column; gap:8px; font-size:12px; }
.profile-edit-form input:not([type=file]),.profile-edit-form textarea,.profile-edit-form select { width:100%; min-width:0; padding:12px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:10px; font:400 14px Arial,sans-serif; }
.profile-edit-form input[type=color] { min-height:44px; padding:4px; }
.profile-edit-form input[type=range] { min-height:44px; padding:0; accent-color:var(--accent); }
.profile-photo { position:relative; overflow:hidden; text-align:center; }
.profile-photo input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.profile-edit-preview { overflow:hidden; border-radius:14px; }
.profile-edit-preview .profile-banner { height:100px; }
.profile-edit-identity { padding:12px; }
.profile-edit-identity>.avatar { width:64px; height:64px; margin-top:-40px; }
.profile-edit-identity h3 { font-size:22px; margin:8px 0; overflow-wrap:anywhere; }
.profile-edit-identity p { font-size:13px; overflow-wrap:anywhere; white-space:pre-wrap; }
#profile-save-error { color:#edb47f; margin:0; font-size:13px; }
#post-sheet .sheet-body { padding:16px; }
.search-back { display:flex; align-items:center; gap:6px; min-height:44px; margin-bottom:8px; color:var(--accent); font-size:14px; }
.search-back svg { width:20px; height:20px; }
.explore-page .genre-chips[hidden],#search-listings[hidden],#search-creators-heading[hidden] { display:none; }
.home-shelf { margin-top:24px; }
.home-shelf h3 { font-size:17px; margin:0 0 14px; }
.home-track-rail { display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.home-track-rail>.album-card { flex:none; width:128px; }
.home-page .catalog-state { min-height:240px; padding-top:40px; }
.explore-page .search { margin-top:0; }
.explore-page:has(>.search-back) { padding-top:8px; }
.explore-page>.search-back { margin-bottom:0; }
.explore-page #search-listings>.section-heading { margin-top:16px; margin-bottom:10px; }
.reel { padding:0 0 10px; display:flex; flex-direction:column; justify-content:flex-start; overflow-y:auto; scrollbar-width:none; padding-bottom:0; }
.cover-stage { margin:0; }
.reel-bottom { padding:12px 12px 8px; }
.reel-actions { align-items:center; gap:8px; height:44px; margin:0; }
.reel-action { display:flex; flex-direction:row; gap:4px; justify-content:center; align-items:center; width:auto; height:44px; min-width:44px; padding:0; text-decoration:none; color:inherit; flex:none; }
.reel-action span { display:none; }
.reel-action .action-count { display:inline; font-size:12px; line-height:1; font-weight:700; }
.reel-action svg { flex:none; width:25px; height:25px; }
.reel-actions>.reel-action:first-child { justify-content:flex-start; }
.reel-actions>.reel-action:last-child { justify-content:flex-end; }
.reel-action[data-toggle="saved"],.post-bookmark { margin-left:0; }
.reel-action[data-share],.reel-action[data-post-share] { margin-left:auto; }
.track-hashtags { display:flex; align-items:center; gap:6px; overflow:hidden; height:24px; margin:0 0 3px; color:var(--accent); font-size:11px; line-height:18px; font-weight:400; }
.hashtag-page { display:flex; align-items:center; gap:6px; flex:0 1 auto; min-width:0; overflow:hidden; }
.hashtag-page span { flex:none; white-space:nowrap; }
.square-cover .hero-play { padding-bottom:64px; }
.cover-controls { position:absolute; z-index:2; bottom:0; left:0; right:0; padding:5px 12px 7px; background:linear-gradient(transparent,#000b); }
.cover-seek { display:block; appearance:none; -webkit-appearance:none; width:100%; height:24px; padding:0; margin:0; background:transparent; cursor:pointer; touch-action:pan-x; }
.cover-seek::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(to right,var(--accent) var(--seek,0%),#ffffff66 var(--seek,0%)); }
.cover-seek::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:11px; height:11px; margin-top:-4px; border-radius:50%; background:var(--accent); border:0; }
.cover-seek::-moz-range-track { height:3px; border-radius:3px; background:#ffffff66; }
.cover-seek::-moz-range-progress { height:3px; background:var(--accent); }
.cover-seek::-moz-range-thumb { width:11px; height:11px; border-radius:50%; background:var(--accent); border:0; }
.cover-times { display:flex; justify-content:space-between; color:white; font-size:10px; line-height:12px; font-weight:400; font-variant-numeric:tabular-nums; }
.timed-comment { display:flex; align-items:center; gap:7px; padding:3px 0 4px; color:white; font-size:11px; text-align:left; pointer-events:none; }
.timed-comment[hidden] { display:none; }
.timed-comment .avatar { width:24px; height:24px; }
.timed-comment-text { min-width:0; font-weight:400; line-height:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
#mini-player { display:block; flex:none; min-height:0; padding:0 12px 6px; background:var(--background); }
#mini-player[hidden] { display:none; }
.navbar-track .mini-art { width:32px; height:32px; flex:none; border-radius:0; overflow:hidden; }
.navbar-player-row { display:flex; align-items:center; gap:4px; height:44px; }
.navbar-track { display:flex; align-items:center; gap:8px; flex:1; min-width:0; padding:0; text-align:left; height:44px; }
.navbar-track>.avatar { width:32px; height:32px; }
.navbar-track>span:not(.avatar) { display:flex; flex-direction:column; gap:3px; min-width:0; }
.navbar-track strong { font-size:13px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.navbar-track small { color:var(--muted); font-size:11px; font-weight:400; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.navbar-control { display:grid; place-items:center; flex:none; width:40px; height:44px; padding:0; }
.navbar-control[data-transport="toggle"] { width:44px; }
.navbar-control svg { width:17px; height:17px; }
.navbar-comment-slot { height:32px; display:flex; align-items:center; overflow:hidden; }
.navbar-comment-slot .timed-comment { padding:0; width:100%; }
.navbar-comment-slot .timed-comment .avatar { flex:none; }
.track-caption { display:flex; align-items:baseline; gap:6px; margin:3px 0; }
.track-caption h2 { display:block; font-size:13px; font-weight:400; line-height:1.4; margin:0; letter-spacing:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.track-caption .artist-link { flex:none; max-width:45%; display:flex; align-items:center; gap:5px; font-size:13px; }
.track-caption .artist-link strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-caption .artist-link .avatar { width:22px; height:22px; }
.compact-caption { color:var(--muted); font-size:12px; font-weight:400; line-height:1.4; margin:3px 0 6px; }
.compact-caption summary { list-style:none; cursor:pointer; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.compact-caption summary::-webkit-details-marker { display:none; }
.compact-caption summary span { color:var(--muted); }
.compact-caption p { white-space:pre-wrap; overflow-wrap:anywhere; }
.reel-progress { margin-top:6px; }
.post-reel { position:relative; }
.post-slides { display:flex; flex:none; width:100%; aspect-ratio:1; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.post-slides::-webkit-scrollbar { display:none; }
.post-slide { position:relative; flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always; background:var(--surface); }
.post-slide img,.post-slide video { display:block; width:100%; height:100%; object-fit:cover; }
.slide-counter { position:absolute; top:12px; right:12px; padding:6px 9px; border-radius:999px; background:#0009; color:#fff; font-size:11px; pointer-events:none; }
.post-mute { position:absolute; top:calc(100cqw - 56px); right:12px; width:44px; height:44px; border-radius:50%; background:#0009; color:#fff; }
.post-mute svg { width:20px; height:20px; }
.post-reel { container-type:inline-size; }
.post-dots { display:flex; justify-content:center; gap:0; min-height:0; }
.post-dots button { display:grid; place-items:center; width:20px; height:28px; }
.post-dots i { width:6px; height:6px; border-radius:50%; background:#ffffffbf; }
.post-dots .active i { background:var(--accent); }
.post-caption { font-size:13px; font-weight:400; line-height:1.4; margin:0; overflow-wrap:anywhere; }
.post-caption strong { font-weight:700; }
.post-caption summary { list-style:none; cursor:pointer; }
.post-caption summary::-webkit-details-marker { display:none; }
.post-caption summary span { color:var(--muted); }
.post-caption p { white-space:pre-wrap; }
.post-local-label { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:10px; margin-top:3px; }
.post-local-label button { display:grid; place-items:center; width:44px; height:30px; }
.post-local-label svg { width:14px; height:14px; }
#new-post { display:flex; flex-direction:column; gap:14px; }
#new-post .sheet-header { margin:0; }
#new-post .page-subtitle { margin:0; }
.post-audio-step h4,.post-cover-step h4 { margin:0 0 9px; font-size:15px; }
.post-audio-selected { display:flex; align-items:center; gap:10px; min-width:0; padding:10px; border-radius:12px; background:var(--surface); }
.post-audio-selected>span { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:10px; color:var(--accent); background:var(--elevated); }
.post-audio-selected>strong { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.post-audio-selected button { display:grid; place-items:center; flex:none; width:40px; height:40px; }
.post-audio-selected svg { width:17px; height:17px; }
.post-gate-note,.post-cover-step>p { color:var(--muted); font-size:12px; margin:0; }
.draft-preview { width:100%; aspect-ratio:1; overflow:hidden; border-radius:14px; background:var(--surface); touch-action:pan-y; }
.draft-rail { display:flex; width:calc(100% * var(--draft-count)); height:100%; transition:transform .22s ease; }
.draft-frame { position:relative; flex:0 0 calc(100% / var(--draft-count)); width:calc(100% / var(--draft-count)); height:100%; overflow:hidden; }
.draft-frame>img,.draft-frame>video { display:block; width:100%; height:100%; object-fit:cover; }
.draft-frame>span { position:absolute; right:10px; bottom:10px; padding:5px 8px; border-radius:999px; background:#0009; color:#fff; font-size:11px; }
.draft-frame .draft-remove { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#0009; color:#fff; }
.draft-frame .draft-remove svg { width:15px; height:15px; }
.draft-dots { display:flex; justify-content:center; gap:7px; min-height:24px; align-items:center; }
.draft-dots button { width:8px; height:8px; border-radius:50%; background:var(--muted); padding:0; }
.draft-dots button.active { background:var(--accent); }
.draft-picker-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.draft-picker-row>span { color:var(--muted); font-size:11px; }
.draft-picker-row .post-pick { padding:10px 13px; font-size:12px; }
button:disabled { opacity:.4; cursor:default; }
.post-empty { display:grid; place-items:center; aspect-ratio:1; border:1px dashed var(--line); border-radius:14px; color:var(--muted); text-align:center; }
.post-empty svg { width:36px; height:36px; margin-top:22px; color:var(--accent); }
.post-empty p { font-size:13px; }
.post-empty.post-pick { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; max-height:42dvh; min-height:180px; }
.post-empty.post-pick svg { margin-top:0; }
.post-empty.post-pick strong { color:var(--accent); font-size:15px; }
.post-empty.post-pick p { margin:0; }
.post-cover-next { position:sticky; bottom:0; flex:none; width:100%; min-height:44px; background:var(--accent); color:var(--background); box-shadow:0 -10px 18px var(--background); }
.post-pick { display:block; position:relative; overflow:hidden; text-align:center; cursor:pointer; }
.post-pick input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.post-pick.at-limit { opacity:.4; }
.post-count { font-size:11px; color:var(--muted); margin:0; }
.post-audio-player { display:block; width:100%; height:38px; margin:6px 0; accent-color:var(--accent); }
.post-cover-step { display:flex; flex-direction:column; gap:10px; margin:0 -16px; }
.post-cover-step>h4,.post-cover-step>p,.post-cover-step>.draft-dots,.post-cover-step>.draft-picker-row { margin-left:16px; margin-right:16px; }
.post-cover-step>h4 { margin-bottom:0; }
.post-caption-label { font-size:13px; }
.post-caption-label span { color:var(--muted); font-weight:400; }
.post-caption-label textarea { display:block; width:100%; resize:vertical; min-height:90px; margin-top:9px; padding:12px; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:12px; font-size:14px; font-weight:400; }
.device.post-editing #mini-player,.device.post-editing #audio-progress-bar,.device.post-editing #queue-panel { display:none; }
#post-sheet #new-post.post-editor-form { gap:0; padding:0; }
.post-editor-toolbar { position:sticky; top:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; padding:8px 16px; background:var(--background); }
.post-editor-toolbar strong { font-size:14px; }
.post-editor-toolbar .pill { min-height:40px; }
.post-editor-player { width:100%; min-width:0; }
.post-editor-seek { display:block; }
.post-editor-cover { position:relative; border-radius:0; }
.post-editor-cover-play { position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; color:white; background:transparent; }
.post-editor-cover-play svg { width:50px; height:50px; filter:drop-shadow(0 2px 8px #000); opacity:0; transition:opacity .15s; }
.post-editor-cover-play:focus-visible svg,.post-editor-cover-play:hover svg { opacity:1; }
.post-editor-cover-play.is-playing svg { opacity:1; }
.post-cover-audio { position:absolute; z-index:3; bottom:20px; left:50%; transform:translateX(-50%); min-width:180px; min-height:44px; background:var(--accent); color:var(--background); }
.post-picker-entry { min-height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; padding:24px; color:var(--muted); text-align:center; }
.post-picker-entry>.pill { min-width:200px; min-height:44px; }
.post-cover-actions { display:flex; gap:12px; padding-top:12px; }
.post-cover-actions>.pill { flex:1; min-width:0; min-height:44px; font-size:12px; }
.post-editor-audio { overflow-wrap:anywhere; font-size:13px; min-height:44px; }
.post-suggestions { display:flex; gap:8px; flex-wrap:wrap; }
.post-suggestions:empty { display:none; }
.post-suggestions .pill { padding:7px 12px; font-size:11px; min-height:32px; }
.post-analysis-status { margin:0; font-size:12px; color:var(--muted); }
.post-analysis-status:empty { display:none; }
.post-saved-license { margin:0; font-size:12px; }
.post-saved-license>div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; padding:7px 0; }
.post-saved-license dt { color:var(--muted); }
.post-saved-license dd { margin:0; overflow-wrap:anywhere; }
.post-editor-check>span { margin-left:auto; }
.post-preview-waveform { position:relative; width:100%; height:100px; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:ew-resize; touch-action:none; user-select:none; }
.post-preview-waveform canvas { display:block; width:100%; height:100%; }
.post-preview-selection { position:absolute; inset:0 auto 0 0; display:flex; justify-content:space-between; min-width:2px; border:2px solid var(--accent); border-radius:6px; background:#00ff9622; pointer-events:none; }
.post-preview-selection i { align-self:center; width:3px; height:26px; margin:0 3px; border-radius:3px; background:var(--accent); }
.post-preview-waveform:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.post-editor-transport { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 20px; min-height:48px; }
.post-editor-transport>span { min-width:42px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.post-editor-transport>span:last-child { text-align:right; }
.post-editor-fields { display:flex; flex-direction:column; gap:18px; padding:0 16px 28px; }
.post-editor-fields>label,.post-editor-section label,.post-license-fields label { display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:12px; min-width:0; }
.post-editor-fields input:not([type=range]):not([type=checkbox]),.post-editor-fields select { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); font-size:16px; }
.post-editor-fields>label:first-of-type input { font-size:20px; font-weight:700; }
.post-editor-fields input[type=range] { width:100%; height:44px; accent-color:var(--accent); }
.post-editor-fields .post-caption-label textarea { margin:0; font-size:16px; }
.post-editor-fields .post-caption-label>span { color:var(--text); }
.post-editor-fields .post-caption-label small { font-size:12px; color:var(--muted); font-weight:400; }
.post-editor-artist { display:flex; align-items:center; gap:8px; font-size:13px; }
.post-editor-artist svg { width:22px; height:22px; color:var(--accent); }
.post-editor-artist>span { margin-left:auto; font-size:11px; color:var(--muted); }
.post-editor-fields details { border-top:1px solid var(--line); padding-top:8px; }
.post-editor-fields summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:6px 0; cursor:pointer; font-size:14px; }
.post-editor-fields summary::after { content:'+'; color:var(--accent); font-size:20px; }
.post-editor-fields details[open]>summary::after { content:'−'; }
.post-editor-fields summary>span { margin-left:auto; max-width:65%; overflow-wrap:anywhere; color:var(--muted); font-size:11px; }
.post-editor-section,.post-license-fields { display:flex; flex-direction:column; gap:14px; padding:10px 0; }
.post-editor-section p { margin:0; font-size:12px; color:var(--muted); line-height:1.5; }
.post-editor-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.post-collaborator,.post-license { padding:12px; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; gap:12px; }
.post-editor-section .post-editor-check { flex-direction:row; align-items:center; gap:10px; min-height:32px; color:var(--text); }
.post-editor-check input { width:22px; height:22px; accent-color:var(--accent); }
.post-license-fields[hidden] { display:none; }
.post-editor-section .pill { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; }
.post-editor-section .pill svg { width:18px; height:18px; }
.post-editor-fields .preview-note { margin:0; }
.post-editor-fields .invalid { color:#edb47f; }
.post-zip-file { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.post-zip-file>span { min-width:0; overflow-wrap:anywhere; color:var(--text); font-size:13px; }
#post-error { color:#edb47f; font-size:12px; margin:0; }
.post-download { display:block; margin:12px 0; text-align:center; text-decoration:none; }
@media(max-width:360px) { .draft-picker-row { align-items:flex-start; flex-direction:column; } .draft-picker-row .post-pick { align-self:stretch; text-align:center; } }
@supports(padding:max(0px)) { @media(max-width:700px) { #app-header { height:calc(44px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); } .tabbar { padding-bottom:env(safe-area-inset-bottom); } } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.track-caption { display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:7px; align-items:start; }
.caption-avatar { width:22px; height:22px; padding:0; align-self:start; }
.caption-avatar .avatar { width:22px; height:22px; }
.track-caption h2 { font-size:13px; line-height:22px; white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.track-caption .artist-link { display:inline; max-width:none; font-size:inherit; font-weight:700; line-height:inherit; vertical-align:baseline; padding:0; }
.track-caption .artist-link strong { white-space:normal; }
.caption-title { font-weight:400; }
.feed-genres { display:flex; flex:none; gap:7px; padding:6px 12px; overflow-x:auto; scrollbar-width:none; }
.feed-genres .pill { flex:none; max-width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-height:36px; padding:8px 12px; }
#screen.exploring-feed { display:flex; flex-direction:column; }
#screen.exploring-feed .reels { flex:1; min-height:0; height:auto; }
.reel { height:auto; min-height:100%; overflow:visible; padding-bottom:0; }
.reels:not(.native-scroll) .reel[data-reel]>.cover-stage,.reels:not(.native-scroll) .reel[data-reel]>.reel-bottom,.reels:not(.native-scroll) .reel[data-reel]>:is(.reel-tags,.reel-playback-controls) { opacity:var(--split-opacity,1); }
.reel[data-reel]>.cover-stage { z-index:2; }
.reel[data-reel]>.reel-bottom,.reel[data-reel]>:is(.reel-tags,.reel-playback-controls) { z-index:1; }
.reels:not(.native-scroll) .reel[data-reel]>.cover-stage { transform:translate3d(0,var(--art-shift,0px),0); }
.reels:not(.native-scroll) .reel[data-reel]>.reel-bottom,.reels:not(.native-scroll) .reel[data-reel]>:is(.reel-tags,.reel-playback-controls) { transform:translate3d(0,var(--footer-shift,0px),0); }
.reels:not(.native-scroll) .reel[data-reel]:not(.split-present)>.cover-stage,.reels:not(.native-scroll) .reel[data-reel]:not(.split-present)>.reel-bottom,.reels:not(.native-scroll) .reel[data-reel]:not(.split-present)>:is(.reel-tags,.reel-playback-controls) { visibility:hidden; }
.reels:not(.native-scroll) .reel[data-reel]:not(.split-present) .timed-comment { visibility:hidden; pointer-events:none; }
.reels:not(.native-scroll) .reel[data-reel].split-visible>.cover-stage,.reels:not(.native-scroll) .reel[data-reel].split-visible>.reel-bottom,.reels:not(.native-scroll) .reel[data-reel].split-visible>:is(.reel-tags,.reel-playback-controls) { will-change:transform,opacity; }
.reels:not(.native-scroll) .reel[data-reel]>.cover-stage,.reels:not(.native-scroll) .reel[data-reel]>.reel-bottom,.reels:not(.native-scroll) .reel[data-reel]>:is(.reel-tags,.reel-playback-controls) { backface-visibility:hidden; }
@media(prefers-reduced-motion:reduce) { .reel[data-reel]>.cover-stage,.reel[data-reel]>.reel-bottom,.reel[data-reel]>:is(.reel-tags,.reel-playback-controls) { transform:none; opacity:1; will-change:auto; } }
.reel::-webkit-scrollbar { display:none; }
@media(max-height:610px) { .compact-caption { display:none; } .track-caption h2 { line-height:20px; } }
.genre-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.genre-grid:empty { display:none; }
.genre-tile { position:relative; display:flex; align-items:flex-start; min-height:96px; padding:14px 14px 48px; background:var(--genre-color); color:white; border-radius:13px; text-align:left; overflow:hidden; }
.genre-tile strong { font-size:18px; line-height:1.15; overflow-wrap:anywhere; max-width:100%; }
.genre-tile svg { position:absolute; bottom:12px; right:12px; width:34px; height:34px; transform:rotate(-12deg); }
.account-page>[data-tab="Library"] { margin:18px 8px 0 0; }
@media(max-width:360px) { .genre-tile { min-height:88px; padding:12px; } .genre-tile strong { font-size:16px; } .genre-tile svg { width:26px; height:26px; } }

#mini-player { border-top:1px solid var(--border, #ffffff18); }
#mini-player .cover-seek { height:16px; }

/* The seek line is the artwork's bottom edge; its touch area extends upward. */
.cover-timeline { position:absolute; z-index:2; inset:auto 0 0; height:44px; pointer-events:none; }
:is(.cover-timeline,.mini-timeline) .cover-seek { position:absolute; inset:auto 0 0; height:44px; pointer-events:auto; }
:is(.cover-timeline,.mini-timeline) .cover-seek::-webkit-slider-runnable-track { height:44px; border-radius:0; background:linear-gradient(to right,var(--accent) var(--seek,0%),#ffffff48 var(--seek,0%)) bottom / 100% 8px no-repeat; }
:is(.cover-timeline,.mini-timeline) .cover-seek::-webkit-slider-thumb { width:0; height:44px; margin:0; border:0; border-radius:0; background:transparent; }
:is(.cover-timeline,.mini-timeline) .cover-seek::-moz-range-track { height:44px; border-radius:0; background:linear-gradient(to right,var(--accent) var(--seek,0%),#ffffff48 var(--seek,0%)) bottom / 100% 8px no-repeat; }
:is(.cover-timeline,.mini-timeline) .cover-seek::-moz-range-progress { background:transparent; }
:is(.cover-timeline,.mini-timeline) .cover-seek::-moz-range-thumb { width:0; height:44px; border:0; background:transparent; }

.comment-marker { position:absolute; bottom:12px; width:28px; height:28px; transform:translateX(-50%); pointer-events:none; z-index:3; }
.comment-avatar-button { display:grid; place-items:center; width:28px; height:28px; padding:0; pointer-events:auto; opacity:.45; }
.comment-avatar-button .avatar { width:26px; height:26px; border:1px solid #d8ffd48f; }
.comment-marker[data-state="past"] .comment-avatar-button { opacity:.2; }
.comment-marker[data-state="active"] { z-index:5; }
.comment-marker[data-state="active"] .comment-avatar-button,.comment-marker:hover .comment-avatar-button,.comment-marker:focus-within .comment-avatar-button { opacity:1; }
.cover-timeline .timed-comment { position:absolute; bottom:calc(100% + 9px); display:flex; align-items:center; justify-content:center; text-align:center; width:max-content; max-width:min(300px,calc(100vw - 24px)); gap:6px; padding:6px 10px; background:rgb(0 0 0 / 48%); border:1px solid #ffffff29; border-radius:12px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:none; visibility:hidden; opacity:0; pointer-events:auto; }
.comment-marker[data-state="active"] .timed-comment,.comment-marker:hover .timed-comment,.comment-marker:focus-within .timed-comment { visibility:visible; opacity:1; }
.timed-comment strong { max-width:90px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.timed-comment .timed-comment-text { flex:1; min-width:0; }
.timed-comment time { font-size:10px; color:#ffffffd9; white-space:nowrap; }
.text-info { display:grid; place-items:center; flex:none; width:28px; height:28px; padding:4px; color:var(--muted); }
.text-info svg { width:18px; height:18px; }
.timed-comment .text-info { width:24px; height:24px; padding:3px; align-self:center; pointer-events:auto; }
.caption-heading { display:flex; align-items:flex-start; gap:4px; min-width:0; }
.caption-heading h2 { flex:1; min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.info-details .sheet-header { margin-bottom:20px; }
.info-details .sheet-header h2 { font-size:18px; }
.info-track-heading { min-width:0; }
.info-header-actions { display:flex; align-items:center; gap:4px; flex:none; }
.report-track form,.moderation-report label { display:grid; gap:14px; }
.report-track label,.moderation-report label { display:grid; gap:8px; }
.report-track :is(input,select,textarea),.moderation-report textarea { width:100%; min-width:0; padding:12px; border:1px solid var(--line); background:var(--surface); color:var(--text); font:inherit; }
.moderation-actions { display:flex; flex-wrap:wrap; gap:8px; }
.moderation-reports { display:grid; gap:18px; }
.moderation-report,.moderation-audit article { padding:18px; border:1px solid var(--line); min-width:0; overflow-wrap:anywhere; }
.moderation-report { display:grid; gap:12px; }
.moderation-report :is(h3,p),.moderation-audit article p { margin:0; }
.moderation-report small,.moderation-audit small { color:var(--muted); }
.moderation-details { white-space:pre-wrap; }
.moderation-audit { display:grid; gap:12px; margin-top:28px; }
.info-details h3 { margin:0 0 14px; font-size:23px; overflow-wrap:anywhere; }
.info-section-title { margin:-8px 0 2px; color:var(--muted); font-size:12px !important; }
.info-artist { display:flex; gap:8px; align-items:center; font-size:13px; }
.info-artist .avatar { width:32px; height:32px; }
.info-artist strong { min-width:0; overflow-wrap:anywhere; }
.info-artist time { margin-left:auto; color:var(--muted); font-size:12px; }
.info-details h4 { margin:22px 0 8px; font-size:14px; }
.info-details p,.info-details dd { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; font-weight:400; line-height:1.55; }
.info-details dl { margin-top:22px; }
.info-details dl>div { display:grid; grid-template-columns:80px minmax(0,1fr); gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.info-details dt { font-size:12px; color:var(--muted); }
.info-details dd { margin:0; }

.track-caption { align-items:flex-start; }
.caption-copy { flex:1; min-width:0; }
.caption-copy .compact-caption { display:block; margin-bottom:0; }

#info-sheet { position:fixed; inset:0; margin:auto; height:fit-content; max-height:calc(100dvh - 32px); overflow:auto; }
.info-details dl>div { align-items:center; }

.seek-position { position:absolute; z-index:2; bottom:0; left:clamp(0px,var(--seek,0%),calc(100% - 3px)); width:3px; height:8px; background:var(--accent); pointer-events:none; }
#mini-player .cover-seek::-webkit-slider-thumb { background:var(--accent); }
#mini-player .cover-seek::-moz-range-thumb { background:var(--accent); }

.post-reel>.post-dots { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:2; align-items:center; padding:0 8px; border:1px solid #ffffff29; border-radius:999px; background:rgb(0 0 0 / 48%); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.post-reel>.post-dots button { width:22px; height:44px; padding:0; flex:none; }

.caption-copy .compact-caption { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Sale action stays next to comments, leaving Share and Save at the right edge. */
.reel-action.reel-buy { color:var(--accent); gap:4px; }
.reel-buy svg { width:25px; height:25px; }
.reel-action .buy-price { display:inline; font-size:10px; font-weight:700; white-space:nowrap; }

.library-sections { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 18px; }
.library-sections button { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:46px; padding:8px 4px; border:1px solid #ffffff21; border-radius:14px; background:linear-gradient(135deg,#ffffff06,#ffffff01); color:var(--text); font:700 clamp(11px,3.1vw,13px) Arial,sans-serif; }
.library-sections button svg { width:16px; height:16px; flex:none; }
.library-sections button span { min-width:0; }
@media(max-width:350px) { .library-sections button { gap:4px; } .library-sections button svg { width:14px; height:14px; } }

.library-sections button.active { background:linear-gradient(180deg,#00ff9633,#79d9721a); border-color:#00ff9666; }
.library-sections button:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.library-tools { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.library-tools[hidden] { display:none; }
.library-search { display:flex; flex:1; align-items:center; gap:8px; min-width:0; min-height:46px; padding:0 12px; border:1px solid #ffffff15; border-radius:14px; background:#ffffff09; }
.library-search>svg { width:18px; height:18px; color:var(--muted); flex:none; }
.library-search input { border:0; background:transparent; color:var(--text); font:400 14px Arial,sans-serif; width:100%; min-width:0; padding:12px 0; outline:none; }
.library-search:focus-within { border-color:var(--accent); }
.library-search input::placeholder { color:var(--muted); }
.library-sort { position:relative; width:44px; height:46px; flex:none; display:grid; place-items:center; overflow:hidden; border:1px solid #ffffff21; border-radius:14px; background:#ffffff09; }
.library-sort>svg { width:18px; height:18px; pointer-events:none; }
.library-sort select { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; color-scheme:dark; }
.library-purchases { display:grid; place-items:center; flex:none; width:44px; min-height:46px; border:1px solid #ffffff21; border-radius:14px; background:#ffffff09; }
.library-purchases svg { width:18px; height:18px; }
.library-purchases.active { color:var(--accent); border-color:#00ff9666; }
.library-sort:focus-within { outline:2px solid var(--accent); }
.library-sort:has(option[value="name"]:checked) { color:var(--accent); border-color:#00ff9666; }
#library-panel { min-height:240px; }
.library-content-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; min-height:48px; margin-bottom:14px; }
.library-playback-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.library-content-heading h3 { font-size:22px; margin:0 0 4px; }
.library-content-heading small { color:var(--muted); font-size:12px; }
.library-content-heading .pill { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 14px; flex:none; }
.library-content-heading .pill>svg { width:15px; height:15px; }
.library-content-heading .library-playback-actions .pill { width:44px; height:44px; padding:0; }
.library-content-heading .library-playback-actions .pill>svg { width:18px; height:18px; }
.library-entry { display:flex; align-items:center; gap:12px; padding:12px; margin-bottom:10px; border-radius:16px; background:#ffffff08; text-decoration:none; color:var(--text); text-align:left; }
.library-entry>svg:first-child { flex:none; width:44px; height:44px; padding:10px; border-radius:10px; background:#00ff961a; }
.library-entry>span { flex:1; min-width:0; }
.library-entry strong,.library-entry small { display:block; overflow-wrap:anywhere; }
.library-entry strong { font-size:15px; }
.library-entry small { font-size:12px; color:var(--muted); margin-top:5px; }
.library-entry>svg:last-child { width:16px; height:16px; flex:none; }
.library-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,160px)); align-items:start; gap:20px 14px; }
.library-entry.library-card { display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:0; margin:0; border:0; border-radius:0; background:none; min-width:0; }
.library-card strong { font-size:14px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.library-card small { margin:0; }
.library-artwork { width:100%; aspect-ratio:1; border-radius:16px; margin-bottom:2px; }
.library-artwork-empty { display:grid; place-items:center; background:linear-gradient(135deg,#233c23,#101910); }
.library-artwork-empty svg { width:38px; height:38px; color:var(--accent); }
.library-creator { display:flex; align-items:center; gap:12px; width:100%; min-height:76px; border-bottom:1px solid #ffffff12; text-align:left; padding:10px 0; }
.library-creator .avatar { width:52px; height:52px; flex:none; }
.library-creator>span:not(.avatar) { flex:1; min-width:0; }
.library-creator strong,.library-creator small { display:block; overflow-wrap:anywhere; }
.library-creator strong { font-size:15px; }
.library-creator small { font-size:12px; color:var(--muted); margin-top:5px; }
.library-creator>svg { width:16px; height:16px; flex:none; }
.library-empty { padding:30px 16px; }
.library-overview-section { margin-top:24px; }
.library-overview-section>h3 { margin:0 0 12px; font-size:17px; }
.library-overview-status { margin-top:16px; color:var(--muted); font-size:12px; }
.library-overview-status>p { margin:0 0 8px; }
.library-empty>svg { width:32px; height:32px; color:var(--accent); margin-bottom:10px; }
.library-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:180px; color:var(--muted); font-size:14px; }
.library-spinner { width:24px; height:24px; border:2px solid #00ff9633; border-top-color:var(--accent); border-radius:50%; animation:feed-refresh-spin 0.8s linear infinite; }
@media(prefers-reduced-motion:reduce) { .library-spinner { animation:none; } }
.library-back { display:flex; align-items:center; gap:6px; min-height:44px; margin-bottom:12px; color:var(--muted); font-size:13px; }
.library-back svg { width:18px; height:18px; }
.library-release-hero,.category-playlist-detail { display:grid; grid-template-columns:clamp(144px,32vw,168px) minmax(0,1fr); gap:16px; align-items:start; text-align:left; }
.library-release-hero { margin-bottom:18px; }
.release-details { display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; }
.library-release-hero .library-artwork { width:100%; margin:0; border-radius:16px; }
.library-release-hero h3 { font-size:24px; line-height:1.2; overflow-wrap:anywhere; margin:0; }
.library-create-form { display:flex; flex-direction:column; gap:16px; }
.library-create-form label { display:flex; flex-direction:column; gap:10px; font-size:14px; }
.library-create-form input { width:100%; min-width:0; padding:14px; border:1px solid #ffffff25; border-radius:12px; background:#ffffff0b; font:400 16px Arial,sans-serif; color:var(--text); }
.library-create-form small { font-size:12px; color:var(--muted); }
.library-create-form [role="alert"] { font-size:14px; }
#new-library-playlist .sheet-body { display:flex; flex-direction:column; gap:8px; height:100%; min-height:0; padding:12px 16px; }
#new-library-playlist .sheet-header { flex:none; min-height:44px; margin:0; }
#new-library-playlist .sheet-header h2 { font-size:24px; }
#new-library-playlist .sheet-header .icon-button { width:44px; height:44px; }
.playlist-metadata-form { display:flex; flex:1; min-height:0; flex-direction:column; gap:8px; }
.playlist-metadata-form input:not([type=file]),.playlist-metadata-form textarea,.playlist-metadata-form select { width:100%; min-width:0; padding:10px; border:1px solid #ffffff25; border-radius:12px; background:var(--surface); color:var(--text); font:400 16px Arial,sans-serif; }
.playlist-metadata-form input:not([type=file]),.playlist-metadata-form select { height:44px; flex:none; }
.playlist-metadata-form textarea { flex:1; min-height:56px; max-height:120px; resize:none; }
.playlist-editor-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:12px; flex:none; margin-top:auto; }
.playlist-editor-actions>.pill { width:100%; min-width:0; height:44px; padding:10px; }
.playlist-visibility { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:12px; line-height:16px; }
.playlist-editor-cover { position:relative; flex:none; align-self:center; width:clamp(64px,calc(var(--app-sheet-height) - 340px),160px); height:clamp(64px,calc(var(--app-sheet-height) - 340px),160px); }
.playlist-cover-picker { display:grid; place-items:center; width:100%; height:100%; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--elevated); color:var(--muted); }
.playlist-cover-picker>span { display:grid; justify-items:center; gap:6px; }
.playlist-cover-picker svg { width:30px; height:30px; }
.playlist-cover-picker small { font-size:12px; }
.playlist-cover-picker .playlist-editor-art { width:100%; height:100%; }
.playlist-cover-picker>img.playlist-editor-art { object-fit:cover; }
.playlist-cover-remove { position:absolute; right:0; bottom:0; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#000b; color:white; }
.playlist-cover-remove svg { width:20px; height:20px; }
.playlist-metadata-form [role=alert] { flex:none; max-height:36px; overflow-y:auto; color:#edb47f; font-size:13px; line-height:18px; }
.release-details>p { font-size:13px; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.new-creation-page { display:flex; flex-direction:column; gap:12px; height:100%; min-height:0; padding:16px; overflow:hidden; }
.new-creation-page>h2 { flex:none; margin:0; font-size:26px; }
.new-creation-grid { display:grid; flex:1; min-height:0; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:10px; }
.new-creation-choice { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; width:100%; min-width:0; min-height:44px; padding:8px; border:1px solid var(--line); border-radius:16px; background:#ffffff08; color:var(--text); text-align:center; }
.new-creation-choice>svg { width:24px; height:24px; color:var(--accent); flex:none; }
.new-creation-choice>strong { font-size:14px; }
.new-creation-choice>svg:last-child { display:none; }

.mini-extra-controls { display:flex; justify-content:space-between; align-items:center; height:44px; }
.mini-extra-controls .navbar-control { width:44px; position:relative; }
.mini-extra-controls .navbar-control.active { color:var(--accent); }
.repeat-one { position:absolute; font-size:9px; font-weight:700; left:19px; top:17px; background:var(--background); line-height:10px; }
.repeat-one[hidden] { display:none; }
.queue-track { display:flex; align-items:center; gap:10px; width:100%; min-height:64px; padding:8px 12px; text-align:left; touch-action:pan-y; }
.queue-track .art { width:44px; height:44px; flex:none; border-radius:6px; }
.queue-track>span:not(.queue-track-number) { flex:1; min-width:0; }
.queue-track strong,.queue-track small { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-track small { font-size:12px; color:var(--muted); margin-top:4px; }
.queue-track.active { color:var(--accent); }
#queue-panel { position:absolute; left:0; right:0; z-index:3; display:flex; flex-direction:column; height:var(--queue-limit,0px); pointer-events:none; max-height:0; overflow:hidden; opacity:0; background:var(--background); border-bottom:0 solid transparent; transition:max-height .32s cubic-bezier(.2,.8,.2,1),opacity .22s ease,border-color .22s ease; }
#queue-panel.expanded { pointer-events:auto; opacity:1; border-bottom-width:1px; border-bottom-color:#ffffff18; }
#queue-panel[hidden] { display:none; }
.queue-panel-heading { flex:none; display:flex; align-items:center; gap:8px; height:48px; padding:0 12px 0 16px; }
.queue-panel-heading strong { font-size:14px; }
.queue-panel-heading>span { color:var(--muted); font-size:11px; }
.queue-panel-heading>button { display:grid; place-items:center; width:36px; height:40px; margin-left:auto; }
.queue-panel-heading>button svg { width:16px; height:16px; }
.queue-list { flex:1; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain; }
.queue-track-number { width:18px; flex:none; text-align:center; font-size:11px; color:var(--muted); }
.queue-track[draggable="true"] { -webkit-user-drag:element; }
.queue-track.dragging { opacity:.42; }
.queue-empty { margin:0; padding:10px 16px 18px; color:var(--muted); font-size:12px; }
@media(prefers-reduced-motion:reduce) { #queue-panel { transition:none; } }

button.library-entry { width:100%; text-align:left; }
.library-page #library-panel>h3 { font-size:20px; margin:18px 0; }

.feed-refresh-spinner { display:block; width:32px; height:32px; margin:0 auto 16px; border:3px solid #00ff9633; border-top-color:var(--accent); border-radius:50%; animation:feed-refresh-spin .75s linear infinite; }
.catalog-state.is-loading { display:grid; place-items:center; padding:0; }
@keyframes feed-refresh-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .feed-refresh-spinner { animation:none; border-color:var(--accent); } }

.comment-entry { display:flex; align-items:flex-start; gap:10px; margin:18px 0; }
.comment-entry>.avatar { width:32px; height:32px; flex:none; }
.comment-entry>div { flex:1; min-width:0; }
.comment-entry strong { font-size:13px; }
.comment-entry p { margin:5px 0 0; font-size:13px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }

.reel-action[data-share],.reel-action[data-post-share] { margin-right:-8px; }
.caption-copy .compact-caption { margin-top:1px; margin-bottom:3px; }

.caption-heading { align-items:center; }
.caption-heading>.text-info { height:20px; align-self:center; padding:1px 4px; }

.comments-bottom-sheet { position:fixed; top:auto; margin:0; padding:0; max-width:none; max-height:none; min-width:0; border-radius:20px 20px 0 0; transform:none; border:1px solid var(--line); background:var(--background); overflow:hidden; }
.comments-bottom-sheet::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; background:transparent; }
.comments-bottom-sheet .comments-details { height:100%; display:flex; flex-direction:column; padding:0 16px max(12px, env(safe-area-inset-bottom)); overflow:hidden; }
.comments-bottom-sheet .sheet-header { position:sticky; top:0; z-index:1; flex:none; min-height:56px; margin:0; background:var(--background); }
.comments-bottom-sheet .sheet-header h2 { font-size:19px; }
.comments-bottom-sheet .comment-entry { flex:none; }
.comments-bottom-sheet .comments-list { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.comments-bottom-sheet .comments-empty { margin:16px 0; }
.comments-bottom-sheet .comments-composer { display:flex; align-items:center; gap:10px; flex:none; padding:10px 0 0; background:var(--background); }
.comments-bottom-sheet .comments-composer input { flex:1; min-width:0; height:42px; padding:0 15px; border:1px solid var(--line); border-radius:24px; background:var(--surface); color:var(--text); font:inherit; font-size:14px; outline:none; }
.comments-bottom-sheet .comments-composer input:focus { border-color:var(--accent); }
.comments-bottom-sheet .comments-composer .pill { min-height:40px; align-self:auto; font-size:13px; }
.comments-bottom-sheet .comments-composer .pill:disabled { opacity:.55; }
.comments-bottom-sheet .comments-error { flex:none; margin:4px 0 0; color:#ff9292; font-size:12px; }
.comments-bottom-sheet .pill { flex:none; align-self:flex-start; min-height:36px; font-size:12px; }

.profile-content-sheet { position:fixed; inset:auto; margin:0; width:min(390px,100vw); max-width:none; max-height:none; min-width:0; padding:0; border:0; border-radius:0; overflow-y:auto; overscroll-behavior:contain; background:var(--background); }
.profile-content-sheet::backdrop { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.profile-content-sheet .profile-shell { min-height:100%; }

#mini-player .mini-timeline { position:relative; width:calc(100% + 24px); margin-left:-12px; height:8px; }
#mini-player .mini-timeline .cover-seek { position:absolute; inset:auto 0 0; height:44px; }
#mini-player .mini-timeline .cover-seek::-webkit-slider-thumb { width:0; height:44px; margin:0; background:transparent; }
#mini-player .mini-timeline .cover-seek::-moz-range-thumb { width:0; height:44px; background:transparent; border:0; }
#mini-player .navbar-player-row,#mini-player .navbar-track { height:36px; }
#mini-player .mini-art { width:28px; height:28px; }
#mini-player .navbar-track strong { font-size:12px; }
#mini-player .navbar-track small { font-size:10px; }
#mini-player .navbar-track>span:not(.avatar) { gap:1px; }
.mini-extra-controls { justify-content:center; gap:0; }

.save-card-rail { display:flex; align-items:flex-start; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:22px; margin:20px -22px 0; padding:0 22px 12px; }
.save-card-tile { display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 88px; width:88px; min-width:0; padding:0; color:var(--text); text-align:center; scroll-snap-align:start; font:600 12px/1.3 Arial,sans-serif; }
.save-tile-square { position:relative; display:grid; place-items:center; width:88px; height:88px; flex:none; overflow:hidden; border:1px solid #ffffff20; border-radius:10px; background:#303030; }
.save-card-tile strong { width:100%; font:inherit; overflow-wrap:anywhere; }
.save-card-tile small { font-size:11px; color:var(--muted); font-weight:400; }
.save-card-action svg { width:28px; height:28px; }
.save-card-action[aria-expanded="true"] .save-tile-square { border-color:var(--accent); }
.save-card-header { justify-content:space-between; align-items:center; margin-bottom:14px; }
.save-card-header + .save-card-rail { margin-top:0; }
.save-card-tile:disabled { opacity:.55; }
.save-playlist-cover .save-tile-art { position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.save-playlist-cover .cover-fallback { font-size:14px; }
.save-playlist-check { position:absolute; right:5px; bottom:5px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:var(--background); background:var(--accent); }
#create-save-playlist { display:flex; flex-direction:column; gap:14px; margin-top:20px; }
#create-save-playlist label { display:flex; flex-direction:column; gap:8px; font-size:14px; }
#create-save-playlist input { width:100%; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:12px; font:14px Arial,sans-serif; }

#mini-player .navbar-player-row { height:52px; gap:4px; }
#mini-player .navbar-track { height:52px; }
#mini-player .mini-extra-controls { flex:none; height:52px; }
#mini-player .mini-extra-controls .navbar-control { width:32px; height:52px; }
#mini-player .mini-extra-controls .navbar-control svg { width:16px; height:16px; }
#mini-player .repeat-one { left:13px; top:21px; }

/* The minimized artwork fills the row and meets the left screen edge. */
#mini-player { padding:0 12px 0 0; border-top:0; }
#mini-player .mini-art { width:52px; height:52px; aspect-ratio:1; }

.cover-timeline { inset:0 0 auto; }
.cover-timeline .cover-seek { inset:0 0 auto; }
.cover-timeline .cover-seek::-webkit-slider-runnable-track { background-position:top; }
.cover-timeline .cover-seek::-moz-range-track { background-position:top; }
.cover-timeline .seek-position { top:0; bottom:auto; }

.global-timeline { position:relative; flex:none; height:8px; width:100%; z-index:2; }
.global-timeline[hidden] { display:none; }
.global-timeline .cover-seek { position:absolute; inset:auto 0 0; height:44px; }
.global-timeline .cover-seek::-webkit-slider-runnable-track { height:44px; border-radius:0; background:linear-gradient(to right,var(--accent) var(--seek,0%),#ffffff48 var(--seek,0%)) bottom / 100% 8px no-repeat; }
.global-timeline .cover-seek::-webkit-slider-thumb { width:0; height:44px; margin:0; border:0; border-radius:0; background:transparent; }
.global-timeline .cover-seek::-moz-range-track { height:44px; border-radius:0; background:linear-gradient(to right,var(--accent) var(--seek,0%),#ffffff48 var(--seek,0%)) bottom / 100% 8px no-repeat; }
.global-timeline .cover-seek::-moz-range-progress { background:transparent; }
.global-timeline .cover-seek::-moz-range-thumb { width:0; height:44px; border:0; background:transparent; }

.global-timeline.on-track .cover-seek { inset:0 0 auto; }
.global-timeline.on-track .cover-seek::-webkit-slider-runnable-track { background-position:top; }
.global-timeline.on-track .cover-seek::-moz-range-track { background-position:top; }

.genre-tile[data-genre="Trending"] svg { transform:none; }

.genre-tile[data-genre="Trap"] svg { transform:none; }

#category-playlists { margin:6px 0 16px; }
#category-playlists:empty { display:none; }
#category-playlists>h3 { font-size:20px; margin-bottom:8px; }
.category-playlist-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.category-playlist-card { display:flex; flex-direction:column; grid-column:span 2; min-width:0; text-align:left; padding:0; }
.category-playlist-card:last-child:nth-child(3n+1) { grid-column:1 / -1; }
.category-playlist-card:last-child:nth-child(3n+1)>.category-playlist-art { aspect-ratio:3; }
.category-playlist-card:nth-last-child(2):nth-child(3n+1),.category-playlist-card:last-child:nth-child(3n+2) { grid-column:span 3; }
.category-playlist-card:nth-last-child(2):nth-child(3n+1)>.category-playlist-art,.category-playlist-card:last-child:nth-child(3n+2)>.category-playlist-art { aspect-ratio:1.5; }
.category-playlist-art { position:relative; isolation:isolate; display:grid; place-items:center; width:100%; aspect-ratio:1; background:var(--playlist-color); border-radius:14px; overflow:hidden; }
.category-playlist-art>.art { width:100%; height:100%; min-height:0; min-width:0; }
.category-playlist-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 15%,#080f0b33 40%,#080f0be6),linear-gradient(110deg,transparent,var(--playlist-color)); opacity:.85; pointer-events:none; }
.playlist-cover-stack { position:absolute; top:12%; right:10%; width:38%; aspect-ratio:1; z-index:1; }
.playlist-cover-stack>.art { position:absolute; inset:0; width:100%; height:100%; border-radius:8px; border:1px solid #ffffff45; box-shadow:0 6px 18px #0006; transform:rotate(12deg); }
.playlist-cover-stack>.art+ .art { transform:translate(-20%,12%) rotate(-10deg); }
.playlist-cover--next-up { --playlist-tint:#5633a8; }
.playlist-cover--popular { --playlist-tint:#b86b1f; }
.playlist-cover--fresh-finds { --playlist-tint:#25766b; }
.playlist-cover--trap { --playlist-tint:#8d2454; }
.playlist-cover--deep-cuts { --playlist-tint:#315278; }
.category-playlist-art::after { background:linear-gradient(180deg,transparent 15%,#080f0b33 40%,#080f0be6),linear-gradient(110deg,transparent,var(--playlist-tint,var(--playlist-color))); }
.playlist-cover--next-up .playlist-cover-stack { width:44%; top:9%; right:10%; }
.playlist-cover--next-up .playlist-cover-stack>.art { transform:rotate(-12deg); }
.playlist-cover--next-up .playlist-cover-stack>.art+ .art { transform:translate(15%,12%) rotate(8deg); }
.playlist-cover--popular .playlist-cover-stack { width:30%; top:10%; right:12%; }
.playlist-cover--popular .playlist-cover-stack>.art { border-radius:50%; transform:rotate(10deg); box-shadow:0 0 0 6px #080f0bcc,0 6px 18px #0006; }
.playlist-cover--popular .playlist-cover-stack>.art+ .art { transform:translate(-40%,20%) rotate(-10deg); }
.playlist-cover--popular .playlist-cover-stack>.art::after { content:""; position:absolute; top:43%; left:43%; width:14%; height:14%; border-radius:50%; background:#080f0b; border:2px solid #ffffff88; }
.art-mosaic { display:grid; width:100%; height:100%; gap:2px; overflow:hidden; background:#060d08; }
.art-mosaic>.art { min-width:0; min-height:0; width:100%; height:100%; border-radius:0; }
.art-mosaic .cover-fallback { font-size:clamp(8px,2vw,15px); padding:4px; overflow:hidden; }
.category-playlist-art>.art-mosaic,.collection-artwork>.art-mosaic { position:absolute; inset:0; }
.mosaic-single { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.mosaic-split { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
.mosaic-focus,.mosaic-quad { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.mosaic-focus>.art:first-child { grid-row:span 2; }
.mosaic-feature { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.mosaic-feature>.art:first-child { grid-row:span 2; }
.mosaic-six { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.mosaic-dense { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); }
.category-playlist-card:last-child:nth-child(3n+1) .mosaic-dense { grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.category-playlist-card:last-child:nth-child(3n+1) .mosaic-dense>.art:first-child { grid-column:span 2; grid-row:span 2; }
.category-playlist-card:last-child:nth-child(3n+1) .mosaic-six { grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
.playlist-cover-copy { position:absolute; z-index:2; inset:auto 14px 14px; text-align:left; color:white; text-shadow:0 2px 8px #0008; }
.playlist-cover-copy>small { display:block; font:400 9px/1.3 Arial,sans-serif; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:5px; }
.playlist-cover-copy>strong { display:block; font:400 24px/1.05 Arial,sans-serif; letter-spacing:-.7px; }
.category-playlist-card .playlist-cover-copy { inset:auto 9px 9px; }
.category-playlist-card .playlist-cover-copy>strong { font-size:18px; }
.category-playlist-card .playlist-cover-copy>small { font-size:7px; letter-spacing:.6px; }
.category-playlist-art>svg { width:44px; height:44px; color:white; }

.category-playlist-detail>.category-playlist-art { width:100%; margin:0; }
.category-playlist-detail .release-details>h2 { font-size:24px; margin:0; overflow-wrap:anywhere; }

.category-playlist-detail .release-details>.pill { min-height:44px; display:inline-flex; align-items:center; gap:6px; }
.category-playlist-detail .release-details>.pill svg { width:16px; height:16px; }
.explore-page>.search[hidden] { display:none; }

/* Home keeps the feature, personal shelves, and library visually distinct. */
.home-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.home-heading h2 { font:700 28px/1.15 Arial,sans-serif; letter-spacing:-.7px; }
.home-heading p { font:400 12px/1.5 Arial,sans-serif; color:var(--muted); margin-top:6px; }
.home-heading>.pill { flex:none; display:flex; align-items:center; gap:6px; min-height:40px; padding:0 12px; font-size:12px; }
.home-heading>.pill svg { width:15px; height:15px; }
.home-feature-rail { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.home-feature-rail::-webkit-scrollbar { display:none; }
.home-feature { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; flex:none; width:calc((100% - 20px) / 3); aspect-ratio:1; scroll-snap-align:start; padding:8px; border:1px solid #00ff962b; border-radius:12px; background:linear-gradient(125deg,#234128,#101c12); text-align:left; }
.home-feature-rail:empty { display:none; }
.home-feature>.art,.home-feature>.profile-banner,.home-feature>.category-playlist-art { position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.home-feature .playlist-cover-copy { display:none; }
.home-feature::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,#05080505,#05080540 35%,#050805ed); pointer-events:none; }
.home-feature>.avatar { position:absolute; z-index:2; top:8px; left:8px; width:24px; height:24px; box-shadow:0 2px 12px #0005; }
.home-feature-copy { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; width:100%; text-shadow:0 2px 8px #0008; }
.home-feature-copy>small { color:var(--accent); font:700 7px/1.3 Arial,sans-serif; letter-spacing:.5px; }
.home-feature-copy>strong { font:700 12px/1.1 Arial,sans-serif; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.home-feature-copy>span { font:400 8px/1.3 Arial,sans-serif; color:var(--muted); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-feature-copy>em { font:400 10px/1.4 Arial,sans-serif; color:var(--muted); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-page .home-shelf { margin:0 0 28px; }
.home-page .home-shelf:empty { display:none; }
.home-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.home-section-heading h3 { font:700 20px/1.2 Arial,sans-serif; letter-spacing:-.3px; margin:0; }
.home-section-heading p { font:400 12px/1.5 Arial,sans-serif; color:var(--muted); margin:5px 0 0; }
.home-see-all { flex:none; min-height:44px; font-size:12px; color:var(--accent); }
.home-page .home-track-rail { gap:10px; padding:2px 1px 6px; }
.home-page .home-track-rail .album-card { width:140px; flex:none; padding:6px; border-radius:14px; }
.home-page .home-track-rail .album-card>.art { aspect-ratio:1; width:100%; border-radius:12px; }
.home-page .home-track-rail .album-card>strong { font:700 13px/1.3 Arial,sans-serif; margin-top:8px; }
.home-page .home-track-rail .album-card>small { font:400 11px/1.4 Arial,sans-serif; color:var(--muted); margin-top:4px; }
.home-library-rail { display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; }
.home-library-card { flex:none; width:146px; padding:0; text-align:left; }
.home-library-card strong,.home-library-card small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-library-card strong { font:700 13px/1.3 Arial,sans-serif; margin-top:8px; }
.home-library-card small { font:400 11px/1.4 Arial,sans-serif; color:var(--muted); margin-top:4px; text-transform:capitalize; }
.home-library-status { font:400 12px/1.5 Arial,sans-serif; color:var(--muted); }
.home-genre-playlist-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:2px 1px 6px; }
.home-genre-playlist { position:relative; display:block; min-width:0; aspect-ratio:1; padding:0; text-align:left; overflow:hidden; border-radius:14px; }
.home-genre-playlist.wide { grid-column:span 2; aspect-ratio:2/1; }
.home-genre-playlist>.category-playlist-art { width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
.home-genre-playlist-rail { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(136px,100%),1fr)); gap:16px 12px; }
.home-public-playlist { display:flex; flex-direction:column; align-items:flex-start; width:100%; min-width:0; padding:0; text-align:left; }
.home-public-playlist>.library-artwork { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:14px; overflow:hidden; }
.home-public-playlist>strong,.home-public-playlist>small { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-public-playlist>strong { font:700 13px/1.3 Arial,sans-serif; margin-top:8px; }
.home-public-playlist>small { font:400 11px/1.4 Arial,sans-serif; color:var(--muted); margin-top:4px; }
.home-page .creator-rail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 8px; overflow:visible; }
.home-page .creator-rail button { width:auto; min-width:0; padding:0 2px; }
.home-page .creator-rail .avatar { width:min(64px,100%); height:auto; aspect-ratio:1; margin-bottom:8px; }
.home-page .creator-rail strong { max-width:100%; line-height:1.25; overflow-wrap:anywhere; text-align:center; }
.home-page .creator-rail small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.album-card.is-current,.home-feature.is-current { background-color:transparent; box-shadow:inset 0 0 0 1.5px #00ff96b3; border-radius:14px; }
.home-feature.is-current { border-radius:12px; }
.album-card.is-current>strong,.row-play.is-current strong,.home-feature.is-current strong { color:inherit; }
.track-row { margin:0 calc(-1 * var(--track-row-gutter,16px)); width:calc(100% + 2 * var(--track-row-gutter,16px)); padding:2px var(--track-row-gutter,16px); min-height:48px; gap:0; }
.track-row.is-current { background:transparent; box-shadow:inset 0 0 0 1.5px #00ff96b3; }
.row-play { flex:1; min-height:44px; gap:8px; margin-right:6px; }
.row-play .art { width:40px; height:40px; border-radius:8px; }
.row-play>:where(span:not(.row-duration,.row-track-tags)) { gap:2px; flex:1; }
.row-play strong { font-size:13px; line-height:1.2; }
.row-play small { font-size:11px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-duration,.row-plays { display:flex; align-items:center; justify-content:center; flex:none; height:44px; margin:0; font-size:11px; line-height:1; font-variant-numeric:tabular-nums; color:var(--muted); }
.row-meta { display:flex; align-items:center; justify-content:flex-end; flex:none; margin-left:auto; gap:0; }
.row-duration { width:34px; }
.row-plays { gap:3px; width:32px; padding:0; }
.row-plays svg { width:11px; height:11px; }
.profile-content .row-plays { color:var(--profile-muted,var(--muted)); }
.row-save { flex:none; width:44px; height:44px; padding:0; }
.row-play.is-current { background:none; border-radius:0; outline:none; }
.profile-content { --track-row-gutter:22px; }
@media(max-width:350px) { .home-feature { padding:6px; } .home-feature-copy>strong { font-size:11px; } .home-heading p { max-width:190px; } }

.home-rotation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.home-rotation-grid .album-card { display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-rows:1fr 1fr; align-items:center; column-gap:8px; row-gap:0; padding:6px; min-height:64px; border-radius:12px; background:#ffffff06; min-width:0; }
.home-rotation-grid .album-card>.art { width:44px; height:44px; aspect-ratio:1; grid-row:1 / 3; border-radius:9px; }
.home-rotation-grid .album-card>strong { font:700 12px/1.25 Arial,sans-serif; align-self:end; margin:0 0 3px; }
.home-rotation-grid .album-card>small { font:400 10px/1.3 Arial,sans-serif; align-self:start; margin:0; color:var(--muted); }
.home-page .home-showcase-rail .album-card { width:172px; }
.home-music-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 8px; }
.home-music-grid .album-card { padding:5px; min-width:0; border-radius:12px; }
.home-music-grid .album-card>.art { width:100%; aspect-ratio:1; border-radius:10px; }
.home-music-grid .album-card>strong { font:700 12px/1.3 Arial,sans-serif; margin-top:7px; }
.home-music-grid .album-card>small { font:400 10px/1.4 Arial,sans-serif; color:var(--muted); margin-top:3px; }

/* The public phone layout fills the browser in portrait and landscape. */
body[data-phone-app] .intro, body[data-phone-app] .statusbar { display:none; }
body[data-phone-app] .workbench { padding:0; display:block; height:100dvh; min-height:0; }
body[data-phone-app] .device { width:100%; height:100dvh; min-height:0; border:0; border-radius:0; box-shadow:none; }
body[data-phone-app] .home-indicator { display:none; }
body[data-phone-app] .home-indicator:after { display:none; }
body[data-phone-app] .tabbar { min-height:66px; padding-bottom:env(safe-area-inset-bottom); }
body[data-phone-app] .tabbar button { min-height:66px; font-size:10px; }
body[data-phone-app] #app-header { height:calc(44px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }

.device .tabbar > .app-cart { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); display:flex; flex-direction:row; flex:none; align-items:center; justify-content:center; gap:8px; min-width:128px; min-height:44px; padding:8px 16px; border:1px solid rgba(0, 255, 150,.65); border-radius:5px; background:var(--accent); color:#071307; font-size:13px; font-weight:700; box-shadow:0 4px 16px #0006; }
.device .tabbar > .app-cart[hidden] { display:none; }
.device .tabbar > .app-cart svg { width:18px; height:18px; }
.device:has(.app-cart:not([hidden])) #toast { bottom:calc(142px + env(safe-area-inset-bottom)); }
.cart-license-options { display:grid; gap:8px; padding:0; margin:0 0 16px; border:0; }
.cart-license-options label { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px; border:1px solid var(--line); border-radius:8px; }
.cart-license-options label:has(input:checked) { border-color:var(--accent); background:#00ff9612; }
.cart-license-options strong { margin-left:auto; }
.cart-license-options input { accent-color:var(--accent); }
.cart-license-row { display:flex; align-items:center; gap:4px; }
.cart-license-row label { flex:1; min-width:0; }
.cart-license-row .license-info { flex:none; width:40px; height:44px; }
.app-license-terms { display:grid; gap:12px; font-size:13px; margin:20px 0; }
.app-license-terms > div { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.app-license-terms dt { color:var(--muted); }
.app-license-terms dd { margin:0; overflow-wrap:anywhere; }
.cart-license-error { color:#edb47f; }
.cart-add { width:100%; }
.app-cart-items { display:grid; gap:14px; max-height:42dvh; overflow-y:auto; overscroll-behavior:contain; }
.app-cart-item { display:flex; align-items:flex-start; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.app-cart-item .cart-item-art { width:52px; height:52px; flex:none; border-radius:6px; }
.app-cart-item .art-edition,.app-cart-item .album-type { display:none; }
.app-cart-item-copy { flex:1; min-width:0; }
.app-cart-item-copy > strong,.app-cart-item-copy > small { display:block; overflow-wrap:anywhere; }
.app-cart-item-copy > small { margin-top:4px; color:var(--muted); font-size:12px; }
.app-cart-item-copy label { display:grid; gap:5px; margin-top:10px; font-size:12px; color:var(--muted); }
.app-cart-item-copy select { max-width:100%; width:100%; padding:8px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); font:inherit; }
.app-cart-item .cart-remove { width:36px; height:36px; padding:8px; flex:none; }
.app-cart-item .cart-remove svg { width:18px; height:18px; }
.app-cart-summary { display:flex; justify-content:space-between; gap:12px; margin-top:20px; }
.app-cart-fees,.app-cart-empty { margin:14px 0; color:var(--muted); font-size:12px; line-height:1.5; }

.app-sheet-layer { position:fixed; z-index:40; overflow:clip; pointer-events:none; }
.app-sheet-backdrop { position:absolute; inset:0; background:#0007; pointer-events:auto; }
.app-sheet-backdrop[hidden] { display:none; }
.app-sheet-layer > dialog.app-sheet { position:absolute; inset:auto; margin:0; padding:0; min-width:0; max-width:none; border-radius:20px 20px 0 0; overflow-y:auto; overscroll-behavior:contain; pointer-events:auto; }
.app-sheet-layer > dialog.profile-content-sheet { border-radius:0; }
.app-sheet-layer .comments-details.info-details { display:block; overflow-y:auto; }

.app-sheet-layer > dialog#new-library-playlist { border:0; border-radius:0; box-shadow:none; overflow:hidden; }

.music-playback-controls { display:flex; flex:none; justify-content:flex-end; align-items:center; gap:0; height:44px; margin-top:-44px; padding:0 4px 0 12px; background:transparent; z-index:4; pointer-events:none; }
.music-playback-controls[hidden] { display:none; }
.music-playback-controls button { pointer-events:auto; flex:none; position:relative; display:grid; place-items:center; width:44px; height:44px; color:var(--muted); }
.music-playback-controls button.active { color:var(--accent); }
.music-playback-controls svg { width:20px; height:20px; }
.music-playback-controls .repeat-one { left:20px; top:18px; }

.queue-player { flex:none; height:52px; padding-right:12px; }
.queue-player .navbar-player-row,.queue-player .navbar-track { height:52px; }
.queue-player .mini-art { width:52px; height:52px; }
.queue-player .mini-extra-controls { flex:none; height:52px; }
.queue-player .mini-extra-controls .navbar-control { width:32px; height:52px; }
.queue-player .mini-extra-controls .navbar-control svg { width:16px; height:16px; }
.queue-player .repeat-one { left:13px; top:21px; }

.library-playback-actions .pill { width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.library-playback-actions .pill>svg { width:18px; height:18px; }
.empty-player .navbar-track { color:var(--muted); font-size:13px; }
#mini-player .navbar-track>.empty-player-art { display:grid; place-items:center; gap:0; background:var(--surface); color:var(--muted); }
.empty-player-art>svg { width:22px; height:22px; }
.empty-player .navbar-control:disabled { opacity:1; cursor:default; }

.global-timeline.empty-audio-timeline .cover-seek::-webkit-slider-runnable-track { background:#5a5a5a bottom / 100% 8px no-repeat; }
.global-timeline.empty-audio-timeline .cover-seek::-moz-range-track { background:#5a5a5a bottom / 100% 8px no-repeat; }
.global-timeline.empty-audio-timeline .cover-seek { cursor:default; pointer-events:none; }
.empty-player .navbar-control { color:#888; }

.explore-page>.search-back.pill { display:inline-flex; width:max-content; border-radius:999px; padding:0 10px; min-height:32px; height:32px; font-size:12px; margin-bottom:8px; }

.explore-page>.search-back.pill svg { width:15px; height:15px; }
.track-options-list { display:grid; gap:2px; }
.track-options-list>button { display:flex; align-items:center; gap:12px; min-height:44px; padding:8px 0; text-align:left; color:var(--text); }
.track-options-list>button>svg { width:20px; height:20px; flex:none; }
.track-options-list>button:disabled { color:#888; }
.release-details>.release-genre { display:block; text-transform:uppercase; letter-spacing:1px; font-size:10px; color:var(--muted); margin-bottom:4px; }
.release-cover-column { display:flex; flex-direction:column; gap:8px; min-width:0; }
.release-cover-column .library-playback-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:100%; }
.release-cover-column .library-playback-actions .pill { width:100%; height:auto; min-height:0; aspect-ratio:1; padding:0; border-radius:50%; }
#creator-results[hidden] { display:none; }
#category-playlists:has(.category-playlist-detail) { margin-bottom:0; }
#search-listings:has(.category-playlist-detail)>.section-heading:not([hidden]) { margin-top:10px; margin-bottom:8px; }
.category-playlist-detail .release-cover-column,.category-playlist-detail .release-details { gap:6px; }
.category-playlist-detail .release-genre { margin-bottom:0; }
.caption-heading h2 { display:flex; flex-direction:column; gap:0; -webkit-line-clamp:unset; }
.caption-heading .caption-title { font-weight:700; line-height:1.2; }
.caption-heading .artist-link { font-size:11px; font-weight:400; line-height:1.2; color:var(--muted); text-align:left; }
#comments-sheet[data-kind="track-info"] .info-details>h3 { font-size:14px; font-weight:400; color:var(--muted); }
.track-caption .caption-avatar .avatar { width:32px; height:32px; }
.track-caption { grid-template-columns:38px minmax(0,1fr); column-gap:10px; }
.track-caption .caption-avatar,.track-caption .caption-avatar .avatar { width:38px; height:38px; }
.caption-heading .caption-title { font-size:14px; }
.caption-heading .artist-link { font-size:11px; }
.caption-heading .caption-title,.caption-heading .artist-link { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.library-sections[hidden] { display:none; }
/* Artwork always fills the width; short viewports scroll to the track details. */
.reel[data-reel] { height:auto; min-height:100%; padding:0 0 44px; overflow:clip; }
.reel-tags { position:absolute; left:12px; right:144px; bottom:10px; height:24px; margin:0; }
.reel-playback-controls { position:absolute; right:0; bottom:0; width:148px; height:44px; }
.reel-playback-controls .music-playback-controls { width:100%; margin:0; }
.reel[data-reel]>.cover-stage { height:auto; min-height:0; flex:none; display:block; margin:0; overflow:clip; }
.reel[data-reel] .square-cover { width:100%; margin:0; }
.reel[data-reel]>.reel-bottom { padding:0 12px; }
.reel[data-reel] .track-caption { margin:0; }
.row-like { display:flex; align-items:center; justify-content:center; gap:3px; flex:none; width:44px; height:44px; padding:0; text-align:left; color:var(--muted); }
.row-like svg { width:18px; height:18px; flex:none; }
.row-like .action-count { font-size:10px; line-height:1; font-variant-numeric:tabular-nums; }
.profile-content .row-like { color:var(--profile-text,var(--text)); }

/* Keep the banner shallow and the member's social links in the opening view. */
.profile-shell>.profile-banner { height:auto; aspect-ratio:5 / 1; }
.profile-content .profile-identity>h2 { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:max-content; max-width:calc(100vw - 36px); }
.profile-content .artist-handle,.profile-content .artist-location { margin:6px 0; line-height:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.profile-content .artist-listeners { margin:6px 0; line-height:16px; }
.profile-content .artist-stats { margin:16px 0 12px; padding-bottom:12px; }
.profile-content .artist-stats>div,.profile-content .artist-stats>button { gap:4px; }
.profile-content .profile-social-links { margin:12px 0; }
.profile-content .artist-bio { margin:12px 0; }
@media(max-height:620px) {
  .profile-content .profile-identity>.avatar { width:88px; height:88px; }
  .profile-content .profile-identity>h2 { font-size:28px; }
}
@media(max-width:600px) {
  .profile-content .profile-social-links { gap:clamp(4px,1.5vw,8px); }
  .profile-content .profile-social-icon { width:clamp(32px,9.2vw,40px); height:clamp(32px,9.2vw,40px); }
  .profile-content .profile-social-icon svg { width:clamp(16px,4.6vw,20px); height:clamp(16px,4.6vw,20px); }
  .profile-content .profile-site-favicon { width:clamp(18px,5vw,22px); height:clamp(18px,5vw,22px); }
}

.reel[data-reel] .reel-actions { justify-content:flex-start; gap:2px; flex-wrap:wrap; height:auto; min-height:44px; }
.reel[data-reel] .reel-actions>.reel-action { justify-content:center; margin:0; }
.reel-play-count { display:flex; flex:none; align-items:center; justify-content:center; gap:3px; min-width:44px; height:44px; margin-left:auto; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.reel-play-count svg { flex:none; width:25px; height:25px; }
.reel-play-count + .reel-action[data-share] { margin-left:0; }
.caption-copy .compact-caption { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:14px; margin:0; }
#comments-sheet[data-kind="track-info"] .info-details { display:block; overflow-y:auto; padding:8px 12px; }
#comments-sheet[data-kind="track-info"] .sheet-header { min-height:44px; margin:0 0 6px; }
.info-track-heading { min-width:0; }
.info-track-heading h2 { margin:0; font-size:17px; line-height:20px; overflow-wrap:anywhere; }
.info-track-heading>span { display:block; color:var(--muted); font-size:11px; line-height:15px; }
#comments-sheet[data-kind="track-info"] h4 { margin:8px 0 3px; font-size:12px; line-height:15px; }
#comments-sheet[data-kind="track-info"] p { margin:0; font-size:12px; line-height:16px; }
#comments-sheet[data-kind="track-info"] dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 10px; margin:10px 0 0; }
#comments-sheet[data-kind="track-info"] dl>div { display:block; min-width:0; padding:5px 0 0; }
#comments-sheet[data-kind="track-info"] dt { font-size:10px; line-height:13px; }
#comments-sheet[data-kind="track-info"] dd { font-size:11px; line-height:15px; }
#comments-sheet[data-kind="track-info"] .info-free-download { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; align-items:center; margin-top:10px; padding:8px 0 0; }
#comments-sheet[data-kind="track-info"] .info-free-download>h4 { grid-column:1/-1; margin:0 0 3px; }
#comments-sheet[data-kind="track-info"] .info-free-download>p { grid-column:1/-1; }
#comments-sheet[data-kind="track-info"] .free-download-consent { gap:6px; align-items:center; min-height:44px; margin-top:4px; padding:0; font-size:11px; line-height:14px; }
#comments-sheet[data-kind="track-info"] .free-download-consent input { width:18px; height:18px; margin:0; }
#comments-sheet[data-kind="track-info"] .info-free-download>.pill { margin-top:4px; padding:8px 10px; font-size:11px; }
#comments-sheet[data-kind="track-info"] [data-free-error]:empty { display:none; }

.playlist-creator { display:flex; align-items:center; gap:8px; min-height:44px; max-width:100%; padding:0; text-align:left; }
.playlist-creator>.avatar { width:28px; height:28px; flex:none; }
.playlist-creator>span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.playlist-creator small { font-size:10px; color:var(--muted); }
.playlist-creator strong { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#new-library-playlist .sheet-header h2 { flex:1; min-width:0; }
.playlist-delete { color:#ffb4b4; border-color:#ffb4b455; min-width:44px; min-height:44px; }
.playlist-delete-confirmation { justify-content:center; }
.playlist-delete-confirmation>p { color:var(--muted); overflow-wrap:anywhere; }
.playlist-delete-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:16px; }
.playlist-delete-actions>.pill { min-height:44px; }

.avatar .avatar-media { visibility:hidden; }
.avatar .avatar-media.is-loaded { visibility:visible; }

.avatar:has(>.avatar-media.is-loaded)>.avatar-icon { visibility:hidden; }

/* Shared Google and Turnstile controls for inline and popup sign-in cards. */
.app-google-login { min-height:40px; width:100%; margin:18px 0; overflow:hidden; color:var(--muted); font-size:12px; }
.app-google-login>div { max-width:100%; }
.app-google-login[aria-disabled="true"] { opacity:.5; }
.app-google-login p { line-height:1.5; margin:0; }
.app-sign-in-divider { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:11px; margin:18px 0; }
.app-sign-in-divider::before,.app-sign-in-divider::after { content:""; height:1px; background:var(--line); flex:1; }
.app-sign-in-verification { min-width:0; width:100%; }
.app-turnstile-frame { width:100%; min-width:0; height:65px; }
.app-sign-in-verification [data-app-turnstile] { width:300px; height:65px; transform-origin:top left; }
.app-sign-in-verification p { font-size:12px; color:var(--muted); line-height:1.5; margin:6px 0; }
.app-sign-in-verification p:empty { display:none; }
.app-sign-in-verification [data-verification-retry] { font-size:12px; color:var(--accent); padding:8px 0; }

/* Shared layout for your profile and public member profiles. */
.profile-shell { container-type:inline-size; }
.own-profile { width:100%; height:100%; overflow-y:auto; }
.profile-back { position:absolute; top:8px; right:12px; min-height:44px; z-index:2; display:flex; align-items:center; gap:6px; padding:8px 12px; color:#efffed; background:#06120bd9; border-color:#00ff9655; font:600 12px Arial,sans-serif; }
.profile-back>svg { width:16px; height:16px; }
.profile-music { margin-top:24px; min-width:0; }
.profile-music-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
.profile-music-layout>.profile-music-section .profile-track-list { grid-template-columns:minmax(0,1fr); gap:10px; }
.profile-track-overflow { margin-top:24px; }
.profile-track-overflow .profile-track-list { grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.profile-music-section { min-width:0; }
.profile-section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.profile-content .profile-section-heading>h3 { margin:0; font-size:20px; line-height:1.3; }
.profile-section-heading>button,.profile-activity-error>button { flex:none; min-height:32px; color:var(--profile-text); font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.profile-track-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; }
.profile-section--popular .profile-track-list,.profile-section--liked .profile-track-list { grid-template-columns:minmax(0,1fr); gap:10px; }
.profile-track-card { min-width:0; color:var(--profile-text); }
.profile-track-card:has(.is-current) { outline:1px solid var(--profile-selection-bg); outline-offset:4px; border-radius:10px; }
.profile-track-card .profile-track-play { display:flex; flex-direction:column; align-items:stretch; gap:8px; width:100%; min-width:0; height:auto; padding:0; text-align:left; color:inherit; }
.profile-track-play>.art { position:relative; flex:none; width:100%; height:auto; aspect-ratio:1; border-radius:10px; }
.profile-track-play>span { min-width:0; }
.profile-track-play strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; font-size:13px; line-height:1.4; }
.profile-track-play small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:3px; font-size:11px; line-height:1.4; color:var(--profile-muted); }
.profile-track-stats { position:relative; z-index:2; display:flex; align-items:center; gap:6px; padding-top:8px; }
.profile-track-stats .row-plays,.profile-track-stats .row-like { display:flex; align-items:center; gap:4px; height:30px; min-height:30px; width:auto; padding:3px 8px; white-space:nowrap; flex-direction:row; border:1px solid color-mix(in srgb,var(--profile-text) 25%,transparent); border-radius:18px; color:var(--profile-text); font-size:11px; cursor:pointer; }
.profile-track-stats .row-like.active { color:#ff4757; background:rgba(255,71,87,0.12); }
.profile-track-stats .row-like.active .material-symbols-outlined { font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; color:#ff4757; }
.profile-track-stats svg { width:13px; height:13px; flex:none; }
.profile-track-options { display:grid; place-items:center; flex:none; min-width:28px; min-height:30px; margin-left:auto; color:var(--profile-text); }
.profile-track-card--compact { padding:8px; border:1px solid color-mix(in srgb,var(--profile-text) 22%,transparent); border-radius:12px; background:color-mix(in srgb,var(--profile-text) 4%,transparent); }
.profile-track-card--compact .profile-track-play { display:grid; grid-template-columns:60px minmax(0,1fr); gap:10px; align-items:start; }
.profile-track-card--compact .profile-track-play>.art { width:60px; }
.profile-track-card--compact .profile-track-play strong { -webkit-line-clamp:1; }
.profile-track-card--compact .profile-track-play>span { padding-bottom:26px; }
.profile-track-card--compact .profile-track-stats { margin:-26px 0 0 70px; padding:0; }
.profile-track-card--compact .profile-track-options { height:26px; min-height:26px; }
.profile-track-card--compact .row-plays,.profile-track-card--compact .row-like { height:26px; min-height:26px; padding:3px 6px; border:0; border-radius:13px; }
.profile-section-status,.profile-activity-error { margin:0; color:var(--profile-muted); font-size:12px; line-height:1.5; }
.profile-section-status { grid-column:1/-1; }
.profile-activity-error { margin-bottom:16px; }
.profile-comments { margin-top:28px; padding-top:24px; border-top:1px solid color-mix(in srgb,var(--profile-text) 20%,transparent); }
.profile-comment { padding:16px 0; border-bottom:1px solid color-mix(in srgb,var(--profile-text) 15%,transparent); }
.profile-comment blockquote { margin:0 0 12px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.6; }
.profile-comment-track { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; color:var(--profile-muted); font-size:11px; }
.profile-comment-track>button { display:flex; align-items:center; gap:8px; min-width:0; max-width:100%; min-height:32px; text-align:left; color:var(--profile-text); }
.profile-comment-track>button>span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.profile-comment-track .art { flex:none; width:32px; height:32px; }
.profile-comment-track svg { width:14px; height:14px; }
@container(min-width:700px) {
  .profile-track-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@container(min-width:940px) {
  .profile-music-layout { gap:24px; align-items:start; }
  .profile-music-layout { grid-template-columns:repeat(var(--profile-columns,3),minmax(0,1fr)); }
  .profile-track-overflow .profile-track-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .profile-track-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container(min-width:1250px) {
  .profile-track-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* Activity stays beside the music and leaves the current page in place. */
#app-activity-sheet-layer { z-index:60; }
#app-activity-sheet-layer>dialog.app-sheet { left:0!important; transform:none; border-radius:18px 0 0 18px; background:var(--background); }
#activity-sheet { overflow:hidden; }
.activity-content { height:100%; overflow-y:auto; overscroll-behavior:contain; }
.activity-content>.page { padding:16px 16px 20px; min-height:100%; }
.activity-close { position:absolute; z-index:2; top:8px; right:10px; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; background:var(--surface); }
.activity-content h2 { font-size:24px; }
.activity-content .section-heading { gap:8px; flex-wrap:wrap; }
.activity-content .section-heading>.pill { font-size:12px; padding:8px 12px; }
.inbox-notes { display:flex; gap:10px; overflow-x:auto; padding:8px 0 10px; margin:0; }
.inbox-notes>button { position:relative; display:flex; flex:none; flex-direction:column; align-items:center; gap:4px; width:96px; padding:18px 0 0; }
.inbox-notes>.inbox-own-note { width:112px; }
.inbox-notes .avatar { width:52px; height:52px; }
.inbox-notes strong { width:100%; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-note-bubble { position:absolute; top:0; z-index:1; max-width:72px; padding:4px 8px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-own-note .inbox-note-bubble { max-width:112px; font-size:11px; }
.inbox-conversation-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; min-height:24px; }
.inbox-conversation-heading h3 { margin:0; font-size:15px; }
.inbox-conversation-heading>span { color:var(--muted); font-size:11px; }
.activity-content .inbox-thread { gap:10px; padding:8px 0; border-bottom:0; }
.activity-content .inbox-thread>.avatar { flex:none; width:36px; height:36px; }
.activity-content .inbox-thread strong { font-size:13px; }
.activity-content .inbox-thread small { font-size:11px; }
.activity-content .inbox-thread>small { flex:none; max-width:48px; }
#app-activity-sheet-layer .conversation { height:100%; max-height:none; padding:16px; }
#app-activity-sheet-layer .notification-row { gap:10px; font-size:13px; }
#app-activity-sheet-layer .notification-row small { font-size:11px; }
#profile-note-sheet textarea { display:block; width:100%; margin-top:10px; padding:12px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:12px; resize:vertical; }

/* Post is the shared studio for the website and app. */
.post-dashboard.new-creation-page { height:100%; min-height:0; overflow-y:auto; overflow-x:hidden; gap:24px; }
.post-dashboard>* { flex:none; }
.post-dashboard>.section-heading { align-items:flex-start; flex-wrap:wrap; gap:12px; margin:0; }
.post-dashboard .page-subtitle { margin:8px 0 0; font-size:13px; }
.post-dashboard .pill { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.post-dashboard .pill>svg { width:16px; height:16px; }
.post-uploads>.section-heading { margin:0 0 12px; }
.post-uploads h3 { margin:0; font-size:18px; }
.post-uploads h3 small { margin-left:6px; color:var(--muted); font-size:12px; }
.post-upload-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); min-width:0; }
.post-upload-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; min-width:0; max-width:100%; }
@media(max-width:760px) {
  .post-upload-row { grid-template-columns:minmax(0,1fr); }
  .post-editor-toolbar:has([data-post-delete-track]) { flex-wrap:wrap; }
  .post-editor-toolbar:has([data-post-delete-track])>strong { flex-basis:100%; }
  .post-editor-toolbar:has([data-post-delete-track])>button { flex:1; min-width:0; padding-inline:8px; }
}
.track-delete-button { color:#ffa2a2; }
.track-delete-confirmation { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:28px; text-align:center; }
.track-delete-confirmation :is(h2,p) { margin:0; max-width:560px; overflow-wrap:anywhere; }
.track-delete-confirmation [role=alert]:empty { display:none; }
.track-delete-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:12px; }
.post-upload-play { display:flex; align-items:center; gap:12px; flex:1; width:100%; min-width:0; margin:0; text-align:left; }
.post-upload-play>.art { flex:none; width:52px; height:52px; border-radius:8px; }
.post-upload-play>span { min-width:0; }
.post-upload-play strong,.post-upload-play small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-upload-play strong { font-size:14px; }
.post-upload-play small { color:var(--muted); font-size:11px; margin-top:6px; }

.cover-visualizer { position:absolute; inset:0; z-index:3; display:block; width:100%; height:100%; border:0; pointer-events:none; }
.art:has(>.cover-visualizer[data-ready="true"])>.cover-fallback { visibility:hidden; }

.now-playing-cover { position:relative; }
body:not([data-page="desktop-app"]) #player-sheet .now-playing-cover { width:calc(100% + 44px); margin-inline:-22px; }

/* Profile music stays one navigable row on phones and desktop. */
.profile-tabs { display:flex; gap:clamp(10px,3.2vw,24px); overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); margin:24px 0; }
.profile-tabs [role="tab"] { flex:none; padding:12px 0; color:var(--profile-muted); font-size:clamp(12px,3.3vw,16px); font-weight:700; border-bottom:3px solid transparent; white-space:nowrap; }
.profile-tabs [aria-selected="true"] { color:var(--profile-text); border-bottom-color:currentColor; }
.profile-tabs [role="tab"]:focus-visible { outline:2px solid currentColor; outline-offset:-2px; }
.profile-tab-panel--single .profile-track-list,.profile-release-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,190px)); gap:16px; }
.profile-release-section { margin-top:24px; }
.profile-release-card { display:flex; flex-direction:column; gap:8px; min-width:0; text-align:left; color:var(--profile-text); }
.profile-release-card>.library-artwork { width:100%; height:auto; aspect-ratio:1; overflow:hidden; }
.profile-release-card>strong { overflow-wrap:anywhere; }
.profile-release-card>small { color:var(--profile-muted); }
.release-type { color:var(--muted); font-size:11px; }
.library-create-release { position:relative; }
.library-create-release>summary { display:flex; gap:6px; align-items:center; cursor:pointer; list-style:none; }
.library-create-release>summary::-webkit-details-marker { display:none; }
.library-create-release>div { position:absolute; right:0; z-index:5; display:grid; gap:6px; min-width:150px; padding:8px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.library-content-heading { gap:12px; }
.caption-heading .caption-title { line-height:1.1; }
.caption-heading .artist-link { margin-top:0; }
.caption-copy .compact-caption { margin-top:8px; }
@media(max-width:480px) {
  .profile-tabs { gap:clamp(10px,3.2vw,16px); justify-content:space-between; }
  .profile-tabs [role="tab"] { font-size:clamp(12px,3.25vw,14px); }
  .profile-tab-panel--single .profile-track-list,.profile-release-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* The expanded queue uses a compact player header and fills spare rows with music. */
.expanded-queue-actions { display:flex; align-items:center; gap:4px; margin-left:auto; }
.expanded-queue-actions>button { display:grid; place-items:center; min-width:28px; height:36px; font-size:11px; }
.expanded-queue-actions>button>svg { width:16px; height:16px; }
.expanded-queue-actions>button:disabled { opacity:.35; }
#queue-panel .queue-panel-heading>button { margin-left:0; }
.queue-recommendations[hidden] { display:none; }
#queue-panel .queue-recommendations>h4 { display:flex; align-items:center; height:38px; margin:0; padding:0 16px; color:var(--muted); font-size:12px; font-weight:500; }
#queue-panel .desktop-queue-song { display:flex; flex:1; align-items:center; gap:10px; min-width:0; padding:0; text-align:left; }
#queue-panel .desktop-queue-song>span { min-width:0; flex:1; }
#queue-panel .desktop-recommend-add { display:grid; place-items:center; flex:none; width:36px; height:36px; color:var(--accent); }
#queue-panel .desktop-recommend-add>svg { width:20px; height:20px; }
#queue-panel .queue-recommendations .queue-track { min-height:64px; }

#queue-panel .desktop-queue-song>.art { width:44px; height:44px; }

#activity-sheet .section-heading { min-height:36px; margin:0 0 10px; padding-right:36px; }
#activity-sheet .section-heading h2 { font-size:22px; line-height:1.2; }
#activity-sheet .section-heading>.pill { min-height:36px; padding:6px 10px; }
#activity-sheet .inbox-page>.search { height:40px; min-height:40px; padding:8px 12px; margin:0; }
#activity-sheet .inbox-page>.search input { font-size:13px; }
#activity-sheet .inbox-page>.search svg { width:18px; height:18px; }

/* Profile covers stay compact even when empty side sections leave more room. */
.profile-section--latest .profile-track-list { grid-template-columns:repeat(auto-fit,minmax(112px,160px)); justify-content:space-between; gap:16px 12px; }
.profile-section--recommended .profile-track-list { grid-template-columns:repeat(auto-fill,minmax(112px,144px)); gap:16px 12px; }

.release-editor-name { display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:8px; flex:none; }

/* Keep player metadata in place as tracks change, including missing descriptions. */
.caption-copy .compact-caption { height:14px; min-height:14px; font-size:10px; line-height:14px; }

.caption-heading .artist-link { display:flex; align-items:center; gap:2px; max-width:100%; }
.post-editor-grid:has(>[data-collaborator-split][hidden]) { grid-template-columns:minmax(0,1fr); }
.post-collab-offsite { color:var(--muted); font-size:12px; }
.caption-heading .player-artist-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-artist-links { display:flex; align-items:center; gap:4px; min-width:0; max-width:100%; overflow:hidden; white-space:nowrap; font-size:13px; font-weight:400; }
.caption-heading .player-artist-links { font-size:11px; }
.caption-heading .player-artist-links .artist-link { flex:none; max-width:100%; margin-top:0; }
.player-offsite-name,.player-artist-separator { flex:none; }
.player-artist-separator { color:var(--muted); }
.info-collaborators { display:grid; gap:10px; margin-bottom:14px; }
.info-collaborators>div { display:grid; gap:3px; }
.info-collaborators strong { color:var(--muted); font-weight:400; font-size:11px; }
.info-collaborators button { display:flex; align-items:center; gap:2px; width:fit-content; max-width:100%; padding:0; min-height:24px; text-align:left; overflow-wrap:anywhere; }
.info-collaborators .profile-verified { flex:none; width:14px; height:14px; }
.info-collaborators span { overflow-wrap:anywhere; }
.caption-heading .profile-verified,.navbar-track .profile-verified { display:inline-flex; flex:none; width:14px; height:14px; color:#00ff96; }

.profile-tab-panel>.profile-section--recommended { margin-top:24px; }

.navbar-track small { display:flex; align-items:center; gap:2px; }
.navbar-track .player-artist-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Page navigation belongs at the top right, within the current page header. */
.library-back,.explore-page>.search-back { width:fit-content; margin-left:auto; }
.settings-heading { display:flex; align-items:center; }
.settings-heading>h2 { order:0; }
.settings-heading>[data-settings-back] { order:1; margin-left:auto; }
@container(max-width:300px) { .profile-banner:has(>.profile-back) { min-height:108px; } }

/* Profile editing pairs a real preview with direct photo positioning. */
.profile-edit-form { max-width:1120px; margin-inline:auto; padding:16px; }
.profile-editor-header { position:sticky; top:0; z-index:5; margin:0 0 16px; min-height:60px; gap:8px; background:var(--background); }
.profile-editor-header>h2 { flex:1; font-size:21px; margin:0; }
.profile-editor-header>.pill { min-height:44px; }
.profile-edit-layout { display:grid; gap:20px; }
.profile-preview-column { min-width:0; }
.profile-preview-column>h3 { margin:0 0 10px; font-size:14px; }
.profile-edit-preview { padding:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.profile-edit-preview .profile-banner { aspect-ratio:5 / 1; height:auto; }
.profile-edit-preview .profile-edit-identity { padding:0 16px 18px; margin-top:-24px; position:relative; }
.profile-edit-preview .avatar { width:64px; height:64px; }
.profile-edit-preview .profile-edit-identity>h3 { margin:10px 0 4px; font:700 20px var(--profile-font); color:var(--profile-text); overflow-wrap:anywhere; }
.profile-edit-preview .profile-edit-identity>p { margin:0; font:400 12px/1.5 var(--profile-font); color:var(--profile-muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.profile-editor-sections { display:grid; gap:16px; min-width:0; }
.profile-editor-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:16px; display:grid; gap:12px; }
.profile-editor-card>h3 { margin:0; font-size:16px; }
.profile-editor-card label { display:grid; gap:6px; font-size:12px; color:var(--muted); }
.profile-editor-card input:not([type=file]),.profile-editor-card select,.profile-editor-card textarea { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); font:400 16px/1.4 Arial,sans-serif; }
.profile-editor-card input[type=color] { padding:4px; cursor:pointer; }
.profile-style-options { display:flex; flex-wrap:wrap; gap:8px; }
.profile-style-options>.pill { min-height:44px; }
.profile-style-options [aria-pressed=true] { color:var(--background); background:var(--accent); border-color:var(--accent); }
.profile-color-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:12px; }
.profile-editor-card .profile-photo { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; color:var(--text); cursor:pointer; }
.profile-photo>svg { width:18px; height:18px; }
.profile-crop-stage { position:relative; width:100%; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface); touch-action:none; cursor:grab; }
.profile-crop-stage--banner { aspect-ratio:5 / 1; }
.profile-crop-stage--background { aspect-ratio:3 / 2; }
.profile-crop-stage.is-dragging { cursor:grabbing; }
.profile-crop-stage>img { display:block; width:100%; height:100%; position:absolute; inset:0; object-fit:cover; user-select:none; pointer-events:none; }
.profile-crop-stage:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.profile-crop-toolbar { display:flex; align-items:center; gap:8px; }
.profile-crop-toolbar>span { margin-right:auto; font-size:12px; color:var(--muted); }
.profile-crop-toolbar>button { min-width:44px; min-height:44px; }
.profile-crop-toolbar>.icon-button { border:1px solid var(--line); border-radius:50%; font-size:22px; }
.profile-edit-hint { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
#profile-save-error { margin:0; color:#edb47f; font-size:13px; }
@media(min-width:960px) {
 .profile-edit-layout { grid-template-columns:minmax(240px,.9fr) minmax(300px,1.1fr); align-items:start; }
 .profile-preview-column { position:sticky; top:84px; }
}

/* Fill each section evenly, including single-tab track and release grids. */
.profile-music-section>.profile-track-list:not(:has(.profile-track-card--compact)),.profile-release-grid {
 grid-template-columns:repeat(auto-fill,minmax(min(128px,100%),1fr)); gap:16px 12px;
}
.profile-music-layout { gap:16px; }
.profile-release-section,.profile-comments,.profile-tab-panel>.profile-section--recommended { margin-top:16px; }
.profile-comments { padding-top:16px; }
.profile-edit-preview .profile-edit-identity>.avatar { margin-top:0; }

/* A shared cover-left, details-right layout for release and track creators. */
#new-library-playlist .sheet-body { height:100%; padding:24px; overflow:auto; }
#new-library-playlist .sheet-header { margin:0 0 20px; }
#new-library-playlist .playlist-metadata-form { display:grid; grid-template-columns:minmax(100px,.8fr) minmax(0,1.6fr); align-items:start; gap:20px; flex:none; max-width:1100px; width:100%; margin:0 auto; }
#new-library-playlist .playlist-editor-cover { width:100%; height:auto; aspect-ratio:1; align-self:start; }
.release-editor-fields { display:flex; flex-direction:column; gap:12px; min-width:0; }
.release-track-order { min-width:0; }
.release-track-order h3 { margin:8px 0; font-size:16px; }
.release-track-order>p { color:var(--muted); font-size:12px; }
.release-track-order ol { list-style:none; padding:0; margin:0; }
.release-track-order li { display:flex; align-items:center; gap:8px; min-width:0; padding:8px 0; border-bottom:1px solid var(--line); }
.release-track-number { flex:none; width:20px; color:var(--muted); font-size:12px; text-align:center; }
.release-track-order li>.art,.release-missing-art { flex:none; width:36px; height:36px; }
.release-missing-art { display:grid; place-items:center; background:var(--surface); }
.release-missing-art svg { width:20px; height:20px; }
.release-order-copy { flex:1; min-width:0; }
.release-order-copy strong,.release-order-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.release-order-copy strong { font-size:13px; }
.release-order-copy small { margin-top:4px; font-size:11px; color:var(--muted); }
.release-track-moves { display:flex; flex:none; gap:2px; }
.release-track-moves button { min-width:40px; min-height:44px; font-size:20px; }
.release-order-status:empty { display:none; }
.release-editor-fields textarea { min-height:120px; max-height:240px; }
#new-library-playlist .playlist-editor-actions { margin-top:8px; }
#post-sheet #new-post.post-editor-form { display:grid; grid-template-columns:minmax(100px,.8fr) minmax(0,1.6fr); align-items:start; gap:20px; max-width:1100px; width:100%; margin:0 auto; padding:0 24px 24px; }
.post-editor-toolbar { grid-column:1/-1; padding-inline:0; }
.post-editor-toolbar>strong { margin-right:auto; font-size:20px; }
.post-editor-player { position:sticky; top:80px; }
.post-editor-cover { aspect-ratio:1; border-radius:16px; overflow:hidden; }
.post-editor-cover .draft-rail,.post-editor-cover .draft-frame { height:100%; }
.post-editor-fields { min-width:0; padding:0; gap:12px; }
.post-editor-fields>label:first-of-type input { font:400 16px Arial,sans-serif; }
.post-editor-fields .post-caption-label textarea { min-height:120px; border-radius:10px; }
.creator-cover-placeholder { display:grid; place-content:center; justify-items:center; gap:10px; color:var(--muted); background:var(--surface); }
.creator-cover-placeholder>svg { width:44px; height:44px; }
@media(max-width:480px) {
 #new-library-playlist .sheet-body { padding:12px; }
 #new-library-playlist .playlist-metadata-form,#post-sheet #new-post.post-editor-form { gap:12px; grid-template-columns:96px minmax(0,1fr); }
 #post-sheet #new-post.post-editor-form { padding:0 12px 16px; }
 .release-editor-name { grid-template-columns:minmax(0,1fr); }
 .post-cover-actions { flex-wrap:wrap; }
 .post-cover-actions>.pill { flex-basis:100%; }
 #new-library-playlist .playlist-editor-actions { grid-template-columns:minmax(0,1fr); gap:8px; }
}

.post-cover-crop-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.post-cover-crop-toolbar>span { margin-right:auto; color:var(--muted); font-size:11px; }
.post-cover-crop-toolbar>button { min-width:44px; min-height:44px; }
.post-editor-cover[data-cover-crop] { touch-action:none; cursor:grab; }
.post-editor-cover[data-cover-crop] .draft-frame>img,.post-editor-cover[data-cover-crop] .draft-frame>video { width:100%; height:100%; object-fit:cover; }
@media(max-width:760px) {
 body:not([data-page="desktop-app"]) #post-sheet #new-post.post-editor-form { display:flex; flex-direction:column; gap:0; padding:0; }
 body:not([data-page="desktop-app"]) .post-editor-toolbar { width:100%; padding:8px 12px; }
 body:not([data-page="desktop-app"]) .post-editor-player { position:static; }
 body:not([data-page="desktop-app"]) .post-editor-fields { width:100%; padding:12px 16px 24px; }
 body:not([data-page="desktop-app"]) .post-editor-cover { border-radius:0; }
}

/* The phone creator starts with audio, then prepares the cover before editing. */
.post-media-step { display:flex; flex-direction:column; min-height:100%; padding:0 0 24px; }
.post-media-step>.post-editor-toolbar { flex:none; padding:8px 16px; }
.post-media-step-content { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px 16px; text-align:center; min-width:0; }
.post-media-step-number { font-size:12px; color:var(--muted); }
.post-media-step-icon { display:grid; place-items:center; width:80px; height:80px; border-radius:22px; background:var(--surface); color:var(--accent); }
.post-media-step-icon>svg { width:36px; height:36px; }
.post-media-step h2 { margin:0; font-size:24px; }
.post-media-step p { margin:0; font-size:14px; line-height:1.5; color:var(--muted); }
.post-media-step small { font-size:12px; color:var(--muted); }
.post-media-step .post-media-step-file { max-width:100%; overflow-wrap:anywhere; color:var(--text); font-size:13px; }
.post-media-step-status { display:flex; align-items:center; justify-content:center; gap:10px; min-height:24px; color:var(--muted); font-size:13px; }
.post-media-step-status .feed-refresh-spinner { flex:none; width:20px; height:20px; margin:0; }
.post-media-step-status .feed-refresh-spinner[hidden] { display:none; }
.post-media-step .post-media-step-error { color:#ffb4b4; }
.post-media-step .post-pick { width:min(100%,280px); min-height:48px; display:flex; align-items:center; justify-content:center; padding:12px 16px; }
.post-media-step .post-pick:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.post-media-step .post-pick:has(input:disabled) { opacity:.6; cursor:wait; }
.post-media-step .post-step-change-audio { background:transparent; }

.reel[data-reel] .reel-actions>.reel-action[data-share],.desktop-track .player-action-group--share>.reel-action[data-share] { margin-right:10px; }

/* Recipient selection stays scrollable while the share actions remain in view. */
#post-share-sheet .share-card { display:flex; flex-direction:column; height:100%; min-height:0; box-sizing:border-box; gap:8px; padding:12px; }
#post-share-sheet { min-height:min(280px,var(--app-sheet-height)); }
#post-share-sheet .sheet-header h2 { font-size:20px; }
#post-share-sheet .share-track-title { font-size:12px; }
#post-share-sheet .share-empty { margin:0; font-size:13px; }
#post-share-sheet .share-person .avatar { width:40px; height:40px; }
#post-share-sheet .sheet-header { flex:none; }
#post-share-sheet .share-track-title { margin:0; flex:none; }
#post-share-sheet .share-people { flex:1; min-height:0; max-height:none; overflow-y:auto; }
#post-share-sheet .share-recipient-row { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 24px)/4); gap:8px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; padding:2px 0 6px; scroll-snap-type:x proximity; }
#post-share-sheet .share-person { position:relative; min-width:0; min-height:0; flex-direction:column; justify-content:flex-start; padding:6px 2px; border-radius:10px; gap:5px; text-align:center; scroll-snap-align:start; }
#post-share-sheet .share-person>span:not(.avatar) { flex:none; width:100%; gap:2px; }
#post-share-sheet .share-person strong { font-size:12px; line-height:14px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
#post-share-sheet .share-person small { display:block; font-size:10px; line-height:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#post-share-sheet .share-person input { position:absolute; top:3px; right:3px; width:16px; height:16px; margin:0; }
#post-share-sheet .share-person:focus-within { outline:2px solid var(--accent); outline-offset:-2px; }
#post-share-sheet .share-person.is-selected { background:var(--surface); box-shadow:inset 0 0 0 1px var(--accent); }
#post-share-sheet .share-group-avatar { display:grid; place-items:center; background:var(--surface); }
#post-share-sheet .share-group-avatar svg { width:24px; height:24px; }
#post-share-sheet .share-error:empty { display:none; }
#post-share-sheet .share-card-actions { margin-top:auto; flex:none; padding-top:8px; }
#app-cart-sheet .app-cart-card { min-height:100%; box-sizing:border-box; }
body[data-page="desktop-app"] #app-cart-sheet { border-radius:0; }
body[data-page="desktop-app"] #app-cart-sheet .app-cart-card { max-width:1000px; margin:0 auto; padding:28px; }
body[data-page="desktop-app"] #app-cart-sheet .app-cart-items { max-height:none; }
.release-tag-suggestions { display:flex; flex-wrap:wrap; gap:6px; }
.release-tag-suggestions:empty { display:none; }
.release-tag-suggestions .tag-suggestion { border:1px solid var(--line); border-radius:20px; padding:5px 10px; background:var(--surface); color:var(--muted); font:inherit; font-size:12px; cursor:pointer; }
.release-tag-suggestions .tag-suggestion:hover { border-color:var(--accent); color:var(--text); }
.release-editor-fields input[type="date"] { width:100%; min-width:0; box-sizing:border-box; color-scheme:dark; }
#post-share-sheet .sheet-header h2 { margin:0; }
#post-share-sheet .share-group-avatar { color:var(--accent); }

#post-share-sheet .sheet-header { margin-bottom:0; }
[data-release-date-status]:empty { display:none; }

/* Keep artwork controls with the image in every creator. */
.cover-editor-actions,.cover-editor-zoom { position:absolute; z-index:2; display:flex; align-items:center; gap:6px; padding:0; }
.cover-editor-actions { top:10px; right:10px; }
.cover-editor-zoom { bottom:10px; right:10px; flex-wrap:nowrap; }
.cover-editor-actions>button,.cover-editor-zoom>button { display:grid; place-items:center; min-width:44px; min-height:44px; padding:8px 12px; border:1px solid #ffffff55; border-radius:10px; background:#071007e6; color:#f4fff0; font:600 12px Arial,sans-serif; cursor:pointer; }
.cover-editor-zoom>button:not([data-track-cover-reset]):not([data-release-cover-reset]) { padding:4px; font-size:24px; }
.cover-editor-actions>button:disabled,.cover-editor-zoom>button:disabled { opacity:.4; cursor:default; }
.cover-editor-zoom[hidden],.cover-editor-actions>button[hidden] { display:none; }
.cover-editor-hint { margin:6px 0 0; text-align:center; color:var(--muted); font-size:11px; }
.playlist-cover-stage { position:relative; width:100%; height:100%; overflow:hidden; border-radius:16px; background:var(--elevated); touch-action:none; cursor:grab; }
.playlist-cover-stage>.playlist-editor-art { width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
.playlist-cover-stage:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:480px) {
 #new-library-playlist .playlist-editor-cover { grid-column:1/-1; width:min(100%,320px); justify-self:center; }
 #new-library-playlist .release-editor-fields { grid-column:1/-1; }
}
.app-cart-layout { display:grid; gap:24px; }
.app-cart-checkout { min-width:0; }
.app-cart-checkout>h3 { margin:0 0 16px; font-size:18px; }
.app-cart-coupon { display:grid; gap:8px; margin-bottom:20px; }
.app-cart-coupon>label { font-size:13px; color:var(--muted); }
.app-cart-coupon>div { display:flex; gap:6px; }
.app-cart-coupon input { flex:1; min-width:0; width:100%; height:44px; border:1px solid var(--line); border-radius:8px; padding:10px; background:var(--surface); color:var(--text); font:inherit; font-size:16px; }
.app-cart-coupon .pill { padding:8px 12px; min-height:44px; }
.app-cart-coupon>small { color:var(--muted); font-size:11px; line-height:1.4; }
.app-cart-coupon [role=status] { margin:0; color:var(--muted); font-size:12px; line-height:1.4; }
.app-cart-coupon [role=status]:empty { display:none; }
.app-cart-breakdown { display:grid; gap:12px; margin:0; font-size:13px; }
.app-cart-breakdown>div { display:flex; justify-content:space-between; gap:16px; }
.app-cart-breakdown dt { min-width:0; overflow-wrap:anywhere; }
.app-cart-breakdown dd { margin:0; flex:none; }
.app-cart-breakdown .app-cart-discount { color:var(--accent); }
.app-cart-breakdown .app-cart-total { border-top:1px solid var(--line); padding-top:14px; font-weight:700; font-size:16px; }
.app-cart-item-price { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; font-size:13px; }
.app-cart-item-price del { color:var(--muted); font-size:12px; }
.app-cart-item-price small { flex-basis:100%; color:var(--accent); font-size:11px; }
.app-cart-review-license { display:block; min-height:36px; padding:6px 0; color:var(--accent); font-size:12px; text-decoration:underline; text-underline-offset:3px; }
@media(min-width:1100px) {
 body[data-page="desktop-app"] .app-cart-layout { grid-template-columns:minmax(0,1.4fr) minmax(290px,1fr); align-items:start; }
 body[data-page="desktop-app"] .app-cart-checkout { position:sticky; top:24px; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
}
.license-settings-page { max-width:1200px; }
.license-settings-intro { margin:0 0 12px; max-width:760px; color:var(--muted); line-height:1.5; font-size:13px; }
.license-settings-page .settings-heading [data-license-settings-back] { margin-left:auto; }
.account-license-form { display:grid; gap:18px; }
.account-license-card { padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); min-width:0; }
.account-license-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.account-license-heading>label { display:flex; align-items:center; gap:10px; }
.account-license-heading small { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.account-license-heading .pill { flex:none; font-size:12px; min-height:40px; padding:8px 12px; }
.account-license-card input[type=checkbox] { width:20px; height:20px; accent-color:var(--accent); flex:none; }
.account-license-card>fieldset { border:0; padding:0; margin:0; min-width:0; }
.account-license-card>fieldset:disabled { opacity:.45; }
.account-license-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.account-license-fields>label { display:flex; flex-direction:column; gap:8px; min-width:0; font-size:12px; }
.account-license-fields>label>input { width:100%; min-width:0; height:44px; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--background); color:var(--text); font:inherit; font-size:16px; }
.account-license-fields .license-details-field { grid-column:span 2; }
.account-license-files { display:flex; flex-wrap:wrap; gap:10px; border:0; padding:0; min-width:0; margin:0; }
.account-license-files legend { font-size:12px; margin-bottom:8px; }
.account-license-files label,.account-license-content-id>span:last-child { display:flex; align-items:center; gap:6px; min-height:44px; }
.license-settings-error { color:#edb47f; }
.license-settings-error:empty,.license-settings-notice:empty { display:none; }
.account-license-form>[type=submit] { justify-self:start; min-width:160px; }
.account-login-page { min-height:100%; }
.account-login-page>.sheet-body { max-width:440px; margin:0 auto; padding:12px 0; }
.account-login-page .sheet-header { margin-bottom:10px; }
.account-login-page .sheet-header h3 { font-size:28px; line-height:1.2; margin:0; }
.account-login-page .sign-in-intro { color:var(--muted); margin:0 0 24px; }
.account-login-page form { display:grid; gap:18px; }
.account-login-page form label { display:grid; gap:8px; font-size:13px; }
.account-login-page form input { width:100%; min-height:48px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); font-size:16px; }
.account-login-page { min-width:0; overflow-wrap:anywhere; }
.account-login-page .sheet-body,.account-login-page form { min-width:0; max-width:100%; }
.account-login-page [data-auth-error]:empty { display:none; }
.account-login-page [data-auth-error] { color:#edb47f; font-size:13px; }
@media(max-width:760px) {
 .account-license-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .account-license-heading { align-items:flex-start; flex-wrap:wrap; }
}
@media(max-width:400px) {
 .account-license-fields { grid-template-columns:minmax(0,1fr); }
 .account-license-fields .license-details-field { grid-column:auto; }
 .account-license-card { padding:12px; }
}
.account-settings-detail { max-width:1100px; }
.account-settings-detail .settings-heading>[data-account-settings-back] { margin-left:auto; }
.selling-settings-form { display:grid; gap:18px; max-width:900px; }
.selling-settings-form>label,.selling-legal>label { display:grid; gap:8px; font-size:13px; min-width:0; }
.selling-settings-form label>small { color:var(--muted); line-height:1.5; font-size:12px; }
.selling-settings-form input:not([type=checkbox]),.selling-settings-form select,.selling-settings-form textarea { width:100%; min-width:0; min-height:44px; padding:10px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:var(--surface); font:inherit; font-size:16px; }
.selling-actions { display:flex; gap:10px; flex-wrap:wrap; }
.selling-legal { border:1px solid var(--line); border-radius:12px; padding:14px; }
.selling-legal summary { cursor:pointer; margin-bottom:12px; font-weight:600; }
.selling-legal>label { margin-top:14px; }
.selling-settings-form>[type=submit],.communication-settings-form>[type=submit] { justify-self:start; }
.wallet-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }
.wallet-stats>section { display:grid; gap:12px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.wallet-stats strong { font-size:26px; }
.wallet-stats span,.wallet-stats small { color:var(--muted); font-size:12px; }
.wallet-activity article { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
.wallet-activity article small { display:block; margin-top:4px; color:var(--muted); }
.communication-settings-form { display:grid; gap:10px; max-width:760px; }
.settings-crossfade { display:grid; gap:12px; margin-top:16px; font-size:13px; }
.settings-crossfade output { color:var(--accent); }
.settings-crossfade input { width:100%; min-height:32px; accent-color:var(--accent); }
.settings-crossfade small { color:var(--muted); line-height:1.5; }
@media(max-width:600px) { .wallet-stats { grid-template-columns:minmax(0,1fr); } }

/* Opening a sheet focuses its container, without marking a button as selected. */
dialog.app-sheet:focus { outline:none; }

.post-collaborator [hidden] { display:none; }

.profile-edit-preview .profile-edit-identity>.profile-preview-location { margin-bottom:8px; }

#new-library-playlist>.playlist-delete-confirmation { align-items:center; justify-content:center; text-align:center; }
#new-library-playlist>.playlist-delete-confirmation>p { max-width:440px; }
.home-feature-creator { container-type:inline-size; }
.home-feature-creator>.avatar { width:clamp(44px,18cqw,72px); height:clamp(44px,18cqw,72px); top:12px; left:12px; }

.library-tools[hidden] { display:none; }
.library-coming-soon { margin:24px 0; color:var(--muted); }

.track-row { container-type:inline-size; }
.row-play>.row-track-tags { display:none; }
@container (min-width:620px) {
 .row-play>.row-track-copy { flex:0 1 34%; }
 .row-play>.row-track-tags { display:flex; flex-direction:row; align-items:center; flex:1; min-width:0; gap:8px; overflow:hidden; white-space:nowrap; color:var(--muted); font-size:11px; line-height:18px; text-align:left; }
 .row-track-tags>span { flex:none; white-space:nowrap; }
}

.library-tag-suggestions { display:flex; flex-wrap:wrap; gap:6px; margin:-6px 0 18px; }
.library-tag-suggestions:empty,.library-tag-suggestions[hidden] { display:none; }
.library-tag-suggestions>button { max-width:100%; padding:7px 10px; border:1px solid var(--line); color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.library-tag-suggestions>button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
@media(hover:hover) { .library-tag-suggestions>button:hover { border-color:var(--accent); color:var(--text); } }

.hashtag-page button,.desktop-track-tags button { flex:none; padding:0; color:inherit; font:inherit; white-space:nowrap; }
@media(hover:hover) { [data-hashtag]:hover { text-decoration:underline; } }
.hashtag-detail h2 { margin:16px 0; overflow-wrap:anywhere; }

.caption-hashtag { display:inline; padding:0; font:inherit; color:var(--accent); }

.background-track-upload { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; margin-bottom:16px; border:1px solid var(--line); }
.background-upload-icon { display:grid; place-items:center; flex:none; width:40px; height:40px; color:var(--accent); }
.background-upload-icon>svg { width:24px; height:24px; }
.background-upload-copy { flex:1; min-width:160px; overflow-wrap:anywhere; }
.background-upload-copy p { margin:5px 0; font-size:13px; color:var(--muted); }
.background-upload-copy small { color:var(--muted); font-size:12px; }
.background-upload-actions { display:flex; flex-wrap:wrap; gap:8px; }

.conversation-heading { flex:1; min-width:0; }
.conversation-heading h3 { margin:0 0 6px; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.conversation-group-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.conversation-group-actions .pill { min-height:36px; padding:6px 10px; font-size:12px; }
.conversation-group-actions svg { width:16px; height:16px; }
.conversation-members { position:relative; min-width:0; max-width:100%; }
.conversation-members>summary { display:flex; align-items:center; gap:6px; min-height:44px; padding:6px 10px; border:1px solid var(--line); color:var(--text); cursor:pointer; font-size:12px; list-style:none; }
.conversation-members>summary::-webkit-details-marker { display:none; }
.conversation-members>summary svg { flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.conversation-members[open]>summary { color:var(--accent); }
.conversation-members-panel { position:absolute; z-index:5; top:calc(100% + 6px); left:0; width:min(300px,calc(100vw - 70px)); max-width:calc(100vw - 70px); padding:12px; background:var(--background); border:1px solid var(--line); box-shadow:0 12px 32px #0009; }
.conversation-members-panel>strong { display:block; margin-bottom:8px; font-size:13px; }
.conversation-members-roster { overflow-y:auto; overscroll-behavior:contain; max-height:min(300px,35dvh); }
.conversation-members-roster ul { list-style:none; margin:0; padding:0; }
.conversation-members-roster li { display:flex; align-items:center; gap:10px; padding:8px 0; }
.conversation-members-roster .avatar { flex:none; width:36px; height:36px; }
.conversation-members-roster li>span:not(.avatar) { min-width:0; }
.conversation-members-roster strong,.conversation-members-roster small { display:block; overflow-wrap:anywhere; font-size:13px; }
.conversation-members-roster em { font-size:11px; font-style:normal; color:var(--muted); }
.conversation-members-roster small { margin-top:3px; color:var(--muted); font-size:11px; }
.track-feature-error { color:#f1b477; font-size:13px; }
.track-feature-error:empty { display:none; }
#group-chat-form { display:flex; flex-direction:column; gap:14px; }
#group-chat-form>label { display:flex; flex-direction:column; gap:8px; font-size:13px; }
#group-chat-form>label input { width:100%; min-width:0; padding:12px; background:var(--surface); border:1px solid var(--line); color:var(--text); font-size:16px; }
.group-chat-people { min-height:0; overflow-y:auto; max-height:45dvh; }
.group-chat-people .person-picker>span:not(.avatar) { min-width:0; }
.group-chat-people .person-picker strong,.group-chat-people .person-picker small { overflow-wrap:anywhere; }
.group-chat-error:empty { display:none; }

/* Keep Safari's keyboard/focus scroll inside the active card. */
body[data-phone-app] { position:fixed; inset:0; width:100%; height:100dvh; overflow:hidden; }
body[data-phone-app] .app-sheet input:not([type=checkbox]):not([type=radio]):not([type=range]),body[data-phone-app] .app-sheet textarea,body[data-phone-app] .app-sheet select { font-size:16px; }
#profile-note-sheet textarea { font-size:16px; }
.feed-continuation { padding:16px; text-align:center; color:var(--muted); font-size:13px; }
.feed-continuation[hidden] { display:none; }
.track-byline { display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed-continuation { scroll-snap-align:end; min-height:76px; }

.post-owner-credit { display:grid; gap:10px; padding:12px; border:1px solid var(--line); }
.post-owner-credit>label { display:grid; gap:6px; }

.release-page-tracks { --track-row-gutter:0px; }
.release-track-row { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; border-bottom:1px solid var(--line); }
.release-track-row>.track-row { border:0; min-width:0; }
.playlist-track-controls { display:flex; align-items:center; justify-content:flex-end; gap:2px; }
.playlist-track-controls .icon-button { flex:none; width:44px; height:44px; }
.playlist-track-controls .icon-button svg { width:18px; height:18px; }
.playlist-track-controls button:disabled { opacity:.35; }
.release-unavailable { color:var(--muted); font-size:13px; }
.playlist-track-status { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--muted); }
@media(min-width:800px) { .release-track-row { grid-template-columns:minmax(0,1fr) auto; } }

.release-share-button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; }
.release-share-button>svg { width:18px; height:18px; flex:none; }

body[data-page="desktop-app"] .release-track-order { display:none; }
.release-track-moves button[data-release-track-remove]>svg { width:16px; height:16px; }

.post-upload-download { position:relative; }
.post-upload-download>summary { cursor:pointer; list-style:none; }
.post-upload-download>summary::-webkit-details-marker { display:none; }
.post-upload-download-menu { position:absolute; z-index:2; right:0; top:calc(100% + 4px); display:grid; gap:4px; min-width:120px; padding:6px; background:var(--surface); border:1px solid var(--line); }
.post-upload-download-menu>.pill { min-height:44px; }
.post-upload-download-status { grid-column:1/-1; margin:0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.post-upload-download-status:empty { display:none; }

.message-track { width:100%; min-width:0; max-width:100%; margin-top:6px; color:var(--text); }
.message-track>strong { min-width:0; overflow-wrap:anywhere; }
.message-track>.art { width:44px; height:44px; }
.message-preview-empty { display:grid; place-items:center; background:var(--elevated); }
.message-preview-empty>svg { width:24px; height:24px; }
.message-track:disabled { opacity:1; cursor:default; }


/* === square-corners.css === */
/* Square UI corners, with circular avatars and decorative record collages. */
*, *::before, *::after { border-radius:0 !important; }
.avatar, .profile-avatar, .feed-sidebar__avatar, .forum-author__avatar,
.top-chart-artist__avatar, .artist-profile__avatar, .artist-card__avatar,
.track-collaborator__avatar, .track-fan-row__avatar, .visualizer-comment__avatar,
.utility-item__avatar, .message-member-roster__avatar, .message-participant-avatar,
.message-sender-avatar, .message-entry__avatar-link, .profile-hero__avatar,
.profile-connection-card__avatar, .settings-avatar-picker__avatar,
.settings-banner-preview__avatar, .comment-card__avatar, .inbox-person-avatar {
  border-radius:50% !important;
}
.playlist-cover--popular .playlist-cover-stack > .art,
.playlist-cover--popular .playlist-cover-stack > .art::after {
  border-radius:50% !important;
}
input::-webkit-slider-thumb, input::-webkit-slider-runnable-track { border-radius:0 !important; }
input::-moz-range-thumb, input::-moz-range-track { border-radius:0 !important; }
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track { border-radius:0 !important; }


/* === like-controls.css === */
/* Liked tracks use a red heart and count without a filled button background. */
:is([data-toggle="liked"].active, [data-track-like-id][data-state="active"], [data-action="like"][data-state="active"]) {
  background:transparent !important;
  color:#ef4444 !important;
}
:is([data-toggle="liked"].active, [data-track-like-id][data-state="active"], [data-action="like"][data-state="active"]) :is(.action-count, [data-track-counter="likes"]) {
  color:inherit !important;
}
:is([data-toggle="liked"].active, [data-track-like-id][data-state="active"], [data-action="like"][data-state="active"]) svg {
  fill:currentColor;
}


/* === desktop.css === */
/* The website is the app opened out: a persistent player and an independent page. */
body[data-page="desktop-app"] { overflow:hidden; font-weight:400; }
body[data-page="desktop-app"] .workbench { display:block; padding:0; height:100dvh; min-height:0; }
body[data-page="desktop-app"] .intro,
body[data-page="desktop-app"] .statusbar,
body[data-page="desktop-app"] .home-indicator { display:none; }
body[data-page="desktop-app"] .device {
  /* Leave room below the square artwork for fixed controls and the queue. */
  --player-width:min(clamp(340px,28vw,430px),max(280px,calc(100dvh - 380px)));
  display:grid; grid-template-columns:var(--player-width) minmax(0,1fr);
  grid-template-rows:72px 6px minmax(0,1fr); width:100%; height:100dvh; min-height:0;
  border:0; border-radius:0; box-shadow:none; background:#050b06;
}
body[data-page="desktop-app"] #app-header {
  position:relative; z-index:10;
  grid-column:1/-1; grid-row:1; height:auto; min-height:0; padding:0 32px;
  display:flex; align-items:center; gap:42px; background:#060d07; border:0;
}
body[data-page="desktop-app"] #app-header>.wordmark { flex:0 0 190px; }
body[data-page="desktop-app"] #app-header>.wordmark img { width:96px; max-width:96px; }
body[data-page="desktop-app"] .header-actions { margin-left:auto; gap:12px; }
body[data-page="desktop-app"] .header-inbox { width:40px; height:40px; }
body[data-page="desktop-app"] .header-inbox>svg { width:23px; height:23px; }
body[data-page="desktop-app"] .header-profile .avatar { width:32px; height:32px; }
body[data-page="desktop-app"] #app-header>.tabbar {
  position:static; display:flex; align-items:stretch; gap:28px; height:100%; min-height:0;
  width:auto; padding:0; border:0; background:none; flex:none;
}
body[data-page="desktop-app"] .tabbar>button[data-tab] {
  display:flex; flex-direction:row; align-items:center; gap:8px; flex:none; width:auto; min-width:0; min-height:0; padding:0 2px;
  border-radius:0; border-bottom:0; color:var(--muted);
  font-size:14px; font-weight:600; background:none;
}
body[data-page="desktop-app"] .tabbar>button.active { color:var(--accent); }
body[data-page="desktop-app"] .tabbar>.app-cart { position:static; transform:none; align-self:center; margin-left:4px; min-width:0; min-height:34px; padding:5px 12px; font-size:12px; box-shadow:none; }
body[data-page="desktop-app"] #audio-progress-bar {
  grid-column:1/-1; grid-row:2; height:6px; min-height:6px; margin:0; border:0; z-index:4;
}
body[data-page="desktop-app"] #mini-player,
body[data-page="desktop-app"] #music-controls { display:none!important; }
body[data-page="desktop-app"] #desktop-player {
  grid-column:1; grid-row:3; min-height:0; overflow:auto; overscroll-behavior:contain;
  border-right:1px solid #00ff9624; background:linear-gradient(170deg,#0b140d,#050b06 70%);
  scrollbar-width:thin; scrollbar-color:#355136 transparent;
}
.desktop-player-heading { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; height:55px; }
.desktop-player-heading>span { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.desktop-player-heading i { width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px #00ff9635; }
.desktop-player-heading button { width:32px; height:32px; display:grid; place-items:center; color:var(--muted); }
.desktop-player-heading svg { width:19px; height:19px; }
.desktop-track .now-playing-cover { position:relative; width:100%; aspect-ratio:1; }
.desktop-track .desktop-cover { width:100%; height:100%; border-radius:0; }
.desktop-track .hero-play { inset:0; width:100%; height:100%; }
.desktop-empty-cover { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; height:100%; text-align:center; background:radial-gradient(ellipse at 50% 40%,#28402a6b,transparent 70%),#0b140d; border-bottom:1px solid #00ff9612; }
.desktop-empty-cover>svg { width:42px; height:42px; color:var(--accent); margin-bottom:6px; }
.desktop-empty-cover>strong { font-size:23px; letter-spacing:-.7px; font-weight:600; }
.desktop-empty-cover>span { font-size:13px; color:var(--muted); line-height:1.6; }
.desktop-empty-cover>.pill { display:flex; align-items:center; gap:12px; margin-top:6px; border-color:#00ff964d; color:var(--accent); }
.desktop-empty-cover>.pill svg { width:16px; height:16px; }
.desktop-player-details { padding:0 18px 16px; }
.desktop-track .reel-actions { padding:14px 0 12px; gap:9px; justify-content:space-between; }
.desktop-track .reel-action { gap:4px; min-width:0; }
.desktop-track .reel-action>svg,.desktop-track .reel-play-count>svg { width:22px; height:22px; }
.desktop-track .reel-action .action-count,.desktop-track .reel-play-count { font-size:11px; }
.desktop-track .reel-action>span:not(.action-count):not(.buy-price) { display:none; }
.desktop-track .track-caption { padding:0; gap:10px; align-items:start; }
.desktop-track .caption-avatar .avatar { width:38px; height:38px; }
.desktop-track .caption-title { font-size:17px; line-height:1.25; font-weight:600; }
.desktop-track .artist-link { font-size:12px; font-weight:400; margin-top:0; }
.desktop-track .text-info { width:25px; height:28px; }
.desktop-track .text-info svg { width:17px; height:17px; }
.desktop-track .compact-caption { line-height:14px; font-weight:400; font-size:12px; margin-top:8px; }
.desktop-track-tags { display:flex; flex-wrap:wrap; gap:5px 8px; max-height:36px; overflow:hidden; font-size:11px; line-height:1.5; color:var(--muted); margin:17px 0; }
.desktop-player-tools { display:flex; justify-content:space-between; align-items:center; gap:13px; padding-top:8px; }
.desktop-player-tools>button { position:relative; display:grid; place-items:center; width:30px; height:32px; }
.desktop-player-tools svg { width:18px; height:18px; }
.desktop-player-tools button.active { color:var(--accent); }
.desktop-player-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #00ff9616; margin:0 18px; padding:18px 0 20px; font-size:10px; color:#8fa28c; }
.desktop-player-footer a { display:flex; align-items:center; gap:5px; }
.desktop-player-footer svg { width:12px; height:12px; }
.desktop-starter-tracks { padding:20px 0 8px; }
.desktop-starter-tracks>h3 { margin:0 0 10px; font-size:11px; color:var(--muted); font-weight:500; }
.desktop-starter-track { display:flex; width:100%; align-items:center; gap:10px; padding:9px 0; text-align:left; }
.desktop-starter-track .art { width:42px; height:42px; flex-shrink:0; border-radius:5px; }
.desktop-starter-track>span { min-width:0; flex:1; }
.desktop-starter-track strong,.desktop-starter-track small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.desktop-starter-track strong { font-size:12px; font-weight:500; }
.desktop-starter-track small { margin-top:4px; font-size:11px; color:var(--muted); }
.desktop-starter-track>svg { width:16px; height:16px; color:var(--accent); }
body[data-page="desktop-app"] #screen,
body[data-page="desktop-app"] #post-sheet,
body[data-page="desktop-app"] #profile-editor { grid-column:2; grid-row:3; min-width:0; min-height:0; height:100%; }
body[data-page="desktop-app"] #screen { background:radial-gradient(ellipse at 15% 0%,#253c2273,transparent 50%),#070e08; }
body[data-page="desktop-app"] .page { padding:34px clamp(24px,3.4vw,58px) 56px; max-width:1400px; margin:0 auto; }
body[data-page="desktop-app"] .page h2 { font-size:30px; letter-spacing:-1px; font-weight:600; }
body[data-page="desktop-app"] .home-page { gap:42px; }
body[data-page="desktop-app"] .home-section-heading { margin-bottom:20px; }
body[data-page="desktop-app"] .home-section-heading h3 { font-size:23px; letter-spacing:-.65px; font-weight:600; }
body[data-page="desktop-app"] .home-section-heading p { font-size:12px; font-weight:400; margin-top:7px; }
body[data-page="desktop-app"] .home-music-grid,
body[data-page="desktop-app"] .album-grid { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:26px 20px; }
body[data-page="desktop-app"] .album-card { font-weight:400; }
body[data-page="desktop-app"] .album-card>.art { border-radius:8px; }
body[data-page="desktop-app"] .album-card>strong { font-size:13px; font-weight:600; margin-top:11px; }
body[data-page="desktop-app"] .album-card>small { font-size:12px; font-weight:400; margin-top:4px; }
body[data-page="desktop-app"] .home-rotation-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
body[data-page="desktop-app"] .home-rotation-grid .album-card { padding:12px; }
body[data-page="desktop-app"] .genre-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
body[data-page="desktop-app"] .genre-tile { min-height:110px; border-radius:8px; padding:18px; }
body[data-page="desktop-app"] .genre-tile>strong { font-size:19px; font-weight:600; }
body[data-page="desktop-app"] .search { max-width:680px; margin-bottom:24px; min-height:48px; }
body[data-page="desktop-app"] .search input { font-size:14px; font-weight:400; }
body[data-page="desktop-app"] .creator-rail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
body[data-page="desktop-app"] .creator-card { width:auto; min-width:0; }
body[data-page="desktop-app"] .creator-card>.avatar { width:86px; height:86px; }
body[data-page="desktop-app"] .library-page,.desktop-discovery { width:100%; }
body[data-page="desktop-app"] .library-tools { margin:20px 0; }
body[data-page="desktop-app"] .new-creation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:760px; margin-top:28px; }
body[data-page="desktop-app"] .new-creation-choice { min-height:90px; }
.desktop-page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; }
.desktop-page-heading>.pill { display:flex; align-items:center; gap:7px; }
.desktop-page-heading>.pill svg { width:16px; height:16px; }
body[data-page="desktop-app"] #queue-panel { width:var(--player-width); right:auto; border-right:1px solid #00ff9624; }
body[data-page="desktop-app"] #toast { bottom:28px; left:calc(var(--player-width) + (100% - var(--player-width))/2); max-width:440px; }
body[data-page="desktop-app"] .device.post-editing #app-header { display:flex; }
body[data-page="desktop-app"] .device.post-editing #audio-progress-bar { display:block; }
body[data-page="desktop-app"] #post-sheet>.sheet-body { max-width:900px; margin:0 auto; padding:32px; }
body[data-page="desktop-app"] .app-sheet .sheet-body { padding:28px; }
body[data-page="desktop-app"] .app-sheet:not(#artist-sheet) { max-width:620px; left:50%!important; transform:translateX(-50%); }
body[data-page="desktop-app"] #artist-sheet .profile-shell { min-height:100%; }
body[data-page="desktop-app"] .profile-content { padding:0 28px 28px; }
body[data-page="desktop-app"] .profile-shell>.profile-banner { max-height:none; }
body[data-page="desktop-app"] .profile-identity>h2 { font-size:clamp(22px,5.8vw,34px); }
@media(max-width:1050px) {
  body[data-page="desktop-app"] .device { --player-width:min(310px,max(240px,calc(100dvh - 460px))); }
  body[data-page="desktop-app"] #app-header>.wordmark { flex-basis:160px; }
  body[data-page="desktop-app"] #app-header>.wordmark img { width:160px; max-width:160px; }
  body[data-page="desktop-app"] #app-header { padding:0 22px; gap:28px; }
  body[data-page="desktop-app"] #app-header>.tabbar { gap:20px; }
  body[data-page="desktop-app"] .home-rotation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="desktop-app"] .genre-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  body[data-page="desktop-app"] .device { --player-width:220px; grid-template-rows:64px 6px minmax(0,1fr); }
  body[data-page="desktop-app"] #app-header { padding:0 14px; gap:18px; }
  body[data-page="desktop-app"] #app-header>.wordmark { flex-basis:132px; }
  body[data-page="desktop-app"] #app-header>.wordmark img { width:132px; max-width:132px; }
  body[data-page="desktop-app"] #app-header>.tabbar { gap:12px; }
  body[data-page="desktop-app"] .tabbar>button[data-tab] { font-size:12px; }
  body[data-page="desktop-app"] .header-actions { gap:0; }
  body[data-page="desktop-app"] .header-inbox { width:32px; }
  body[data-page="desktop-app"] .header-inbox>svg { width:19px; height:19px; }
  body[data-page="desktop-app"] .page { padding:24px 20px 40px; }
  body[data-page="desktop-app"] .home-music-grid,body[data-page="desktop-app"] .album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
  body[data-page="desktop-app"] .home-rotation-grid,body[data-page="desktop-app"] .genre-grid { grid-template-columns:minmax(0,1fr); }
  .desktop-player-details { padding:0 12px 12px; }
  .desktop-track .reel-actions { gap:5px; flex-wrap:wrap; }
  .desktop-track .reel-action>svg { width:19px; height:19px; }
  .desktop-track .track-caption { gap:7px; }
  .desktop-track .caption-avatar .avatar { width:30px; height:30px; }
  .desktop-track .caption-title { font-size:14px; }
  .desktop-player-tools { gap:5px; }
  .desktop-player-footer>span { display:none; }
  .desktop-player-heading { padding:12px; }
  .desktop-empty-cover>strong { font-size:20px; }
  .desktop-empty-cover>span { font-size:11px; }
}
@media(prefers-reduced-motion:no-preference) {
  .desktop-track .desktop-cover { animation:desktop-cover-in .18s ease-out; }
  @keyframes desktop-cover-in { from {opacity:.5;} to {opacity:1;} }
}
.desktop-sign-in { padding:30px 25px; }
.desktop-sign-in>svg { width:42px; height:42px; color:var(--accent); margin:10px 0 30px; }
.desktop-sign-in .sheet-body { padding:0; }
.desktop-sign-in .sheet-header { margin-bottom:10px; }
.desktop-sign-in .sheet-header h3 { font-size:25px; line-height:1.2; letter-spacing:-.8px; font-weight:600; }
.desktop-sign-in .sign-in-intro { color:var(--muted); font-size:13px; margin:0 0 30px; line-height:1.5; }
.desktop-sign-in form { display:grid; gap:18px; }
.desktop-sign-in form label { display:grid; gap:8px; font-size:12px; color:var(--muted); }
.desktop-sign-in input { min-width:0; width:100%; padding:13px 12px; border:1px solid #00ff9627; border-radius:6px; background:#ffffff05; color:var(--text); font-size:13px; outline-offset:2px; }
.desktop-sign-in input::placeholder { color:#789074; }
.desktop-sign-in form .primary { background:var(--accent); color:#0b160a; border:0; border-radius:6px; min-height:43px; font-size:13px; }
.desktop-sign-in [data-auth-error]:empty { display:none; }
.desktop-sign-in [data-auth-error] { color:var(--accent); font-size:12px; line-height:1.5; }
.desktop-sign-in .preview-note { font-size:11px; line-height:1.6; text-align:left; margin-top:18px; font-weight:400; }
.desktop-guest-listen { margin-top:18px; border-top:1px solid #00ff9624; padding-top:12px; display:grid; gap:12px; }
.desktop-guest-listen>span { font-size:13px; font-weight:500; }
.desktop-guest-listen>.pill { display:flex; justify-content:space-between; align-items:center; border-radius:6px; color:var(--accent); }
.desktop-guest-listen>.pill svg { width:16px; height:16px; }
.desktop-guest-listen>p { font-size:11px; color:var(--muted); line-height:1.6; }
.desktop-studio-link { display:inline-flex; margin-top:24px; }
@media(max-width:760px) {
  .desktop-sign-in { padding:20px 16px; }
  .desktop-sign-in .sheet-header h3 { font-size:22px; }
  .desktop-sign-in>svg { margin-bottom:20px; }
}
/* Mouse scrubbing stays inside the timeline instead of covering the navigation. */
body[data-page="desktop-app"] #audio-progress-bar .cover-seek { inset:0; height:6px; }
body[data-page="desktop-app"] #audio-progress-bar .cover-seek::-webkit-slider-runnable-track { height:6px; background:linear-gradient(to right,var(--accent) var(--seek,0%),#52634c var(--seek,0%)); }
body[data-page="desktop-app"] #audio-progress-bar .cover-seek::-moz-range-track { height:6px; background:linear-gradient(to right,var(--accent) var(--seek,0%),#52634c var(--seek,0%)); }
body[data-page="desktop-app"] #audio-progress-bar .cover-seek::-webkit-slider-thumb { width:3px; height:6px; background:var(--accent); }
body[data-page="desktop-app"] #audio-progress-bar .cover-seek::-moz-range-thumb { width:3px; height:6px; background:var(--accent); border:0; }
body[data-page="desktop-app"] #audio-progress-bar .seek-position { display:none; }
body[data-page="desktop-app"] #audio-progress-bar.empty-audio-timeline .cover-seek::-webkit-slider-thumb { opacity:0; width:0; }
body[data-page="desktop-app"] #audio-progress-bar.empty-audio-timeline .cover-seek::-moz-range-thumb { opacity:0; width:0; }
body[data-page="desktop-app"] #audio-progress-bar.empty-audio-timeline .cover-seek::-webkit-slider-runnable-track { background:#293528; }
body[data-page="desktop-app"] #audio-progress-bar.empty-audio-timeline .cover-seek::-moz-range-track { background:#293528; }
body[data-page="desktop-app"] .home-music-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:24px 16px; }
@media(max-width:1250px) { body[data-page="desktop-app"] .home-music-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { body[data-page="desktop-app"] .home-music-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:680px) {
  body[data-page="desktop-app"] .device { --player-width:190px; grid-template-rows:92px 6px minmax(0,1fr); }
  body[data-page="desktop-app"] #app-header { display:grid; grid-template-columns:1fr auto; grid-template-rows:50px 42px; gap:0; }
  body[data-page="desktop-app"] #app-header>.wordmark { grid-column:1; grid-row:1; }
  body[data-page="desktop-app"] #app-header>.header-actions { grid-column:2; grid-row:1; }
  body[data-page="desktop-app"] #app-header>.tabbar { grid-column:1/-1; grid-row:2; height:42px; justify-content:space-between; gap:12px; }
  body[data-page="desktop-app"] .home-music-grid,body[data-page="desktop-app"] .album-grid { grid-template-columns:minmax(0,1fr); }
}
#desktop-player[hidden] { display:none!important; }
body[data-page="desktop-app"] .now-playing-cover .desktop-cover { border-radius:0; }
body[data-page="desktop-app"] #audio-progress-bar { grid-column:1; width:100%; }
body[data-page="desktop-app"] #app-header { border-bottom:1px solid #00ff961c; }
body[data-page="desktop-app"] .now-playing-cover,
body[data-page="desktop-app"] .now-playing-cover .desktop-cover,
body[data-page="desktop-app"] .album-card>.art { border:0; border-radius:0; box-shadow:none; }

body[data-page="desktop-app"] .tabbar>button[data-tab]>svg { width:18px; height:18px; }
@media(max-width:760px) { body[data-page="desktop-app"] .tabbar>button[data-tab] { gap:5px; } body[data-page="desktop-app"] .tabbar>button[data-tab]>svg { width:16px; height:16px; } }

/* Match the phone player: artwork, actions, identity, tags, then transport. */
body[data-page="desktop-app"] .now-playing-cover { position:relative; width:100%; aspect-ratio:1; }
.desktop-track .desktop-player-details { padding:0 12px; }
.desktop-track .reel-actions { height:auto; min-height:44px; padding:0; margin:0; gap:12px; justify-content:space-between; flex-wrap:nowrap; }
.desktop-track .player-action-group { display:contents; }
.desktop-track .reel-play-count { margin-left:0; }
.desktop-track .reel-action>svg,.desktop-track .reel-play-count>svg { width:25px; height:25px; }
.desktop-track .reel-action .action-count,.desktop-track .reel-play-count { font-size:12px; }
.desktop-track .caption-avatar .avatar { width:38px; height:38px; }
.desktop-track .caption-title { font-size:16px; line-height:1.1; }
.desktop-track .artist-link { font-size:13px; }
.desktop-track .text-info { width:28px; height:32px; }
.desktop-track .text-info svg { width:19px; height:19px; }
.desktop-player-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:4px; padding:2px 0; }
.desktop-track-tags { flex:1; min-width:0; display:flex; flex-wrap:nowrap; gap:6px; margin:12px 0 0; max-height:none; overflow:hidden; white-space:nowrap; font-size:11px; line-height:1.5; }
.desktop-track-tags>span { flex:none; }
.desktop-player-bottom .desktop-player-tools { justify-self:end; flex:none; gap:12px; padding:0; }
.desktop-player-bottom .desktop-player-tools>button { width:26px; height:32px; padding:0; }
.desktop-player-bottom .desktop-player-tools svg { width:24px; height:24px; }
@media(max-width:760px) {
  .desktop-track .reel-actions { gap:4px; }
  .desktop-track .reel-action>svg,.desktop-track .reel-play-count>svg { width:22px; height:22px; }
  .desktop-track .caption-title { font-size:16px; }
  .desktop-track .artist-link { font-size:12px; }
  .desktop-track .caption-avatar .avatar { width:34px; height:34px; }
  .desktop-player-bottom { gap:0; }
  .desktop-player-bottom .desktop-player-tools { gap:2px; }
  .desktop-player-bottom .desktop-player-tools>button { width:22px; }
  .desktop-player-bottom .desktop-player-tools svg { width:20px; height:20px; }
}
body[data-page="desktop-app"] #app-header button { touch-action:manipulation; }
@media(max-width:760px),(max-height:620px) {
  .desktop-track .reel-actions { gap:2px; }
  .desktop-track .reel-action { gap:3px; }
  .desktop-track .reel-action>svg,.desktop-track .reel-play-count>svg { width:22px; height:22px; }
  .desktop-track .reel-action .action-count,.desktop-track .reel-play-count { font-size:11px; }
  .desktop-track .reel-play-count { min-width:0; gap:2px; }
}
@media(max-width:640px) {
  .desktop-track .reel-actions { flex-wrap:wrap; }
  .desktop-track .reel-action,.desktop-track .reel-play-count { height:32px; min-height:32px; }
}

/* Extend the phone-sized player into the available height with an editable queue. */
body[data-page="desktop-app"] #desktop-player:has(.desktop-track) { display:flex; flex-direction:column; overflow:hidden; }
.desktop-track { flex:none; }
.desktop-player-tail { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; border-top:1px solid #00ff961c; }
.desktop-player-bottom .desktop-transport { display:flex; flex:none; align-items:center; gap:10px; }
.desktop-player-bottom .desktop-transport>button { display:grid; place-items:center; width:26px; height:32px; padding:0; border:0; border-radius:0; background:none; color:var(--text); }
.desktop-transport>button:disabled { cursor:default; opacity:.3; }
.desktop-player-bottom .desktop-transport>button>svg { width:24px; height:24px; }
#desktop-inline-queue { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; margin:0 10px 12px; }
.desktop-queue-heading { position:relative; min-width:0; justify-self:start; }
.desktop-queue-heading [data-queue-count] { color:var(--muted); font-size:10px; font-weight:400; }
#desktop-inline-queue .queue-list { min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#355136 transparent; }
#desktop-inline-queue .queue-empty { padding:18px 4px; line-height:1.6; }
#desktop-inline-queue .desktop-queue-track { gap:5px; min-height:50px; padding:4px 0; border-bottom:1px solid #00ff960c; }
#desktop-inline-queue .queue-drag-handle { flex:none; width:12px; font-size:14px; color:#789074; cursor:grab; letter-spacing:-4px; }
.desktop-queue-song { display:flex; flex:1; align-items:center; gap:8px; min-width:0; padding:0; text-align:left; }
.desktop-queue-track .desktop-queue-song .art { width:34px; height:34px; border-radius:0; }
.desktop-queue-song>span { min-width:0; }
.desktop-queue-track .desktop-queue-song strong { font-size:11px; line-height:1.3; font-weight:500; }
.desktop-queue-track .desktop-queue-song small { font-size:10px; line-height:1.3; font-weight:400; margin-top:2px; }
.desktop-queue-edit { display:flex; flex:none; align-items:center; gap:0; }
.desktop-queue-edit>button { display:grid; place-items:center; width:24px; height:32px; color:var(--muted); }
.desktop-queue-edit>button:disabled { opacity:.2; cursor:default; }
.desktop-queue-edit svg { width:15px; height:15px; }
.desktop-queue-edit [data-desktop-queue-move] svg { transform:rotate(90deg); }
.desktop-queue-picker .search { margin:18px 0; }
.desktop-queue-picker-results { max-height:55dvh; overflow:auto; overscroll-behavior:contain; }
.desktop-queue-picker-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #00ff9612; }
.desktop-queue-picker-row>.art { flex:none; width:44px; height:44px; border-radius:0; }
.desktop-queue-picker-row>span { flex:1; min-width:0; }
.desktop-queue-picker-row strong,.desktop-queue-picker-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.desktop-queue-picker-row strong { font-size:13px; }
.desktop-queue-picker-row small { font-size:11px; color:var(--muted); margin-top:4px; }
.desktop-queue-picker-row>.pill { display:flex; align-items:center; gap:4px; flex:none; min-width:64px; justify-content:center; }
.desktop-queue-picker-row>.pill svg { width:14px; height:14px; }
@media(max-width:760px),(max-height:620px) {
  .desktop-player-bottom .desktop-transport,.desktop-player-bottom .desktop-player-tools { gap:2px; }
  .desktop-player-bottom .desktop-transport>button,.desktop-player-bottom .desktop-player-tools>button { width:20px; }
  .desktop-player-bottom .desktop-transport>button>svg,.desktop-player-bottom .desktop-player-tools>button>svg { width:20px; height:20px; }
}
@media(max-width:760px) {
  .desktop-queue-track .desktop-queue-song .art { width:28px; height:28px; }
  .desktop-queue-edit>button { width:20px; }
  .desktop-queue-edit svg { width:13px; height:13px; }
  #desktop-inline-queue .desktop-queue-track { gap:3px; }
  .desktop-queue-song { gap:5px; }
  #desktop-inline-queue { margin-left:6px; margin-right:6px; }
}

.desktop-track .hero-play { z-index:1; touch-action:manipulation; }

/* Give the public creator shelf the same six-column rhythm as the music shelf. */
body[data-page="desktop-app"] .guest-home .creator-rail { grid-template-columns:repeat(6,minmax(0,1fr)); row-gap:28px; }
@media(max-width:1250px) { body[data-page="desktop-app"] .guest-home .creator-rail { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { body[data-page="desktop-app"] .guest-home .creator-rail { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.desktop-queue-recommendations>h4 { display:flex; align-items:center; height:28px; margin:0; font-size:12px; font-weight:500; color:var(--muted); }
.desktop-recommend-add { display:grid; place-items:center; flex:none; width:32px; height:32px; color:var(--accent); }
.desktop-recommend-add>svg { width:18px; height:18px; }

body[data-page="desktop-app"] #app-sheet-layer>#auth-sheet.app-sheet { top:50%!important; bottom:auto!important; transform:translate(-50%,-50%); border-radius:20px; }

/* Player actions use the phone's sheets within the player column. */
body[data-page="desktop-app"] #app-player-sheet-layer>.app-sheet { left:0!important; max-width:100%; transform:none; }
body[data-page="desktop-app"] #app-player-sheet-layer .sheet-body { padding:16px; }

/* Collections and creator results share the available content width. */
body[data-page="desktop-app"] .home-genre-playlist-grid,
body[data-page="desktop-app"] .category-playlist-grid { grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:16px; }
body[data-page="desktop-app"] .home-genre-playlist-grid>.home-genre-playlist,
body[data-page="desktop-app"] .category-playlist-grid>.category-playlist-card { grid-column:auto; aspect-ratio:1; }
body[data-page="desktop-app"] .category-playlist-grid>.category-playlist-card>.category-playlist-art { aspect-ratio:1; }
body[data-page="desktop-app"] .creator-rail,
body[data-page="desktop-app"] .guest-home .creator-rail { grid-template-columns:repeat(auto-fit,minmax(min(96px,100%),1fr)); gap:16px; }
body[data-page="desktop-app"] .creator-card>.avatar { width:64px; height:64px; }
body[data-page="desktop-app"] #app-activity-sheet-layer>dialog.app-sheet { left:0!important; transform:none; max-width:100%; }
body[data-page="desktop-app"] #app-activity-sheet-layer .activity-content>.page { padding:16px 16px 20px; }
body[data-page="desktop-app"] .profile-shell>.profile-content { padding:0 28px 28px; }

/* Compact the controls with the player column, including wide, short windows. */
body[data-page="desktop-app"] #desktop-player { container-type:inline-size; }
@container (max-width:320px) {
  .desktop-track .reel-actions { gap:3px; }
  .desktop-track .reel-action { gap:2px; }
  .desktop-track .reel-action>svg,.desktop-track .reel-play-count>svg { width:20px; height:20px; }
  .desktop-track .reel-action .action-count,.desktop-track .reel-play-count { font-size:11px; }
  .desktop-track .reel-play-count { min-width:0; gap:2px; }
  .desktop-player-bottom .desktop-transport,.desktop-player-bottom .desktop-player-tools { gap:2px; }
  .desktop-player-bottom .desktop-transport>button,.desktop-player-bottom .desktop-player-tools>button { width:20px; }
  .desktop-player-bottom .desktop-transport>button>svg,.desktop-player-bottom .desktop-player-tools>button>svg { width:20px; height:20px; }
}

.desktop-queue-heading { display:flex; align-items:center; gap:5px; min-height:32px; white-space:nowrap; font-size:12px; }
.desktop-queue-heading>strong { font-weight:600; }
body[data-page="desktop-app"] #queue-panel { container-type:inline-size; }
#queue-panel .navbar-control { width:28px; }
@container (max-width:320px) {
  .desktop-queue-heading { font-size:10px; gap:3px; }
  .desktop-player-bottom .desktop-player-tools { gap:5px; }
  .desktop-player-bottom .desktop-player-tools>button>svg { width:18px; height:18px; }
  #queue-panel .navbar-control { width:24px; }
}
@container (max-width:240px) {
  .desktop-track .desktop-player-details { padding:0 8px; }
  .desktop-track .reel-actions { gap:3px; flex-wrap:wrap; justify-content:space-between; }
  .desktop-track .reel-action>svg,.desktop-track .reel-play-count>svg { width:18px; height:18px; }
  .desktop-track .reel-action .action-count,.desktop-track .reel-play-count { font-size:10px; }
  .desktop-player-bottom .desktop-transport,.desktop-player-bottom .desktop-player-tools { gap:2px; }
  .desktop-player-bottom .desktop-transport>button,.desktop-player-bottom .desktop-player-tools>button { width:18px; }
  .desktop-player-bottom .desktop-transport>button>svg,.desktop-player-bottom .desktop-player-tools>button>svg { width:16px; height:16px; }
}

/* Keep related actions together, with breathing room between the two groups. */
.desktop-track .player-action-group { display:flex; flex:none; align-items:center; gap:10px; }
.desktop-track .player-action-group--share { gap:8px; }
@media(max-width:680px) {
  .desktop-track .player-action-group { gap:4px; }
}

.desktop-track-tags { min-height:17px; }

/* Creators fill the content pane, alongside the persistent media player. */
body[data-page="desktop-app"] #app-sheet-layer>#new-library-playlist.app-sheet {
 left:0!important; max-width:100%; width:100%; transform:none; border-radius:0;
}

/* Cart is a content page beside the persistent media player. */
body[data-page="desktop-app"] #app-sheet-layer>#app-cart-sheet.app-sheet { left:0!important; transform:none; max-width:100%; border-radius:0; }

/* Liked genre playlists share the whole content width. */
body[data-page="desktop-app"] .home-genre-playlist-grid { grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); }

/* Mobile bottom tabbar & full-width reel player (<=600px, phone sizes only) */
#mobile-tabbar { display:none; }
@media(max-width:600px) {
  body[data-page="desktop-app"] .device {
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:calc(50px + env(safe-area-inset-top)) 4px auto minmax(0,1fr) auto!important;
  }
  body[data-page="desktop-app"] #app-header {
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    height:calc(50px + env(safe-area-inset-top))!important;
    padding:env(safe-area-inset-top) 14px 0!important;
    grid-column:1;
    grid-row:1;
  }
  body[data-page="desktop-app"] #app-header>.wordmark img { width:84px; max-width:84px; }
  body[data-page="desktop-app"] #app-header>.tabbar[data-desktop="true"] { display:none!important; }
  body[data-page="desktop-app"] #desktop-player { display:none!important; }
  body[data-page="desktop-app"] #audio-progress-bar { grid-column:1; grid-row:2; height:4px; min-height:4px; }
  body[data-page="desktop-app"] #mobile-mini-player { grid-column:1; grid-row:3; }
  body[data-page="desktop-app"] #screen { grid-column:1; grid-row:4; min-height:0; }
  #mobile-tabbar {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-column:1;
    grid-row:5;
    position:static;
    width:100%;
    min-height:62px;
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(7,14,7,.98);
    border-top:1px solid #ffffff1a;
    z-index:20;
  }
  #mobile-tabbar>button[data-tab] {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height:62px;
    padding:6px 4px;
    font-size:11px;
    font-weight:700;
    color:var(--muted);
  }
  #mobile-tabbar>button[data-tab].active { color:var(--accent); }
  #mobile-tabbar>button.music-tab svg {
    width:44px;
    height:44px;
    padding:10px;
    border-radius:6px;
    background:var(--accent);
    color:#050805;
  }
  #mobile-tabbar>button.music-tab.active {
    background:linear-gradient(180deg,rgba(0,255,150,.18),transparent);
  }
}

.mobile-feed-player {
  display:flex;
  flex-direction:column;
  min-height:100%;
  background:var(--background);
}
.mobile-feed-cover {
  position:relative;
  width:100%;
  flex:1 1 0;
  min-height:0;
  background:#050805;
}
.mobile-feed-cover>.art {
  width:100%;
  height:100%;
  border-radius:0;
}
.mobile-feed-cover .hero-play {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.mobile-feed-body {
  flex:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px 14px 10px;
}
.mobile-feed-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--text);
}
.mobile-feed-actions .reel-action,
.mobile-feed-actions .action-count,
.mobile-feed-actions .reel-play-count {
  color:var(--text);
}
.mobile-feed-actions .reel-action.active {
  color:var(--accent);
}
.mobile-feed-actions-left,
.mobile-feed-actions-right {
  display:flex;
  align-items:center;
  gap:16px;
}
.mobile-feed-identity {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mobile-feed-identity-main {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.mobile-feed-identity-main .caption-avatar {
  width:40px;
  height:40px;
  flex:none;
  padding:0;
  display:block;
}
.mobile-feed-identity-main .avatar {
  width:40px;
  height:40px;
  flex:none;
  overflow:hidden;
}
.mobile-feed-identity-copy {
  display:grid;
  gap:2px;
  min-width:0;
}
.mobile-feed-identity-copy strong {
  font-size:17px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobile-feed-identity-copy button {
  justify-self:start;
  color:var(--muted);
  font-size:13px;
}
.mobile-feed-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  color:var(--muted);
  font-size:12px;
}
.mobile-feed-transport {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:4px;
  padding-top:8px;
}
.mobile-feed-transport-right {
  display:flex;
  align-items:center;
  gap:18px;
}
.mobile-feed-transport button {
  color:var(--muted);
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
}
.mobile-feed-transport button.active { color:var(--accent); }
.mobile-feed-transport svg { width:20px; height:20px; }

/* Create Page 5-column card grid + mixx version history */
.create-card-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px 16px;
}
@media(max-width:1200px) { .create-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .create-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; } }
.create-card {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.create-card-media {
  position:relative;
  width:100%;
  aspect-ratio:1;
  background:var(--surface);
  overflow:hidden;
}
.create-card-media>.art {
  width:100%;
  height:100%;
  border-radius:0;
}
.create-card-play {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(5,8,5,.86);
  color:#fff;
  border:1px solid #ffffff38;
  font-size:16px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.create-card-media:hover .create-card-play,
.create-card-media:focus-within .create-card-play {
  opacity:1;
  pointer-events:auto;
}
.create-card-select {
  position:absolute;
  top:8px;
  right:8px;
  width:30px;
  height:30px;
  border-radius:4px;
  display:grid;
  place-items:center;
  background:rgba(5,8,5,.82);
  color:#fff;
  border:1px solid #ffffff38;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.create-card-media:hover .create-card-select,
.create-card-media:focus-within .create-card-select,
.create-card-select.selected,
.create-select-mode .create-card-select {
  opacity:1;
  pointer-events:auto;
}
.create-card-select.selected {
  background:var(--accent);
  color:#050805;
  border-color:var(--accent);
}
.create-card.selected .create-card-media {
  box-shadow:inset 0 0 0 2px var(--accent);
}
.create-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:4px;
}
.create-card-head strong {
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.create-card-meta,
.create-card-saved {
  font-size:11px;
  color:var(--muted);
  line-height:1.35;
}
.create-card-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-top:4px;
}
.create-card-actions>.pill {
  padding:7px 12px;
  font-size:12px;
  border-radius:4px;
  background:#121b13;
  border:1px solid #ffffff22;
}
.mixx-brand-cover {
  display:grid;
  place-items:center;
  background:#d400ff;
  color:#050805;
  font-family:"Space Grotesk",sans-serif;
  font-size:38px;
  font-weight:800;
  letter-spacing:-1.5px;
}

.material-symbols-outlined {
  font-family:"Material Symbols Outlined";
  font-weight:normal;
  font-style:normal;
  font-size:18px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  vertical-align:middle;
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.row-like.active .material-symbols-outlined,
.reel-action.active .material-symbols-outlined {
  font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.pill .material-symbols-outlined { font-size:16px; }
.icon-button .material-symbols-outlined { font-size:20px; }

.mobile-feed-scroller {
  height:100%;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
}
.mobile-feed-slide {
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:var(--background);
}
.mobile-feed-bottom-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mobile-feed-bottom-row .mobile-feed-tags {
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  flex-wrap:nowrap;
}
.mobile-feed-bottom-row .mobile-feed-transport {
  margin-top:0;
  padding-top:0;
  flex:none;
}
.mobile-mini-player {
  display:none;
}
@media(max-width:600px) {
  .mobile-mini-player {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 10px;
    background:var(--surface);
    border-bottom:1px solid var(--line);
  }
  .mobile-mini-player[hidden] {
    display:none;
  }
  .mobile-mini-player-track {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1;
    text-align:left;
  }
  .mobile-mini-player-track .art {
    width:40px;
    height:40px;
    border-radius:4px;
    flex:none;
  }
  .mobile-mini-player-copy {
    min-width:0;
    display:grid;
    gap:1px;
  }
  .mobile-mini-player-copy strong {
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-mini-player-copy small {
    font-size:11px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-mini-player-controls {
    display:flex;
    align-items:center;
    gap:4px;
    flex:none;
  }
  .mobile-mini-player-controls button {
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    color:var(--text);
  }
  .mobile-mini-player-controls button.active {
    color:var(--accent);
  }
  .mobile-mini-player-controls svg {
    width:18px;
    height:18px;
  }
}
.mobile-feed-badge {
  position:absolute;
  top:12px;
  left:12px;
  padding:4px 10px;
  background:rgba(5,8,5,.82);
  border:1px solid #00ff964d;
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  border-radius:999px;
  z-index:2;
}

/* Right-side docked drawer for Notifications, Inbox & Conversations */
#activity-sheet,
#conversation-sheet,
#compose-sheet {
  position:fixed;
  top:64px;
  right:0;
  bottom:0;
  left:auto;
  margin:0;
  width:min(380px,100vw);
  height:calc(100dvh - 64px);
  max-height:none;
  border:0;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  border-radius:0;
  background:var(--background);
  box-shadow:-12px 0 40px #0009;
  overflow:hidden;
}
#activity-sheet::backdrop,
#conversation-sheet::backdrop,
#compose-sheet::backdrop {
  background:transparent;
  backdrop-filter:none;
}
#activity-sheet .activity-close {
  top:12px;
  right:12px;
  border-radius:2px;
  background:var(--surface);
  border:1px solid var(--line);
}
body[data-page="desktop-app"] #activity-sheet .activity-content>.page {
  padding:14px 16px 20px;
}
@media(max-width:600px) {
  #activity-sheet,
  #conversation-sheet,
  #compose-sheet {
    top:0;
    width:100vw;
    height:100dvh;
    border-left:0;
    border-top:0;
  }
}

/* Center transport controls in desktop player bar + selected track outline */
.desktop-player-bottom {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.desktop-player-bottom .desktop-transport {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
@media(max-width:960px) {
  .desktop-player-bottom .desktop-transport {
    position:static;
    left:auto;
    transform:none;
  }
}
.track-row.is-current,
.profile-track-card.is-current {
  background:rgba(0,255,150,0.06);
  box-shadow:inset 0 0 0 1.5px var(--accent);
}

/* Player bottom sheets (Comments, Info, Send to, Up Next Queue) */
#comments-sheet,
#info-sheet {
  position:fixed;
  left:0;
  right:auto;
  bottom:0;
  top:auto;
  margin:0;
  width:var(--player-width, 380px);
  max-width:100vw;
  max-height:62dvh;
  border:0;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  border-radius:0;
  background:#050805;
  box-shadow:0 -12px 40px #000b;
  overflow-y:auto;
}
#comments-sheet::backdrop,
#info-sheet::backdrop {
  background:rgba(0,0,0,.35);
  backdrop-filter:none;
}
#info-sheet.player-sheet--full {
  top:64px;
  height:calc(100dvh - 64px);
  max-height:none;
}
#info-sheet.info-sheet--center {
  inset:64px 0 0 var(--player-width, 380px);
  margin:auto;
  width:min(780px, calc(100vw - var(--player-width, 380px) - 48px));
  max-width:calc(100vw - 24px);
  height:fit-content;
  max-height:calc(100dvh - 96px);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
}
#info-sheet.info-sheet--center .share-playlist-dialog {
  padding:20px;
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
@media(max-width:600px) {
  #comments-sheet,
  #info-sheet {
    width:100vw;
    border-right:0;
    border-radius:16px 16px 0 0;
    max-height:68dvh;
  }
  #info-sheet.info-sheet--center {
    inset:0;
    margin:auto;
    width:calc(100vw - 24px);
    max-height:calc(100dvh - 32px);
    border:1px solid var(--line);
    border-radius:14px;
  }
  #info-sheet.player-sheet--full {
    top:0;
    height:100dvh;
    border-radius:0;
  }
}
.player-sheet-body {
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.send-to-rail {
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:4px 0 8px;
}
.send-to-person {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:72px;
  flex:none;
  text-align:center;
  cursor:pointer;
}
.send-to-person input[type="checkbox"] {
  position:absolute;
  top:0;
  right:6px;
  width:16px;
  height:16px;
  accent-color:var(--accent);
}
.send-to-person strong {
  font-size:12px;
  line-height:1.2;
  max-width:72px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.send-to-person small {
  font-size:11px;
  color:var(--muted);
  max-width:72px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.send-to-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.info-meta-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:12px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.info-meta-grid small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:4px;
}
.info-meta-grid strong {
  font-size:13px;
  font-weight:600;
}
.queue-sheet-mini {
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.queue-sheet-mini .art {
  width:42px;
  height:42px;
  border-radius:4px;
  flex:none;
}
.queue-sheet-mini-copy {
  min-width:0;
  flex:1;
  display:grid;
  gap:2px;
}
.queue-sheet-mini-copy strong,
.queue-sheet-mini-copy small {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.queue-sheet-mini-copy small { color:var(--muted); font-size:12px; }
.queue-sheet-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
}
.queue-sheet-num {
  width:18px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  flex:none;
}
.queue-sheet-row-btn {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
  text-align:left;
}
.queue-sheet-row-btn .art {
  width:42px;
  height:42px;
  border-radius:4px;
  flex:none;
}
.queue-sheet-row-copy {
  min-width:0;
  display:grid;
  gap:2px;
}
.queue-sheet-row-copy strong {
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.queue-sheet-row-copy small {
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Night mode signature green gradient */
.workbench,
.device,
#screen {
  background:linear-gradient(135deg,#0f2312 0%,#060d07 52%,#030603 100%);
}

/* Day / Night Theme (defaults to Day) */
body[data-theme="day"] {
  --background:#eff8f1;
  --surface:#ffffff;
  --elevated:#e2f2e6;
  --accent:#00ff96;
  --text:#0b140b;
  --muted:#4b614b;
  --line:rgba(11,20,11,0.14);
}
body[data-theme="day"] .feed-header,
body[data-theme="day"] #app-header {
  background:linear-gradient(135deg,#dff4e5 0%,#f4fbf6 60%,#ffffff 100%) !important;
  border-bottom:1px solid var(--line);
  color:var(--text);
}
body[data-theme="day"] .workbench,
body[data-theme="day"] .device,
body[data-theme="day"] #screen {
  background:linear-gradient(135deg,#d8f1df 0%,#eef9f1 52%,#ffffff 100%);
  color:var(--text);
}
body[data-theme="day"] #desktop-player {
  background:linear-gradient(180deg,#eaf7ee 0%,#f7fcf8 100%);
  color:var(--text);
}
body[data-theme="day"] #desktop-player {
  border-right-color:var(--line);
}
body[data-theme="day"] #mobile-tabbar {
  background:rgba(255,255,255,0.97);
  border-top:1px solid var(--line);
}
body[data-theme="day"] #mobile-tabbar>button[data-tab] {
  color:var(--muted);
}
body[data-theme="day"] #mobile-tabbar>button[data-tab].active {
  color:var(--text);
}
body[data-theme="day"] #comments-sheet,
body[data-theme="day"] #info-sheet,
body[data-theme="day"] #activity-sheet,
body[data-theme="day"] #conversation-sheet,
body[data-theme="day"] #compose-sheet,
body[data-theme="day"] dialog {
  background:var(--surface);
  color:var(--text);
  border-color:var(--line);
}
body[data-theme="day"] .pill,
body[data-theme="day"] .create-card-actions>.pill,
body[data-theme="day"] .playlist-action-sq,
body[data-theme="day"] .playlist-action-wide,
body[data-theme="day"] .playlist-action-pill {
  background:var(--elevated);
  color:var(--text);
  border-color:var(--line);
}
body[data-theme="day"] .pill.primary,
body[data-theme="day"] .playlist-action-sq.primary {
  background:var(--accent);
  color:#050805;
  border-color:var(--accent);
}
body[data-theme="day"] .track-row {
  border-bottom-color:var(--line);
}
body[data-theme="day"] .track-row.is-current,
body[data-theme="day"] .profile-track-card.is-current {
  background:rgba(0,158,92,0.08);
  box-shadow:inset 0 0 0 1.5px var(--accent);
}
body[data-theme="day"] .mobile-feed-slide {
  background:var(--background);
}

#desktop-player {
  position:relative;
}
.desktop-queue-overlay {
  position:absolute;
  top:auto;
  left:0;
  right:0;
  bottom:0;
  max-height:64%;
  z-index:15;
  background:var(--background);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 32px #0009;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.desktop-queue-overlay.is-full {
  top:auto;
  left:0;
  right:0;
  bottom:0;
  max-height:64%;
  max-height:none;
  border-top:0;
  box-shadow:none;
}
.desktop-queue-overlay[hidden],
.desktop-player-login[hidden] {
  display:none;
}
.desktop-player-login {
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  height:100%;
}
img.emoji {
  height:1.1em;
  width:1.1em;
  margin:0 .08em;
  vertical-align:-0.18em;
  display:inline-block;
}

#desktop-player {
  position:relative;
}
.desktop-queue-overlay {
  position:absolute;
  inset:0;
  z-index:15;
  background:var(--background);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 32px #0009;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.desktop-queue-overlay.is-full {
  inset:0;
  max-height:none;
  border-top:0;
  box-shadow:none;
}
.desktop-queue-overlay[hidden],
.desktop-player-login[hidden] {
  display:none;
}
.desktop-player-login {
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  height:100%;
}
img.emoji {
  height:1.1em;
  width:1.1em;
  margin:0 .08em;
  vertical-align:-0.18em;
  display:inline-block;
}

/* Keep desktop navigation close to logo */
@media(min-width:601px) {
  body[data-page="desktop-app"] #app-header {
    display:flex;
    align-items:center;
    gap:28px;
    padding:0 20px;
  }
  body[data-page="desktop-app"] #app-header>.wordmark {
    flex:none;
    width:auto;
  }
  body[data-page="desktop-app"] #app-header>.tabbar[data-desktop="true"] {
    flex:none;
  }
  body[data-page="desktop-app"] #app-header>.header-actions {
    margin-left:auto;
  }
}

/* Night mode signature green gradient */
.workbench,
.device,
#screen {
  background:linear-gradient(135deg,#0f2312 0%,#060d07 52%,#030603 100%);
}

/* Day / Night Theme (defaults to Day) */
body[data-theme="day"] {
  --background:#eff8f1;
  --surface:#ffffff;
  --elevated:#e2f2e6;
  --accent:#00ff96;
  --text:#0b140b;
  --muted:#4b614b;
  --line:rgba(11,20,11,0.14);
}
body[data-theme="day"] .feed-header,
body[data-theme="day"] #app-header {
  background:linear-gradient(135deg,#dff4e5 0%,#f4fbf6 60%,#ffffff 100%) !important;
  border-bottom:1px solid var(--line);
  color:var(--text);
}
body[data-theme="day"] .workbench,
body[data-theme="day"] .device,
body[data-theme="day"] #screen {
  background:linear-gradient(135deg,#d8f1df 0%,#eef9f1 52%,#ffffff 100%);
  color:var(--text);
}
body[data-theme="day"] #desktop-player {
  background:linear-gradient(180deg,#eaf7ee 0%,#f7fcf8 100%);
  color:var(--text);
}
body[data-theme="day"] #desktop-player {
  border-right-color:var(--line);
}
body[data-theme="day"] #mobile-tabbar {
  background:rgba(255,255,255,0.97);
  border-top:1px solid var(--line);
}
body[data-theme="day"] #mobile-tabbar>button[data-tab] {
  color:var(--muted);
}
body[data-theme="day"] #mobile-tabbar>button[data-tab].active {
  color:var(--text);
}
body[data-theme="day"] #comments-sheet,
body[data-theme="day"] #info-sheet,
body[data-theme="day"] #activity-sheet,
body[data-theme="day"] dialog {
  background:var(--surface);
  color:var(--text);
  border-color:var(--line);
}
body[data-theme="day"] .pill,
body[data-theme="day"] .create-card-actions>.pill,
body[data-theme="day"] .playlist-action-sq,
body[data-theme="day"] .playlist-action-wide,
body[data-theme="day"] .playlist-action-pill {
  background:var(--elevated);
  color:var(--text);
  border-color:var(--line);
}
body[data-theme="day"] .pill.primary,
body[data-theme="day"] .playlist-action-sq.primary {
  background:var(--accent);
  color:#050805;
  border-color:var(--accent);
}
body[data-theme="day"] .track-row {
  border-bottom-color:var(--line);
}
body[data-theme="day"] .track-row.is-current,
body[data-theme="day"] .profile-track-card.is-current {
  background:rgba(0,158,92,0.08);
  box-shadow:inset 0 0 0 1.5px var(--accent);
}
body[data-theme="day"] .mobile-feed-slide {
  background:var(--background);
}

#desktop-player {
  position:relative;
}
.desktop-queue-overlay {
  position:absolute;
  top:auto;
  left:0;
  right:0;
  bottom:0;
  max-height:64%;
  z-index:15;
  background:var(--background);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 32px #0009;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.desktop-queue-overlay.is-full {
  top:auto;
  left:0;
  right:0;
  bottom:0;
  max-height:64%;
  max-height:none;
  border-top:0;
  box-shadow:none;
}
.desktop-queue-overlay[hidden],
.desktop-player-login[hidden] {
  display:none;
}
.desktop-player-login {
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  height:100%;
}
img.emoji {
  height:1.1em;
  width:1.1em;
  margin:0 .08em;
  vertical-align:-0.18em;
  display:inline-block;
}

#desktop-player {
  position:relative;
}
.desktop-queue-overlay {
  position:absolute;
  inset:0;
  z-index:15;
  background:var(--background);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 32px #0009;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.desktop-queue-overlay.is-full {
  inset:0;
  max-height:none;
  border-top:0;
  box-shadow:none;
}
.desktop-queue-overlay[hidden],
.desktop-player-login[hidden] {
  display:none;
}
.desktop-player-login {
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  height:100%;
}
img.emoji {
  height:1.1em;
  width:1.1em;
  margin:0 .08em;
  vertical-align:-0.18em;
  display:inline-block;
}

.home-genre-playlist {
  position:relative;
  display:block;
  min-width:0;
  aspect-ratio:1;
  padding:0;
  text-align:left;
  overflow:hidden;
  border-radius:14px;
}
.home-genre-playlist>.category-playlist-art {
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border-radius:0;
}
.home-genre-playlist::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,8,5,0) 38%,rgba(5,8,5,.86) 100%);
  pointer-events:none;
}
.home-genre-playlist-overlay {
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:3px;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  pointer-events:none;
}
.home-genre-playlist-overlay>small {
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.home-genre-playlist-overlay>strong {
  font:700 18px/1.15 Arial,sans-serif;
  color:#fff;
}
@media(max-width:600px) {
  body[data-page="desktop-app"] .home-page {
    display:block;
    padding:16px 14px 28px;
  }
  body[data-page="desktop-app"] .home-page .home-shelf {
    margin:0 0 26px;
  }
  body[data-page="desktop-app"] .home-rotation-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  body[data-page="desktop-app"] .home-rotation-grid .album-card {
    padding:6px;
    min-height:56px;
  }
  body[data-page="desktop-app"] .home-genre-playlist-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:0;
  }
  body[data-page="desktop-app"] .home-library-rail {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    overflow:visible;
    padding-bottom:0;
  }
  body[data-page="desktop-app"] .home-library-card {
    width:100%;
    min-width:0;
  }
  body[data-page="desktop-app"] .home-library-card>.art-mosaic {
    width:100%;
    height:auto;
    aspect-ratio:1;
    border-radius:10px;
  }
  body[data-page="desktop-app"] .home-music-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px 8px;
  }
  body[data-page="desktop-app"] .home-music-grid .album-card {
    padding:0;
  }
  body[data-page="desktop-app"] .home-music-grid .album-card>.art {
    border-radius:10px;
  }
  body[data-page="desktop-app"] .home-page .creator-rail {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px 8px;
  }
}
.profile-shell .pill:not(.primary) {
  background:rgba(255,255,255,.12);
  color:var(--profile-text,#fff);
  border-color:rgba(255,255,255,.22);
}
.profile-shell .pill:not(.primary):hover {
  background:rgba(255,255,255,.2);
}
.desktop-player-login.is-recommended {
  justify-content:flex-start;
  overflow-y:auto;
  padding:16px;
}
.desktop-recommended-rows {
  display:grid;
  gap:4px;
}
.edit-profile-grid {
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(320px,1.5fr);
  gap:28px;
  align-items:start;
}
.edit-cover-column {
  position:sticky;
  top:16px;
}
@media(max-width:760px) {
  .edit-profile-grid {
    grid-template-columns:minmax(0,1fr) !important;
    gap:18px !important;
  }
  .edit-cover-column {
    position:static;
    max-width:340px;
    width:100%;
    margin:0 auto;
  }
}
.device > .app-cart {
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:45;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:120px;
  min-height:44px;
  padding:10px 18px;
  border:1px solid rgba(0,255,150,.65);
  border-radius:8px;
  background:var(--accent);
  color:#071307;
  font-size:13px;
  font-weight:700;
  box-shadow:0 6px 20px #0006;
  cursor:pointer;
}
.device > .app-cart[hidden] {
  display:none;
}
@media(max-width:600px) {
  .device > .app-cart {
    left:50%;
    right:auto;
    transform:translateX(-50%);
    bottom:calc(74px + env(safe-area-inset-bottom));
  }
}
.license-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px;
  display:grid;
  gap:14px;
}
.license-grid-3 {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.license-grid-4 {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
@media(max-width:760px) {
  .license-grid-3, .license-grid-4 {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:480px) {
  .license-grid-3, .license-grid-4 {
    grid-template-columns:minmax(0,1fr);
  }
}
.caption-heading .artist-link,
.caption-heading .player-artist-links,
.mobile-feed-identity-copy button {
  padding:0;
  margin:0;
  text-align:left;
  justify-content:flex-start;
}
.playlist-drop-target {
  transition:outline 120ms ease, background 120ms ease, transform 120ms ease;
}
.playlist-drop-target.drag-over {
  outline:2px dashed var(--accent);
  outline-offset:4px;
  background:rgba(16, 255, 136, 0.08);
  border-radius:10px;
}
.create-card[draggable="true"] {
  cursor:grab;
}
.create-card[draggable="true"]:active {
  cursor:grabbing;
}
.share-playlist-cols {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:20px;
}
@media(max-width:680px) {
  .share-playlist-cols {
    grid-template-columns:minmax(0,1fr);
  }
}
.share-select-wrap {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
}
.share-access-card {
  padding:14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
}
.share-settings-box {
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  overflow:hidden;
}
.share-toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  cursor:pointer;
}
.share-toggle-row + .share-toggle-row {
  border-top:1px solid var(--line);
}
.share-toggle-row strong {
  display:block;
  font-size:13px;
}
.share-toggle-row small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:2px;
}
.share-switch {
  appearance:none;
  width:38px;
  height:22px;
  border-radius:4px;
  background:var(--elevated);
  border:1px solid var(--line);
  position:relative;
  flex:none;
  cursor:pointer;
  transition:background 140ms ease;
}
.share-switch::after {
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:2px;
  background:var(--text);
  transition:transform 140ms ease;
}
.share-switch:checked {
  background:var(--accent);
  border-color:var(--accent);
}
.share-switch:checked::after {
  transform:translateX(16px);
  background:#07130d;
}
.share-private-btn {
  width:100%;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  color:#ff6b7a;
  font-weight:600;
  font-size:13px;
  text-align:center;
  cursor:pointer;
}
.share-private-btn:hover {
  background:rgba(255,107,122,0.08);
}
.row-select-btn {
  display:grid;
  place-items:center;
  width:0;
  opacity:0;
  overflow:hidden;
  margin-right:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  flex:none;
  transition:width 120ms ease, opacity 120ms ease, margin-right 120ms ease, color 120ms ease;
}
.track-row:hover .row-select-btn,
.track-row.is-current .row-select-btn,
.track-row.selected .row-select-btn,
.library-select-active .row-select-btn {
  width:28px;
  opacity:1;
  margin-right:6px;
}
.row-select-btn.selected,
.row-select-btn:hover {
  color:var(--accent);
}
.profile-square-track-card {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  text-align:left;
  min-width:0;
  overflow:hidden;
}
.profile-square-track-card strong {
  margin:0;
  line-height:1.2;
}
.profile-square-track-card small {
  line-height:1.2;
}
.profile-square-track-card .icon-button {
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  padding:0;
}
.profile-square-track-card .row-like {
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  gap:3px;
}
.profile-square-art {
  width:100%;
  aspect-ratio:1;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  border-radius:10px;
}
.profile-square-art > .art {
  width:100%;
  height:100%;
  border-radius:10px;
}
#edit-cover-box > .art {
  width:100%;
  height:100%;
}
.version-history-thumb {
  width:76px;
  height:76px;
  flex:none;
  border-radius:8px;
  overflow:hidden;
}
.version-history-thumb > .art {
  width:100%;
  height:100%;
  border-radius:8px;
}
.create-card-head .icon-button {
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  padding:2px;
}
.profile-popular-list {
  --track-row-gutter:0px;
  border-top:1px solid var(--line);
}
.profile-popular-list .track-row {
  border-bottom:1px solid var(--line);
  margin:0;
  width:100%;
  padding:6px 4px;
}
.profile-square-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px 12px;
}
.profile-section--likes .profile-track-list {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px;
  max-width:100%;
}
@container(min-width:940px) {
  .profile-music-layout.profile-music-layout--all {
    grid-template-columns:minmax(0,1.35fr) minmax(0,1.35fr) minmax(190px,240px);
    grid-template-rows:auto 1fr;
    gap:22px;
    align-items:start;
  }
  .profile-music-layout--all > .profile-section--popular {
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--featured {
    grid-column:2;
    grid-row:1;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--latest {
    grid-column:1 / 3;
    grid-row:2;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--likes {
    grid-column:3;
    grid-row:1 / span 2;
    min-width:0;
  }
  .profile-music-layout--all .profile-section--likes .profile-track-list {
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px;
    max-width:240px;
  }
  .profile-music-layout--all .profile-square-grid.profile-square-grid--wide {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(max-width:760px) {
  .library-release-hero {
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }
  .library-release-hero .release-cover-column {
    max-width:280px;
    width:100%;
    margin:0 auto;
  }
  .library-release-hero .release-details {
    width:100%;
    min-width:0;
    justify-items:stretch !important;
  }
  .library-release-hero .release-details h2 {
    font-size:22px !important;
    overflow-wrap:anywhere;
  }
  .library-release-hero .release-details [data-share-playlist],
  .library-release-hero .release-details [data-playlist-add] {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}
@media(max-width:600px) {
  .info-meta-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .profile-square-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
  }
  .version-history-page .settings-heading {
    flex-wrap:wrap;
    gap:12px;
  }
}
.row-drag-handle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:grab;
  opacity:.55;
  flex:none;
  padding:6px 4px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.row-drag-handle:active {
  cursor:grabbing;
}
.track-row:hover .row-drag-handle {
  opacity:1;
}
.row-drag-handle svg {
  pointer-events:none;
}
.track-row[data-playlist-reorder-row] {
  user-select:none;
  -webkit-user-select:none;
}
.track-row.is-dragging {
  opacity:.45;
  background:rgba(0,255,140,.08);
}
.track-row.drag-insert-before {
  box-shadow:inset 0 3px 0 var(--accent);
}
.track-row.drag-insert-after {
  box-shadow:inset 0 -3px 0 var(--accent);
}
.pl-add-square-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(124px,1fr));
  gap:12px;
  max-height:420px;
  overflow:auto;
  padding-right:2px;
}
@media(max-width:600px) {
  .row-drag-handle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:grab;
  opacity:.55;
  flex:none;
  padding:6px 4px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.row-drag-handle:active {
  cursor:grabbing;
}
.track-row:hover .row-drag-handle {
  opacity:1;
}
.row-drag-handle svg {
  pointer-events:none;
}
.track-row[data-playlist-reorder-row] {
  user-select:none;
  -webkit-user-select:none;
}
.track-row.is-dragging {
  opacity:.45;
  background:rgba(0,255,140,.08);
}
.track-row.drag-insert-before {
  box-shadow:inset 0 3px 0 var(--accent);
}
.track-row.drag-insert-after {
  box-shadow:inset 0 -3px 0 var(--accent);
}
.pl-add-square-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.pl-add-square-card {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.pl-add-square-art {
  width:100%;
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
}
.pl-add-square-art > .art {
  width:100%;
  height:100%;
  border-radius:8px;
}
.pl-add-square-card > strong {
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pl-add-square-card > small {
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#info-sheet.info-sheet--center.info-sheet--compact {
  width:min(440px,calc(100vw - 24px));
}
.playlist-drop-target {
  transition:outline 120ms ease, background 120ms ease, transform 120ms ease;
}
.playlist-drop-target.drag-over {
  outline:2px dashed var(--accent);
  outline-offset:4px;
  background:rgba(16, 255, 136, 0.08);
  border-radius:10px;
}
.create-card[draggable="true"] {
  cursor:grab;
}
.create-card[draggable="true"]:active {
  cursor:grabbing;
}
.share-playlist-cols {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:20px;
}
@media(max-width:680px) {
  .share-playlist-cols {
    grid-template-columns:minmax(0,1fr);
  }
}
.share-select-wrap {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
}
.share-access-card {
  padding:14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
}
.share-settings-box {
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  overflow:hidden;
}
.share-toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  cursor:pointer;
}
.share-toggle-row + .share-toggle-row {
  border-top:1px solid var(--line);
}
.share-toggle-row strong {
  display:block;
  font-size:13px;
}
.share-toggle-row small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:2px;
}
.share-switch {
  appearance:none;
  width:38px;
  height:22px;
  border-radius:4px;
  background:var(--elevated);
  border:1px solid var(--line);
  position:relative;
  flex:none;
  cursor:pointer;
  transition:background 140ms ease;
}
.share-switch::after {
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:2px;
  background:var(--text);
  transition:transform 140ms ease;
}
.share-switch:checked {
  background:var(--accent);
  border-color:var(--accent);
}
.share-switch:checked::after {
  transform:translateX(16px);
  background:#07130d;
}
.share-private-btn {
  width:100%;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  color:#ff6b7a;
  font-weight:600;
  font-size:13px;
  text-align:center;
  cursor:pointer;
}
.share-private-btn:hover {
  background:rgba(255,107,122,0.08);
}
.row-select-btn {
  display:grid;
  place-items:center;
  width:0;
  opacity:0;
  overflow:hidden;
  margin-right:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  flex:none;
  transition:width 120ms ease, opacity 120ms ease, margin-right 120ms ease, color 120ms ease;
}
.track-row:hover .row-select-btn,
.track-row.is-current .row-select-btn,
.track-row.selected .row-select-btn,
.library-select-active .row-select-btn {
  width:28px;
  opacity:1;
  margin-right:6px;
}
.row-select-btn.selected,
.row-select-btn:hover {
  color:var(--accent);
}
.profile-square-track-card {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  text-align:left;
  min-width:0;
  overflow:hidden;
}
.profile-square-track-card strong {
  margin:0;
  line-height:1.2;
}
.profile-square-track-card small {
  line-height:1.2;
}
.profile-square-track-card .icon-button {
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  padding:0;
}
.profile-square-track-card .row-like {
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  gap:3px;
}
.profile-square-art {
  width:100%;
  aspect-ratio:1;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  border-radius:10px;
}
.profile-square-art > .art {
  width:100%;
  height:100%;
  border-radius:10px;
}
#edit-cover-box > .art {
  width:100%;
  height:100%;
}
.version-history-thumb {
  width:76px;
  height:76px;
  flex:none;
  border-radius:8px;
  overflow:hidden;
}
.version-history-thumb > .art {
  width:100%;
  height:100%;
  border-radius:8px;
}
.create-card-head .icon-button {
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  padding:2px;
}
.profile-popular-list {
  --track-row-gutter:0px;
  border-top:1px solid var(--line);
}
.profile-popular-list .track-row {
  border-bottom:1px solid var(--line);
  margin:0;
  width:100%;
  padding:6px 4px;
}
.profile-square-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px 12px;
}
.profile-section--likes .profile-track-list {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px;
  max-width:100%;
}
@container(min-width:940px) {
  .profile-music-layout.profile-music-layout--all {
    grid-template-columns:minmax(0,1.35fr) minmax(0,1.35fr) minmax(190px,240px);
    grid-template-rows:auto 1fr;
    gap:22px;
    align-items:start;
  }
  .profile-music-layout--all > .profile-section--popular {
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--featured {
    grid-column:2;
    grid-row:1;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--latest {
    grid-column:1 / 3;
    grid-row:2;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--likes {
    grid-column:3;
    grid-row:1 / span 2;
    min-width:0;
  }
  .profile-music-layout--all .profile-section--likes .profile-track-list {
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px;
    max-width:240px;
  }
  .profile-music-layout--all .profile-square-grid.profile-square-grid--wide {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(max-width:760px) {
  .library-release-hero {
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }
  .library-release-hero .release-cover-column {
    max-width:280px;
    width:100%;
    margin:0 auto;
  }
  .library-release-hero .release-details {
    width:100%;
    min-width:0;
    justify-items:stretch !important;
  }
  .library-release-hero .release-details h2 {
    font-size:22px !important;
    overflow-wrap:anywhere;
  }
  .library-release-hero .release-details [data-share-playlist],
  .library-release-hero .release-details [data-playlist-add] {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}
@media(max-width:600px) {
  .info-meta-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .profile-square-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
  }
  .version-history-page .settings-heading {
    flex-wrap:wrap;
    gap:12px;
  }
}
.row-drag-handle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:grab;
  opacity:.55;
  flex:none;
  padding:6px 4px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.row-drag-handle:active {
  cursor:grabbing;
}
.track-row:hover .row-drag-handle {
  opacity:1;
}
.row-drag-handle svg {
  pointer-events:none;
}
.track-row[data-playlist-reorder-row] {
  user-select:none;
  -webkit-user-select:none;
}
.track-row.is-dragging {
  opacity:.45;
  background:rgba(0,255,140,.08);
}
.track-row.drag-insert-before {
  box-shadow:inset 0 3px 0 var(--accent);
}
.track-row.drag-insert-after {
  box-shadow:inset 0 -3px 0 var(--accent);
}
.pl-add-square-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(124px,1fr));
  gap:12px;
  max-height:420px;
  overflow:auto;
  padding-right:2px;
}
@media(max-width:600px) {
  .row-drag-handle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:grab;
  opacity:.55;
  flex:none;
  padding:6px 4px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.row-drag-handle:active {
  cursor:grabbing;
}
.track-row:hover .row-drag-handle {
  opacity:1;
}
.row-drag-handle svg {
  pointer-events:none;
}
.track-row[data-playlist-reorder-row] {
  user-select:none;
  -webkit-user-select:none;
}
.track-row.is-dragging {
  opacity:.45;
  background:rgba(0,255,140,.08);
}
.track-row.drag-insert-before {
  box-shadow:inset 0 3px 0 var(--accent);
}
.track-row.drag-insert-after {
  box-shadow:inset 0 -3px 0 var(--accent);
}
.pl-add-square-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.pl-add-square-card {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.pl-add-square-art {
  width:100%;
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
}
.pl-add-square-art > .art {
  width:100%;
  height:100%;
  border-radius:8px;
}
.pl-add-square-card > strong {
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pl-add-square-card > small {
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#info-sheet.info-sheet--center.info-sheet--compact {
  width:min(440px,calc(100vw - 24px));
}
.device > .app-cart {
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:45;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:120px;
  min-height:44px;
  padding:10px 18px;
  border:1px solid rgba(0,255,150,.65);
  border-radius:8px;
  background:var(--accent);
  color:#071307;
  font-size:13px;
  font-weight:700;
  box-shadow:0 6px 20px #0006;
  cursor:pointer;
}
.device > .app-cart[hidden] {
  display:none;
}
@media(max-width:600px) {
  .device > .app-cart {
    left:50%;
    right:auto;
    transform:translateX(-50%);
    bottom:calc(74px + env(safe-area-inset-bottom));
  }
}
.license-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px;
  display:grid;
  gap:14px;
}
.license-grid-3 {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.license-grid-4 {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
@media(max-width:760px) {
  .license-grid-3, .license-grid-4 {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:480px) {
  .license-grid-3, .license-grid-4 {
    grid-template-columns:minmax(0,1fr);
  }
}
.caption-heading .artist-link,
.caption-heading .player-artist-links,
.mobile-feed-identity-copy button {
  padding:0;
  margin:0;
  text-align:left;
  justify-content:flex-start;
}
.playlist-drop-target {
  transition:outline 120ms ease, background 120ms ease, transform 120ms ease;
}
.playlist-drop-target.drag-over {
  outline:2px dashed var(--accent);
  outline-offset:4px;
  background:rgba(16, 255, 136, 0.08);
  border-radius:10px;
}
.create-card[draggable="true"] {
  cursor:grab;
}
.create-card[draggable="true"]:active {
  cursor:grabbing;
}
.share-playlist-cols {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:20px;
}
@media(max-width:680px) {
  .share-playlist-cols {
    grid-template-columns:minmax(0,1fr);
  }
}
.share-select-wrap {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
}
.share-access-card {
  padding:14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
}
.share-settings-box {
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  overflow:hidden;
}
.share-toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  cursor:pointer;
}
.share-toggle-row + .share-toggle-row {
  border-top:1px solid var(--line);
}
.share-toggle-row strong {
  display:block;
  font-size:13px;
}
.share-toggle-row small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:2px;
}
.share-switch {
  appearance:none;
  width:38px;
  height:22px;
  border-radius:4px;
  background:var(--elevated);
  border:1px solid var(--line);
  position:relative;
  flex:none;
  cursor:pointer;
  transition:background 140ms ease;
}
.share-switch::after {
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:2px;
  background:var(--text);
  transition:transform 140ms ease;
}
.share-switch:checked {
  background:var(--accent);
  border-color:var(--accent);
}
.share-switch:checked::after {
  transform:translateX(16px);
  background:#07130d;
}
.share-private-btn {
  width:100%;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  color:#ff6b7a;
  font-weight:600;
  font-size:13px;
  text-align:center;
  cursor:pointer;
}
.share-private-btn:hover {
  background:rgba(255,107,122,0.08);
}
.row-select-btn {
  display:grid;
  place-items:center;
  width:0;
  opacity:0;
  overflow:hidden;
  margin-right:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  flex:none;
  transition:width 120ms ease, opacity 120ms ease, margin-right 120ms ease, color 120ms ease;
}
.track-row:hover .row-select-btn,
.track-row.is-current .row-select-btn,
.track-row.selected .row-select-btn,
.library-select-active .row-select-btn {
  width:28px;
  opacity:1;
  margin-right:6px;
}
.row-select-btn.selected,
.row-select-btn:hover {
  color:var(--accent);
}
.profile-square-track-card {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  text-align:left;
  min-width:0;
  overflow:hidden;
}
.profile-square-track-card strong {
  margin:0;
  line-height:1.2;
}
.profile-square-track-card small {
  line-height:1.2;
}
.profile-square-track-card .icon-button {
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  padding:0;
}
.profile-square-track-card .row-like {
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  gap:3px;
}
.profile-square-art {
  width:100%;
  aspect-ratio:1;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  border-radius:10px;
}
.profile-square-art > .art {
  width:100%;
  height:100%;
  border-radius:10px;
}
#edit-cover-box > .art {
  width:100%;
  height:100%;
}
.version-history-thumb {
  width:76px;
  height:76px;
  flex:none;
  border-radius:8px;
  overflow:hidden;
}
.version-history-thumb > .art {
  width:100%;
  height:100%;
  border-radius:8px;
}
.create-card-head .icon-button {
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  padding:2px;
}
.profile-popular-list {
  --track-row-gutter:0px;
  border-top:1px solid var(--line);
}
.profile-popular-list .track-row {
  border-bottom:1px solid var(--line);
  margin:0;
  width:100%;
  padding:6px 4px;
}
.profile-square-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px 12px;
}
.profile-section--likes .profile-track-list {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px;
  max-width:100%;
}
@container(min-width:940px) {
  .profile-music-layout.profile-music-layout--all {
    grid-template-columns:minmax(0,1.35fr) minmax(0,1.35fr) minmax(190px,240px);
    grid-template-rows:auto 1fr;
    gap:22px;
    align-items:start;
  }
  .profile-music-layout--all > .profile-section--popular {
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--featured {
    grid-column:2;
    grid-row:1;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--latest {
    grid-column:1 / 3;
    grid-row:2;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--likes {
    grid-column:3;
    grid-row:1 / span 2;
    min-width:0;
  }
  .profile-music-layout--all .profile-section--likes .profile-track-list {
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px;
    max-width:240px;
  }
  .profile-music-layout--all .profile-square-grid.profile-square-grid--wide {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(max-width:760px) {
  .library-release-hero {
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }
  .library-release-hero .release-cover-column {
    max-width:280px;
    width:100%;
    margin:0 auto;
  }
  .library-release-hero .release-details {
    width:100%;
    min-width:0;
    justify-items:stretch !important;
  }
  .library-release-hero .release-details h2 {
    font-size:22px !important;
    overflow-wrap:anywhere;
  }
  .library-release-hero .release-details [data-share-playlist],
  .library-release-hero .release-details [data-playlist-add] {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}
@media(max-width:600px) {
  .info-meta-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .profile-square-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
  }
  .version-history-page .settings-heading {
    flex-wrap:wrap;
    gap:12px;
  }
}
.row-drag-handle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:grab;
  opacity:.55;
  flex:none;
  padding:6px 4px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.row-drag-handle:active {
  cursor:grabbing;
}
.track-row:hover .row-drag-handle {
  opacity:1;
}
.row-drag-handle svg {
  pointer-events:none;
}
.track-row[data-playlist-reorder-row] {
  user-select:none;
  -webkit-user-select:none;
}
.track-row.is-dragging {
  opacity:.45;
  background:rgba(0,255,140,.08);
}
.track-row.drag-insert-before {
  box-shadow:inset 0 3px 0 var(--accent);
}
.track-row.drag-insert-after {
  box-shadow:inset 0 -3px 0 var(--accent);
}
.pl-add-square-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(124px,1fr));
  gap:12px;
  max-height:420px;
  overflow:auto;
  padding-right:2px;
}
@media(max-width:600px) {
  .row-drag-handle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:grab;
  opacity:.55;
  flex:none;
  padding:6px 4px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.row-drag-handle:active {
  cursor:grabbing;
}
.track-row:hover .row-drag-handle {
  opacity:1;
}
.row-drag-handle svg {
  pointer-events:none;
}
.track-row[data-playlist-reorder-row] {
  user-select:none;
  -webkit-user-select:none;
}
.track-row.is-dragging {
  opacity:.45;
  background:rgba(0,255,140,.08);
}
.track-row.drag-insert-before {
  box-shadow:inset 0 3px 0 var(--accent);
}
.track-row.drag-insert-after {
  box-shadow:inset 0 -3px 0 var(--accent);
}
.pl-add-square-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.pl-add-square-card {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.pl-add-square-art {
  width:100%;
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
}
.pl-add-square-art > .art {
  width:100%;
  height:100%;
  border-radius:8px;
}
.pl-add-square-card > strong {
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pl-add-square-card > small {
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#info-sheet.info-sheet--center.info-sheet--compact {
  width:min(440px,calc(100vw - 24px));
}
.playlist-drop-target {
  transition:outline 120ms ease, background 120ms ease, transform 120ms ease;
}
.playlist-drop-target.drag-over {
  outline:2px dashed var(--accent);
  outline-offset:4px;
  background:rgba(16, 255, 136, 0.08);
  border-radius:10px;
}
.create-card[draggable="true"] {
  cursor:grab;
}
.create-card[draggable="true"]:active {
  cursor:grabbing;
}
.share-playlist-cols {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:20px;
}
@media(max-width:680px) {
  .share-playlist-cols {
    grid-template-columns:minmax(0,1fr);
  }
}
.share-select-wrap {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
}
.share-access-card {
  padding:14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
}
.share-settings-box {
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  overflow:hidden;
}
.share-toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  cursor:pointer;
}
.share-toggle-row + .share-toggle-row {
  border-top:1px solid var(--line);
}
.share-toggle-row strong {
  display:block;
  font-size:13px;
}
.share-toggle-row small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:2px;
}
.share-switch {
  appearance:none;
  width:38px;
  height:22px;
  border-radius:4px;
  background:var(--elevated);
  border:1px solid var(--line);
  position:relative;
  flex:none;
  cursor:pointer;
  transition:background 140ms ease;
}
.share-switch::after {
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:2px;
  background:var(--text);
  transition:transform 140ms ease;
}
.share-switch:checked {
  background:var(--accent);
  border-color:var(--accent);
}
.share-switch:checked::after {
  transform:translateX(16px);
  background:#07130d;
}
.share-private-btn {
  width:100%;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  color:#ff6b7a;
  font-weight:600;
  font-size:13px;
  text-align:center;
  cursor:pointer;
}
.share-private-btn:hover {
  background:rgba(255,107,122,0.08);
}
.row-select-btn {
  display:grid;
  place-items:center;
  width:0;
  opacity:0;
  overflow:hidden;
  margin-right:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  flex:none;
  transition:width 120ms ease, opacity 120ms ease, margin-right 120ms ease, color 120ms ease;
}
.track-row:hover .row-select-btn,
.track-row.is-current .row-select-btn,
.track-row.selected .row-select-btn,
.library-select-active .row-select-btn {
  width:28px;
  opacity:1;
  margin-right:6px;
}
.row-select-btn.selected,
.row-select-btn:hover {
  color:var(--accent);
}
.profile-square-track-card {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  text-align:left;
  min-width:0;
  overflow:hidden;
}
.profile-square-track-card strong {
  margin:0;
  line-height:1.2;
}
.profile-square-track-card small {
  line-height:1.2;
}
.profile-square-track-card .icon-button {
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  padding:0;
}
.profile-square-track-card .row-like {
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  gap:3px;
}
.profile-square-art {
  width:100%;
  aspect-ratio:1;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  border-radius:10px;
}
.profile-square-art > .art {
  width:100%;
  height:100%;
  border-radius:10px;
}
#edit-cover-box > .art {
  width:100%;
  height:100%;
}
.version-history-thumb {
  width:76px;
  height:76px;
  flex:none;
  border-radius:8px;
  overflow:hidden;
}
.version-history-thumb > .art {
  width:100%;
  height:100%;
  border-radius:8px;
}
.create-card-head .icon-button {
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  padding:2px;
}
.profile-popular-list {
  --track-row-gutter:0px;
  border-top:1px solid var(--line);
}
.profile-popular-list .track-row {
  border-bottom:1px solid var(--line);
  margin:0;
  width:100%;
  padding:6px 4px;
}
.profile-square-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px 12px;
}
.profile-section--likes .profile-track-list {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px;
  max-width:100%;
}
@container(min-width:940px) {
  .profile-music-layout.profile-music-layout--all {
    grid-template-columns:minmax(0,1.35fr) minmax(0,1.35fr) minmax(190px,240px);
    grid-template-rows:auto 1fr;
    gap:22px;
    align-items:start;
  }
  .profile-music-layout--all > .profile-section--popular {
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--featured {
    grid-column:2;
    grid-row:1;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--latest {
    grid-column:1 / 3;
    grid-row:2;
    min-width:0;
  }
  .profile-music-layout--all > .profile-section--likes {
    grid-column:3;
    grid-row:1 / span 2;
    min-width:0;
  }
  .profile-music-layout--all .profile-section--likes .profile-track-list {
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px;
    max-width:240px;
  }
  .profile-music-layout--all .profile-square-grid.profile-square-grid--wide {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(max-width:760px) {
  .library-release-hero {
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }
  .library-release-hero .release-cover-column {
    max-width:280px;
    width:100%;
    margin:0 auto;
  }
  .library-release-hero .release-details {
    width:100%;
    min-width:0;
    justify-items:stretch !important;
  }
  .library-release-hero .release-details h2 {
    font-size:22px !important;
    overflow-wrap:anywhere;
  }
  .library-release-hero .release-details [data-share-playlist],
  .library-release-hero .release-details [data-playlist-add] {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}
@media(max-width:600px) {
  .info-meta-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .profile-square-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
  }
  .version-history-page .settings-heading {
    flex-wrap:wrap;
    gap:12px;
  }
}
.row-drag-handle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:grab;
  opacity:.55;
  flex:none;
  padding:6px 4px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.row-drag-handle:active {
  cursor:grabbing;
}
.track-row:hover .row-drag-handle {
  opacity:1;
}
.row-drag-handle svg {
  pointer-events:none;
}
.track-row[data-playlist-reorder-row] {
  user-select:none;
  -webkit-user-select:none;
}
.track-row.is-dragging {
  opacity:.45;
  background:rgba(0,255,140,.08);
}
.track-row.drag-insert-before {
  box-shadow:inset 0 3px 0 var(--accent);
}
.track-row.drag-insert-after {
  box-shadow:inset 0 -3px 0 var(--accent);
}
.pl-add-square-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(124px,1fr));
  gap:12px;
  max-height:420px;
  overflow:auto;
  padding-right:2px;
}
@media(max-width:600px) {
  .row-drag-handle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:grab;
  opacity:.55;
  flex:none;
  padding:6px 4px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.row-drag-handle:active {
  cursor:grabbing;
}
.track-row:hover .row-drag-handle {
  opacity:1;
}
.row-drag-handle svg {
  pointer-events:none;
}
.track-row[data-playlist-reorder-row] {
  user-select:none;
  -webkit-user-select:none;
}
.track-row.is-dragging {
  opacity:.45;
  background:rgba(0,255,140,.08);
}
.track-row.drag-insert-before {
  box-shadow:inset 0 3px 0 var(--accent);
}
.track-row.drag-insert-after {
  box-shadow:inset 0 -3px 0 var(--accent);
}
.pl-add-square-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.pl-add-square-card {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.pl-add-square-art {
  width:100%;
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
}
.pl-add-square-art > .art {
  width:100%;
  height:100%;
  border-radius:8px;
}
.pl-add-square-card > strong {
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pl-add-square-card > small {
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#info-sheet.info-sheet--center.info-sheet--compact {
  width:min(440px,calc(100vw - 24px));
}