/* -------------------------
   Player
------------------------- */
.player{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding:16px;

  display:flex;
  justify-content:center;
  gap: 22px;
  align-items:center;
}

.player-left{
  flex: 0 1 520px;
  min-width: 280px;
  display:flex;
  align-items:center;
  gap:14px;
}

.cover{
  width:90px;
  height:90px;
  border-radius:22px;
  object-fit: cover;
  background: rgba(17,24,39,.04);
  border:1px solid var(--line);
  flex: 0 0 auto;
}

.meta{ min-width:0; }

.marquee{
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}

#titleWrap .marquee-inner{
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-size: 18px;
}

#subWrap .marquee-inner{
  color: var(--muted);
  font-size: 13px;
}

.marquee.on .marquee-inner{
  display: inline-block;
  padding-left: 100%;
  animation: marquee 12s linear infinite;
}

@keyframes marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.player-right{
  flex: 0 0 var(--ctrl-width);
  width: var(--ctrl-width);
  min-width: 0;
}

.controls{
  display:grid;
  grid-template-columns: repeat(5, var(--btn-size));
  gap: var(--btn-gap);
  align-items:center;
}

.btn{
  border:1px solid var(--line);
  background: rgba(17,24,39,.03);
  color: var(--text);
  border-radius: 14px;
  cursor:pointer;
}
.btn:hover{ border-color: rgba(17,24,39,.22); }

.icon-btn{
  width: var(--btn-size);
  height: var(--btn-size);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.icon{
  width:20px;
  height:20px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn.primary{
  border-color: rgba(37,99,235,.40);
  background: rgba(37,99,235,.12);
}

.play-btn{
  width: 48px;
  height: 48px;
}
.play-btn .icon{
  width:22px;
  height:22px;
}

.btn.toggle[aria-pressed="true"]{
  color: var(--accent);
  border-color: rgba(37,99,235,.45);
  background: rgba(37,99,235,.08);
}

.time, .vol{
  grid-column: 1 / -1;
  width: var(--ctrl-width);
}

.time{
  display:grid;
  grid-template-columns: 48px 1fr 48px;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-variant-numeric: tabular-nums;
}

.vol{
  display:grid;
  grid-template-columns: var(--btn-size) 1fr;
  align-items:center;
  gap:10px;
  color:var(--muted);
}

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

/* -------------------------
   OST Library
------------------------- */
.library-tools{
  display:flex;
  align-items:center;
  gap:10px;
}

.search{
  width:min(360px, 100%);
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--text);
}

.list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}

.fav-filter{ flex: 0 0 auto; }

.fav-btn{
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  align-self: center;
}

.fav-btn svg{
  width: 20px;
  height: 20px;
  stroke: var(--muted);
  stroke-width: 1.9;
  fill: none;
}

.fav-btn:hover svg{ stroke: var(--accent); }

.fav-btn[aria-pressed="true"] svg{
  stroke: var(--accent);
  fill: var(--accent);
}

.fav-filter[aria-pressed="true"]{
  color: var(--accent);
  border-color: rgba(37,99,235,.45);
  background: rgba(37,99,235,.08);
}

.track{
  border:1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(255,255,255,.92);
}
.track.playing{
  border-color: rgba(37,99,235,.40);
  background: rgba(37,99,235,.06);
}

.track-btn{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  background: transparent;
  border:none;
  color: inherit;
  cursor:pointer;
  text-align:left;
}

.track-left{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width: 0;
}

.track-thumb{
  width:90px;
  height:90px;
  border-radius:18px;
  object-fit: cover;
  border:1px solid var(--line);
  background: rgba(17,24,39,.04);
  flex: 0 0 auto;
}

.track-main{
  display:grid;
  gap:4px;
  min-width:0;
}

.track-title{
  font-family: "Noto Serif JP", serif;
  font-weight:900;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.track-desc{
  color:#ACACAC;
  font-size:13px;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.track-tags{
  color: var(--muted);
  font-size:12px;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.track-meta{
  color:var(--muted);
  font-variant-numeric: tabular-nums;
}

/* -------------------------
   Responsive
------------------------- */
@media (max-width: 860px){
  .player{
    flex-direction: column;
    align-items: stretch;
  }

  .player-right{
    width: 100%;
    flex-basis: auto;
  }

  .time, .vol{ width: 100%; }

  .list{ grid-template-columns: 1fr; }

  .player-left{ min-width: 0; }
}


/* -------------------------
   Dark Mode
------------------------- */
[data-theme="dark"] .search {
  background: rgba(255,255,255,.05);
  color: #d1d5db;
}

[data-theme="dark"] .track {
  background: rgba(255,255,255,.05);
}

[data-theme="dark"] .track.playing {
  background: rgba(37,99,235,.12);
}

[data-theme="dark"] .track-desc {
  color: #9ca3af;
}