.ytro-wrap{padding:15px}
/* DJ Dark UI */
#ytro{box-sizing:border-box;
  max-width:900px;
  margin:22px auto;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(34,211,238,.14), transparent 55%),
    linear-gradient(180deg, #0b1020, #070a12);
  color:#e5e7eb;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

#ytro .ytro-head{margin-bottom:12px}
#ytro .ytro-title{
  font-size:22px;
  font-weight:800;
  letter-spacing:.4px;
}
#ytro .ytro-sub{
  margin-top:4px;
  font-size:13px;
  color:rgba(229,231,235,.78);
}

#ytro .row{display:flex;gap:12px;flex-wrap:wrap}
#ytro label{
  display:block;
  font-size:12px;
  margin:12px 0 6px;
  color:rgba(229,231,235,.85);
}

#ytro input, #ytro textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:#e5e7eb;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

#ytro input::placeholder, #ytro textarea::placeholder{color:rgba(229,231,235,.45)}
#ytro input:focus, #ytro textarea:focus{
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}

#ytro .ytro-actions{margin-top:10px; align-items:center}

#ytro button{
  padding:11px 15px;
  border:0;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.2px;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
#ytro button:active{transform: translateY(1px)}
#ytro .primary{
  color:#061018;
  background: linear-gradient(135deg, rgba(34,211,238,1), rgba(168,85,247,1));
  box-shadow: 0 10px 28px rgba(168,85,247,.18);
}
#ytro .primary:hover{filter:brightness(1.05)}
#ytro .secondary{
  color:#e5e7eb;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
#ytro .secondary:hover{filter:brightness(1.08)}

#ytro .hint{font-size:12px;opacity:.9;margin-top:6px;color:rgba(229,231,235,.72)}
#ytro .ok{color:#34d399}
#ytro .err{color:#fb7185}
#ytro .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

#ytro .box{
  margin-top:14px;
  padding:12px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}
#ytro .box-title{font-weight:800; margin-bottom:6px}

#ytro .list{
  max-height:360px;
  overflow:auto;
  margin-top:10px;
  padding-right:4px;
}

#ytro .item{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  margin-bottom:10px;
}
#ytro .item:hover{
  border-color: rgba(34,211,238,.35);
  box-shadow: 0 0 0 3px rgba(34,211,238,.10);
}
#ytro .item .ttl{
  font-weight:800;
  font-size:14px;
  margin-bottom:4px;
}

/* subtle scrollbar */
#ytro .list::-webkit-scrollbar{width:10px}
#ytro .list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:10px}
#ytro .list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}


@media (max-width: 960px){
  #ytro{ margin:15px; }
}

/* ===== MOBILE FIX: sticky selected track ===== */
@media (max-width: 768px){

  /* selected filename input */
  #ytro_filename{
    position: sticky !important;
    top: 8px !important;
    z-index: 99999 !important;

    font-weight: 900 !important;
    font-size: 16px !important;

    background: rgba(10,12,20,0.95) !important;
    backdrop-filter: blur(10px);
  }

  /* order button */
  #ytro_btn_order{
    position: sticky !important;
    top: 60px !important;
    z-index: 99999 !important;
  }

}

/* ===== Sticky Order Panel (Mobile) ===== */
@media (max-width: 768px){

  .ytro-sticky{
    position: sticky;
    top: 8px;
    z-index: 99999;

    background: rgba(10,12,20,0.92);
    backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 10px 10px;
    margin-bottom: 14px;
  }

  .ytro-sticky label{
    font-weight: 900;
  }

  #ytro_filename{
    font-weight: 900;
    font-size: 16px;
  }

  .ytro-sticky-actions{
    margin-top: 10px;
  }

  .ytro-sticky-actions #ytro_btn_order{
    width: auto;
    min-width: 160px;
  }

  .ytro-sticky-actions #ytro_msg{
    font-size: 13px;
    line-height: 1.2;
  }
}

