.ho-player-pro.v3{
    --bg1:#050a13;--bg2:#081729;--line-color:#1d9bf0;
    position:relative;max-width:1240px;margin:24px auto;padding:24px;border-radius:32px;
    color:#fff;background:
    radial-gradient(circle at 15% 0%, rgba(46,213,115,.26), transparent 26%),
    radial-gradient(circle at 92% 12%, rgba(29,155,240,.28), transparent 34%),
    linear-gradient(145deg,var(--bg1),var(--bg2) 55%,#030712);
    box-shadow:0 32px 95px rgba(0,0,0,.45);
    font-family:Arial,Helvetica,sans-serif;overflow:hidden;
}
.ho-player-pro.v3 *{box-sizing:border-box}
.ho-bg-orbit{position:absolute;inset:-40%;background:conic-gradient(from 180deg,transparent,rgba(255,255,255,.08),transparent,rgba(46,213,115,.08),transparent);animation:hoOrbit 16s linear infinite;opacity:.5;pointer-events:none}
.ho-top{position:relative;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:20px;margin-bottom:18px}
.ho-cover-wrap{position:relative;width:138px;height:138px;border-radius:28px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ho-cover-image{position:absolute;inset:10px;border-radius:22px;background:linear-gradient(145deg,#15233d,#08111f);background-size:cover;background-position:center;opacity:.85}
.ho-cover-image:not(.has-image):before{content:"HO";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:900;color:rgba(255,255,255,.22);letter-spacing:.08em}
.ho-vinyl-big{position:relative;width:104px;height:104px;border-radius:999px;background:repeating-radial-gradient(circle,#050505 0 6px,#151515 7px 8px);box-shadow:0 14px 35px rgba(0,0,0,.5);z-index:2}
.ho-vinyl-big span{position:absolute;inset:33px;border-radius:999px;background:radial-gradient(circle,#fff 0 5px,#ffb020 6px 22px,#111 23px)}
.ho-vinyl-big i{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:99px;background:#111;transform:translate(-50%,-50%)}
.ho-vinyl-big.spinning{animation:hoSpin 1.8s linear infinite}
.ho-brand{display:inline-flex;padding:7px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.07);font-size:12px;letter-spacing:.08em;color:#b9d6ff}
.ho-heading h2{font-size:36px;line-height:1.05;margin:10px 0 6px}
.ho-heading p{margin:0;color:#c6d4ec}
.ho-master-box{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.ho-btn{border:0;border-radius:16px;padding:12px 15px;background:#1d9bf0;color:#fff;font-weight:900;cursor:pointer;box-shadow:0 10px 25px rgba(29,155,240,.22);transition:.15s}
.ho-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.ho-danger{background:#ff3b5c;box-shadow:0 10px 25px rgba(255,59,92,.22)}
.ho-btn kbd,.ho-keyboard-help kbd{background:rgba(255,255,255,.2);border-radius:7px;padding:2px 6px;margin-left:4px}
.ho-master-volume{min-width:190px;padding:12px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13)}
.ho-master-volume span{display:block;font-size:12px;color:#bdd0ef;margin-bottom:6px}
.ho-master-range{width:100%}
.ho-now-playing{position:relative;display:grid;grid-template-columns:1fr 240px 180px;gap:14px;align-items:center;padding:14px;border-radius:22px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);margin-bottom:14px}
.ho-now-title{font-size:16px;font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ho-wave-bars{height:44px;display:flex;align-items:center;gap:4px}
.ho-wave-bars span{width:7px;height:12px;border-radius:99px;background:#2ed573;opacity:.55;animation:hoWave 1s ease-in-out infinite;animation-play-state:paused}
.ho-player-pro.is-playing .ho-wave-bars span{animation-play-state:running}
.ho-wave-bars span:nth-child(2n){animation-delay:.08s;height:22px}
.ho-wave-bars span:nth-child(3n){animation-delay:.16s;height:32px}
.ho-wave-bars span:nth-child(4n){animation-delay:.24s;height:18px}
.ho-now-meter{height:12px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.ho-now-meter b{display:block;width:0;height:100%;background:linear-gradient(90deg,#2ed573,#ffb020,#ff3b5c);transition:width .08s linear}
.ho-status-bar{position:relative;display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.ho-status{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.1);color:#cfe0f7;font-size:13px}
.ho-status strong{color:#fff}
.ho-controls{position:relative;display:grid;grid-template-columns:1.2fr 1fr auto auto;gap:12px;margin:16px 0}
.ho-controls label{font-size:13px;color:#bdd0ef}
.ho-controls select{width:100%;padding:12px;margin-top:6px;border:0;border-radius:14px;background:#fff;color:#111}
.ho-controls select:disabled{opacity:.55;cursor:not-allowed}
.ho-mode-info{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 16px;color:#cbd8ed}
.ho-mode-info strong{font-size:18px;color:#fff}
.ho-mode-info em{font-style:normal;background:rgba(46,213,115,.12);color:#8dffbd;border:1px solid rgba(141,255,189,.22);padding:6px 10px;border-radius:999px;font-size:12px}
.ho-lines{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ho-line{position:relative;display:grid;grid-template-columns:48px 54px 18px 1fr 20px;grid-template-areas:"disc key led title meter" "disc key led meta meter" "disc key led note meter" "wave wave wave wave meter";gap:2px 11px;align-items:center;text-align:left;min-height:112px;padding:15px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:#fff;cursor:pointer;overflow:hidden}
.ho-line:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--line-color)}
.ho-line.ready:hover{background:rgba(255,255,255,.14)}
.ho-line.empty{opacity:.33;cursor:not-allowed;background:rgba(0,0,0,.22)}
.ho-disc{grid-area:disc;width:42px;height:42px;border-radius:50%;background:repeating-radial-gradient(circle,#070707 0 4px,#191919 5px 6px);position:relative;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.ho-disc i{position:absolute;inset:13px;border-radius:50%;background:radial-gradient(circle,#fff 0 3px,var(--line-color) 4px 12px,#111 13px)}
.ho-line.playing .ho-disc{animation:hoSpin 1.2s linear infinite}
.ho-key{grid-area:key;width:50px;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);font-size:24px;font-weight:900}
.ho-led{grid-area:led;width:14px;height:14px;border-radius:999px;background:#3b465c;box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.ho-title{grid-area:title;font-size:17px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ho-meta{grid-area:meta;color:#bdd0ef;font-size:12px}
.ho-note{grid-area:note;color:#96a9c8;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ho-volume-meter{grid-area:meter;align-self:stretch;justify-self:center;width:9px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.ho-volume-meter b{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,#2ed573,#ffb020,#ff3b5c);transition:height .08s linear}
.ho-mini-wave{grid-area:wave;height:18px;display:flex;align-items:end;gap:3px;opacity:.35}
.ho-mini-wave i{display:block;width:5px;height:7px;border-radius:99px;background:var(--line-color);animation:hoMiniWave .75s ease-in-out infinite;animation-play-state:paused}
.ho-mini-wave i:nth-child(2n){height:13px;animation-delay:.08s}
.ho-mini-wave i:nth-child(3n){height:18px;animation-delay:.16s}
.ho-line.playing .ho-mini-wave{opacity:1}
.ho-line.playing .ho-mini-wave i{animation-play-state:running}
.ho-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08)}
.ho-progress i{display:block;width:0;height:100%;background:var(--line-color)}
.ho-line.playing{border-color:var(--line-color);background:linear-gradient(90deg,color-mix(in srgb,var(--line-color),transparent 78%),rgba(255,255,255,.08))}
.ho-line.playing .ho-led{background:var(--line-color);animation:hoPulse .62s infinite;box-shadow:0 0 24px var(--line-color)}
.ho-line.selected{outline:2px solid rgba(255,255,255,.6)}
.ho-keyboard-help{position:relative;display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;color:#bdd0ef;font-size:13px}
.ho-keyboard-help span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);padding:8px 10px;border-radius:999px}
.ho-player-pro.locked .ho-lock{background:#2ed573}
.ho-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#111827;color:#fff;border:1px solid rgba(255,255,255,.15);padding:12px 16px;border-radius:14px;opacity:0;pointer-events:none;z-index:99999;box-shadow:0 20px 50px rgba(0,0,0,.35);transition:.2s}
.ho-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes hoSpin{to{transform:rotate(360deg)}}
@keyframes hoOrbit{to{transform:rotate(360deg)}}
@keyframes hoPulse{0%,100%{transform:scale(.9);opacity:.62}50%{transform:scale(1.28);opacity:1}}
@keyframes hoWave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1.25)}}
@keyframes hoMiniWave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.25)}}
@media(max-width:1040px){
    .ho-top{grid-template-columns:120px 1fr}
    .ho-master-box{grid-column:1/-1;justify-content:flex-start}
    .ho-now-playing{grid-template-columns:1fr}
    .ho-controls{grid-template-columns:1fr 1fr}
    .ho-lines{grid-template-columns:1fr}
}
@media(max-width:600px){
    .ho-player-pro.v3{margin:12px;padding:16px;border-radius:22px}
    .ho-top{grid-template-columns:1fr}
    .ho-cover-wrap{width:120px;height:120px}
    .ho-heading h2{font-size:27px}
    .ho-controls{grid-template-columns:1fr}
    .ho-master-box{display:grid;grid-template-columns:1fr 1fr}
    .ho-master-volume{grid-column:1/-1}
    .ho-line{grid-template-columns:42px 44px 14px 1fr 18px;min-height:110px;padding:12px;border-radius:20px}
    .ho-key{width:42px;height:42px;font-size:20px}
    .ho-disc{width:36px;height:36px}
}