@import url("/home-search-polish-v1.css?v=20260815-home-search2");

/* A5R Karaoke V15.8.6 - safe TV refresh UI */
.app-maintenance-card{margin-top:14px}
.app-maintenance-card h3{margin:4px 0 8px;font-size:18px}
.app-maintenance-card p{margin:0 0 12px;line-height:1.45;opacity:.88}
.maintenance-kicker{font-size:11px;font-weight:800;letter-spacing:.08em;opacity:.7}
.app-maintenance-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.app-maintenance-status{margin-top:10px;font-size:12px;opacity:.8;min-height:18px}
.tv-maintenance-compact{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.tv-maintenance-version{font-size:12px;font-weight:800;opacity:.75;margin-right:auto}
.tv-maintenance-compact .btn{padding:8px 10px;font-size:12px}
.tv-maintenance-status{font-size:12px;line-height:1.35;opacity:.82;margin-top:7px;min-height:16px}
@media(max-width:700px){.app-maintenance-actions{grid-template-columns:1fr}}

/* KARAOKE_V7_QUEUE_POLISH_V1
   Visual-only queue redesign. Queue ordering, drag/drop and playback logic untouched.
*/
body.route-hp #page-queue{
  padding-top:10px!important;
}
body.route-hp #page-queue>.section-title{
  margin:0 0 7px!important;
  align-items:center!important;
}
body.route-hp #page-queue>.section-title h2{
  font-size:31px!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
}
body.route-hp #page-queue #clearQueueBtn{
  min-height:43px!important;
  padding:10px 15px!important;
  border-radius:14px!important;
  font-size:12.5px!important;
  color:#dbe6ff!important;
  background:linear-gradient(180deg,rgba(29,47,82,.96),rgba(18,32,60,.96))!important;
  border:1px solid rgba(123,153,225,.16)!important;
}
body.route-hp #page-queue>.helper{
  margin:0 0 16px!important;
  padding:11px 13px!important;
  border-radius:15px!important;
  color:#a9b8d5!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  background:linear-gradient(135deg,rgba(90,68,177,.12),rgba(22,118,170,.08))!important;
  border:1px solid rgba(114,116,231,.13)!important;
}
body.route-hp #remoteQueue.queue-list{
  display:grid!important;
  gap:15px!important;
}
body.route-hp #remoteQueue .queue-item{
  position:relative!important;
  grid-template-columns:42px 112px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  gap:12px 14px!important;
  align-items:center!important;
  min-height:156px!important;
  padding:15px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:
    radial-gradient(250px 150px at 100% 0%,rgba(93,78,255,.12),transparent 62%),
    linear-gradient(155deg,rgba(18,32,60,.99),rgba(9,20,40,.99))!important;
  border:1px solid rgba(108,140,219,.20)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
body.route-hp #remoteQueue .queue-item:first-child{
  border-color:rgba(156,84,255,.44)!important;
  box-shadow:0 17px 39px rgba(0,0,0,.27),0 0 26px rgba(126,73,255,.08)!important;
}
body.route-hp #remoteQueue .queue-number{
  grid-column:1!important;
  grid-row:1!important;
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  font-size:15px!important;
  color:#e5ddff!important;
  background:linear-gradient(145deg,rgba(128,76,255,.34),rgba(43,88,190,.23))!important;
  border:1px solid rgba(154,116,255,.20)!important;
}
body.route-hp #remoteQueue .drag-handle{
  grid-column:1!important;
  grid-row:2!important;
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  font-size:18px!important;
  color:#aebee0!important;
  background:rgba(24,42,76,.94)!important;
  border:1px solid rgba(123,153,225,.13)!important;
}
body.route-hp #remoteQueue .queue-item img{
  grid-column:2!important;
  grid-row:1/3!important;
  width:112px!important;
  height:96px!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  border-radius:16px!important;
  box-shadow:0 11px 24px rgba(0,0,0,.34)!important;
}
body.route-hp #remoteQueue .queue-item .meta{
  grid-column:3!important;
  grid-row:1!important;
  align-self:end!important;
  min-width:0!important;
}
body.route-hp #remoteQueue .queue-item .meta b,
body.route-hp #remoteQueue .queue-item b{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:16px!important;
  line-height:1.28!important;
  font-weight:950!important;
  letter-spacing:-.015em!important;
}
body.route-hp #remoteQueue .queue-item .meta small,
body.route-hp #remoteQueue .queue-item small{
  display:block!important;
  margin-top:7px!important;
  color:#96a7c6!important;
  font-size:11.5px!important;
  line-height:1.35!important;
}
body.route-hp #remoteQueue .queue-item>button:not(.drag-handle),
body.route-hp #remoteQueue .queue-item .btn{
  grid-column:3!important;
  grid-row:2!important;
  align-self:start!important;
  justify-self:stretch!important;
  width:100%!important;
  min-height:43px!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  font-size:12.5px!important;
  font-weight:900!important;
}
body.route-hp #remoteQueue>.empty{
  min-height:180px!important;
  padding:28px 20px!important;
  border-radius:24px!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  color:#aebbd5!important;
  font-size:14px!important;
  line-height:1.5!important;
  background:linear-gradient(180deg,rgba(15,27,53,.78),rgba(8,17,35,.68))!important;
  border:1px dashed rgba(124,143,211,.27)!important;
}
@media(max-width:390px){
  body.route-hp #remoteQueue .queue-item{
    grid-template-columns:40px 100px minmax(0,1fr)!important;
    gap:11px 12px!important;
    min-height:148px!important;
    padding:13px!important;
  }
  body.route-hp #remoteQueue .queue-item img{width:100px!important;height:88px!important}
  body.route-hp #remoteQueue .queue-number,
  body.route-hp #remoteQueue .drag-handle{width:40px!important;height:40px!important}
  body.route-hp #remoteQueue .queue-item .meta b,
  body.route-hp #remoteQueue .queue-item b{font-size:15px!important}
}
@media(max-width:350px){
  body.route-hp #remoteQueue .queue-item{
    grid-template-columns:38px 88px minmax(0,1fr)!important;
    gap:10px!important;
  }
  body.route-hp #remoteQueue .queue-item img{width:88px!important;height:80px!important}
  body.route-hp #remoteQueue .queue-number,
  body.route-hp #remoteQueue .drag-handle{width:38px!important;height:38px!important}
  body.route-hp #page-queue>.section-title h2{font-size:28px!important}
}