/* ===== Sticky Order Panel (Mobile) ===== */
@media (max-width: 768px){

  .ytro-sticky{
    position: sticky;
    top: 8px;
    z-index: 99999;

    background: rgba(10,12,20,0.92);
    backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 10px 10px;
    margin-bottom: 14px;
  }

  .ytro-sticky label{
    font-weight: 900;
  }

  #ytro_filename{
    font-weight: 900;
    font-size: 16px;
  }

  .ytro-sticky-actions{
    margin-top: 10px;
  }

  .ytro-sticky-actions #ytro_btn_order{
    width: auto;
    min-width: 160px;
  }

  .ytro-sticky-actions #ytro_msg{
    font-size: 13px;
    line-height: 1.2;
  }
}

/* ===== FORCE MOBILE FIXED PANEL (always visible) ===== */
@media (max-width: 768px){

  /* fixed panel */
  .ytro-sticky{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;

    z-index: 999999 !important;

    background: rgba(10,12,20,0.96) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 18px !important;
    padding: 12px !important;

    box-shadow: 0 8px 28px rgba(0,0,0,0.45) !important;
  }

  /* leave space so panel not cover list */
  #ytro{
    padding-bottom: 190px !important;
  }

  #ytro_filename{
    font-weight: 900 !important;
    font-size: 16px !important;
  }

  .ytro-sticky-actions{
    margin-top: 10px !important;
  }

  .ytro-sticky-actions #ytro_btn_order{
    width: 100% !important;
    min-width: 0 !important;
  }

  .ytro-sticky-actions #ytro_msg{
    display: flex !important;
  }
}

/* ===== Fix button alignment ===== */
#ytro_btn_order{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 44px !important;
  padding: 0 18px !important;
  line-height: 44px !important;

  border-radius: 14px !important;
  white-space: nowrap !important;
}

/* center button inside action row */
.ytro-actions{
  justify-content: flex-start !important;
  gap: 12px !important;
}

/* ===== FINAL MOBILE CLEAN FIX (override all) ===== */
@media (max-width: 768px){

  /* panel itself */
  .ytro-sticky{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    z-index: 999999 !important;

    padding: 12px !important;
    border-radius: 18px !important;

    background: rgba(10,12,20,0.96) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 10px 35px rgba(0,0,0,0.55) !important;
  }

  /* make rows vertical, clean spacing */
  .ytro-sticky .row{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  /* selected file input */
  #ytro_filename{
    width: 100% !important;
    height: 44px !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    border-radius: 14px !important;
  }

  /* actions: button full width */
  .ytro-sticky-actions{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  #ytro_btn_order{
    width: 100% !important;
    height: 46px !important;
    line-height: 46px !important;
    border-radius: 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* message below centered */
  #ytro_msg{
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    opacity: 0.95 !important;
  }

  /* add space under main content so panel doesn't cover list */
  #ytro{
    padding-bottom: 210px !important;
  }
}

/* ===== MOBILE: ORDER PANEL ALWAYS VISIBLE ===== */
@media (max-width: 768px){

  /* force show panel */
  .ytro-sticky{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* panel fixed bottom */
  .ytro-sticky{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    z-index: 9999999 !important;
  }

  /* make sure button visible */
  #ytro_btn_order{
    display: flex !important;
    width: 100% !important;
  }

  /* add padding so list not hidden behind fixed panel */
  #ytro{
    padding-bottom: 240px !important;
  }
}

/* ===== FORCE SHOW ORDER BUTTON (override old CSS bugs) ===== */
#ytro_btn_order{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
@media (max-width: 768px){
  #ytro_btn_order{
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
  }
  .ytro-sticky-actions{
    display: flex !important;
  }
}

/* ===== FORCE SHOW ORDER BUTTON (FINAL) ===== */
@media (max-width: 768px){
  #ytro_btn_order{
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ===== ULTIMATE FIX: always show order button ===== */
@media (max-width: 768px){

  .ytro-sticky-actions{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    height: auto !important;
    overflow: visible !important;
  }

  #ytro_btn_order{
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ===== MOBILE: sticky panel ABOVE songs list (NOT fixed bottom) ===== */
@media (max-width: 768px){

  /* cancel any fixed-bottom rules */
  .ytro-sticky{
    position: sticky !important;
    top: 8px !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;

    margin-bottom: 14px !important;
    z-index: 99999 !important;
  }

  /* remove fake space added for fixed panel */
  #ytro{
    padding-bottom: 0 !important;
  }

  /* clean actions layout */
  .ytro-sticky .row{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  #ytro_btn_order{
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    display: flex !important;
    justify-content: center !important;
  }
}