/* ====== БАЗА ====== */
*{box-sizing:border-box;}
#prima-player{
  font-family:'Inter', Arial, sans-serif;
  padding:0;
  color:#fff;
}
#prima-player svg{width:100%;height:100%;fill:currentColor;}

.pp-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:24px;
  align-items:stretch;            /* было start — тянем колонки на одну высоту */
}

/* ====== СПИСОК ТРЕКОВ ====== */
.pp-list-wrap{max-height:430px; overflow-y:auto; padding-right:6px; /* Firefox */ scrollbar-width:thin; scrollbar-color:#444 transparent;}

/* Chrome / Safari / Edge */
.pp-list-wrap::-webkit-scrollbar{width:6px;}
.pp-list-wrap::-webkit-scrollbar-track{background:transparent;}
.pp-list-wrap::-webkit-scrollbar-thumb{
  background:#444;border-radius:10px;
}

.pp-list-wrap::-webkit-scrollbar-thumb:hover{background:#555;}
.pp-list{display:flex;flex-direction:column;gap:12px;}
.pp-track{
  display:flex;align-items:center;gap:14px;
  padding:14px;border-radius:10px;cursor:pointer;
  background:#161616;transition:background .2s;
}
.pp-track:hover{background:#1e1e1e;}
.pp-track.active{background:#e8e6f7;}
.pp-track.active .pp-title,
.pp-track.active .pp-source{color:#111;}
.pp-cover{width:48px;height:48px;border-radius:10px;overflow:hidden;flex-shrink:0;}
.pp-cover img{width:100%;height:100%;object-fit:cover;}
.pp-info{min-width:0;}
.pp-title{font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-source{font-size:13px;color:#999;margin-top:2px;}

/* ====== КАРТОЧКА ПЛЕЕРА (ВЕРТИКАЛЬНАЯ) ====== */
.pp-card{
  display:flex;
  flex-direction:column;          /* вертикально */
  align-items:center;             /* по центру */
  text-align:center;
  gap:0;
  background:#161616;border-radius:10px;padding:28px 24px;
}
.pp-card-cover{
  width:200px;height:200px;border-radius:10px;
  object-fit:cover;flex-shrink:0;
}
.pp-card-body{
  width:100%;
  display:flex;flex-direction:column;align-items:center;
  margin-top:18px;
}
.pp-card-title{
  font-size:22px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.pp-card-artist{font-size:16px;color:#999;margin-top:6px;margin-bottom:22px;}

/* ====== КОНТРОЛЫ (столбиком по центру) ====== */
.pp-card-ctrls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  width:100%;
  margin-top:auto;                /* прижимаем контролы вниз */
}
.pp-ctrls-btns{
  order:1;
  display:flex;align-items:center;justify-content:center;gap:24px;
}
.pp-btn{
  width:22px;height:22px;padding:0;border:none;background:none;
  color:#fff;cursor:pointer;transition:opacity .2s;
}
.pp-btn:hover{opacity:.7;}
.pp-btn-play{
  width:48px;height:48px;background:#fff;color:#111;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.pp-btn-play svg{width:16px;height:16px;}
.pp-btn.light{color:#ccc;}

.pp-progress-row{
  order:2;
  display:flex;align-items:center;gap:10px;
  width:100%;
}
.pp-time{font-size:13px;color:#999;flex-shrink:0;min-width:34px;}
.pp-seek{
  flex:1;height:4px;background:#3a3a3a;border-radius:10px;
  cursor:pointer;position:relative;
}
.pp-seek-fill{height:100%;background:#fff;border-radius:10px;width:0;}

/* ====== МОБИЛКА ====== */
@media(max-width:760px){
  .pp-grid{grid-template-columns:1fr;}
  .pp-card{order:-1;}
  .pp-card-cover{width:100%;max-width:260px;height:auto;aspect-ratio:1/1;}
  .pp-card-title{font-size:20px;white-space:normal;}
  .pp-card-artist{margin-bottom:16px;}
  .pp-list-wrap{max-height:280px;}
  .pp-time{min-width:auto;}
}