/* MY99 music player styles (the main stylesheet is precompiled, so new classes live here) */
.my99-minibar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));
  width:min(94vw,440px);z-index:99980;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;
  background:#141722;border:1px solid #2a3142;color:#e2e8f0;font:12px system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.45);
  max-width:calc(100vw - 16px);box-sizing:border-box}
.my99-mb-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;background:#10131c}
.my99-mb-text{flex:1;min-width:0}
.my99-mb-title{font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my99-mb-sub{color:#94a3b8;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my99-mb-prog{height:3px;border-radius:3px;background:#262c3e;margin-top:4px;overflow:hidden}
.my99-mb-fill{height:100%;width:0;background:#5865F2}
.my99-mb-btn{flex:none;width:32px;height:32px;border-radius:8px;border:0;background:#2a3146;color:#fff;cursor:pointer;font-size:13px}
.my99-mb-btn:hover{background:#3a4366}

/* panel pieces */
.my99-seg{display:inline-flex;border:1px solid #2c3348;border-radius:10px;overflow:hidden;flex-wrap:wrap}
.my99-seg button{background:#10131c;color:#94a3b8;font-size:11px;font-weight:700;padding:6px 12px;border:0;cursor:pointer}
.my99-seg button.on{background:#5865F2;color:#fff}
.my99-wrap{position:relative}
.my99-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:min(340px,50vh);overflow:auto;border-radius:12px;
  background:#10131c;border:1px solid #2c3348;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.my99-pop-h{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:11px;color:#94a3b8;
  border-bottom:1px solid #1f2535;position:sticky;top:0;background:#10131c}
.my99-pop-h button{background:none;border:0;color:#94a3b8;cursor:pointer;font-size:14px}
.my99-row{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer}
.my99-row:hover{background:#181d2c}
.my99-row img,.my99-row .ph{width:56px;height:40px;border-radius:6px;object-fit:cover;flex:none;background:#1b2132}
.my99-row .tx{flex:1;min-width:0}
.my99-row .t{color:#fff;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my99-row .s{color:#94a3b8;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my99-row .q{flex:none;background:#2a3146;color:#fff;border:0;border-radius:8px;padding:5px 9px;font-size:11px;font-weight:700;cursor:pointer}
.my99-card{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;background:#10131c;border:1px solid #2c3348;flex-wrap:wrap}
.my99-card img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none;background:#1b2132}
.my99-card .tx{flex:1;min-width:0}
.my99-card .t{color:#fff;font-weight:700;font-size:14px}
.my99-card .s{color:#94a3b8;font-size:11px;margin-top:2px}
.my99-card .err{color:#fb7185;font-size:11px;margin-top:4px}
.my99-card input[type=range]{width:100%;margin-top:6px}
.my99-q{border-radius:12px;background:#10131c;border:1px solid #2c3348;overflow:hidden}
.my99-q .row{display:flex;gap:8px;align-items:center;padding:7px 12px;font-size:12px;color:#e2e8f0;border-bottom:1px solid #1b2132}
.my99-q .row:last-child{border-bottom:0}
.my99-q .row .n{color:#64748b;width:18px;flex:none}
.my99-q .row .tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my99-q .row button{background:none;border:0;color:#94a3b8;cursor:pointer}
.my99-q .empty{padding:12px;font-size:12px;color:#64748b}
.my99-chips{display:flex;flex-wrap:wrap;gap:6px}
.my99-chip{background:#10131c;border:1px solid #2c3348;color:#e2e8f0;font-size:12px;font-weight:700;padding:6px 12px;border-radius:9px;cursor:pointer}
.my99-chip:hover{border-color:#f59e0b}
.my99-chip.on{background:#d97706;border-color:#d97706;color:#fff}
.my99-status{border-radius:12px;padding:10px 12px;font-size:12px;border:1px solid #2c3348;background:#10131c;color:#cbd5e1}
.my99-status.live{border-color:#d97706;color:#fde68a}

@media (max-width: 640px) {
  .my99-card { flex-direction: column; align-items: flex-start; }
  .my99-row { padding: 10px 12px; }
  .my99-pop { max-height: 55vh; }
}