.ux-modal{position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.72);opacity:0;transition:opacity .2s}
.ux-modal[hidden]{display:none!important}
.ux-modal.on{opacity:1}
.ux-box{position:relative;width:100%;max-width:860px;max-height:92vh;overflow:auto;padding:26px 22px 20px;border-radius:18px;background:radial-gradient(120% 80% at 100% 0%,rgba(209,10,17,.3),rgba(0,0,0,0) 55%),#0b0b0c;border:1px solid rgba(255,255,255,.1);color:#ccc;box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:center}
.ux-x{position:absolute;right:12px;top:8px;background:none!important;border:0!important;color:#999!important;font-size:28px;line-height:1;cursor:pointer;padding:4px!important}
.ux-k{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#ff5a60}
.ux-box h3{margin:6px 0 4px;color:#fff;font-size:clamp(20px,3vw,28px)}
.ux-s{margin:0 0 18px;color:#a8a8a8;font-size:14px}
.ux-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;text-align:left}
.ux-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.08);cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.ux-card:hover{transform:translateY(-3px)}
.ux-card.on{border-color:#d10a11;box-shadow:0 10px 28px rgba(209,10,17,.25)}
.ux-card input{position:absolute;opacity:0;pointer-events:none}
.ux-tt{color:#fff;font-weight:700;font-size:15px;margin-top:4px}
.ux-tx{font-size:12.5px;line-height:1.45;color:#a9a9a9}
.ux-pr{font-weight:800;color:#fff;font-size:16px;margin-top:auto}
.ux-ck{position:absolute;top:16px;right:16px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;background:rgba(0,0,0,.65);color:#fff;border:1px solid rgba(255,255,255,.3)}
.ux-card.on .ux-ck{background:#d10a11;border-color:#d10a11}
.ux-card.on .ux-ck::before{content:"\2713  "}
.ux-art{position:relative;height:130px;border-radius:10px;overflow:hidden;background:#151515;display:flex;align-items:center;justify-content:center}
.ux-cv{background:#333 center/cover no-repeat;border-radius:6px}
.ux-motion .ux-cv{width:96px;height:96px;animation:uxz 3s ease-in-out infinite;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.ux-motion .ux-play{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(209,10,17,.92);box-shadow:0 0 18px rgba(209,10,17,.7)}
.ux-motion .ux-play::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.ux-motion i{position:absolute;left:12px;height:2px;border-radius:2px;background:rgba(255,255,255,.35);animation:uxl 1.6s linear infinite}
.ux-motion i:nth-of-type(1){top:30px;width:28px}.ux-motion i:nth-of-type(2){top:62px;width:18px;animation-delay:.4s}.ux-motion i:nth-of-type(3){top:94px;width:24px;animation-delay:.8s}
@keyframes uxz{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(-2deg)}}
@keyframes uxl{0%{transform:translateX(0);opacity:0}30%{opacity:1}100%{transform:translateX(40px);opacity:0}}
.ux-lyrics{flex-direction:column;background:#000}
.ux-yt{display:flex;gap:10px;align-items:center;width:88%;height:96px;padding:8px;border-radius:6px;background:#111;box-sizing:border-box}
.ux-yt .ux-cv{width:72px;height:72px;flex:0 0 72px}
.ux-lines{display:flex;flex-direction:column;gap:8px;flex:1}
.ux-lines b{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.75)}
.ux-lines b:nth-child(2){width:75%;background:#ff4d54}.ux-lines b:nth-child(3){width:55%;opacity:.5}
.ux-ytbar{width:88%;height:4px;margin-top:8px;border-radius:2px;background:linear-gradient(90deg,#ff0000 40%,rgba(255,255,255,.25) 40%)}
.ux-canvas .ux-phone{width:66px;height:118px;border-radius:12px;padding:4px;background:#000;border:2px solid #333;position:relative}
.ux-canvas .ux-cv{width:100%;height:100%;border-radius:8px;animation:uxp 4s ease-in-out infinite}
.ux-canvas .ux-sp{position:absolute;left:8px;right:8px;bottom:10px;height:4px;border-radius:2px;background:#1db954}
@keyframes uxp{0%,100%{background-position:center 20%}50%{background-position:center 80%}}
.ux-banner .ux-wide{position:relative;width:92%;height:70px;border-radius:8px;background:#222 center/cover no-repeat;filter:saturate(1.2);overflow:hidden}
.ux-banner .ux-wide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.2))}
.ux-banner .ux-wide .ux-cv{position:absolute;left:10px;top:9px;width:52px;height:52px;z-index:1;box-shadow:0 4px 12px rgba(0,0,0,.6)}
.ux-act{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:18px}
.ux-go{min-width:260px;padding:14px 22px!important;border:0!important;border-radius:999px!important;background:linear-gradient(90deg,#d10a11,#ff3b42)!important;color:#fff!important;font-weight:800!important;font-size:15px!important;cursor:pointer;box-shadow:0 10px 26px rgba(209,10,17,.45)}
.ux-no{background:none!important;border:0!important;color:#9a9a9a!important;text-decoration:underline;cursor:pointer;font-size:13px!important;padding:4px!important}
@media (max-width:600px){.ux-box{padding:22px 12px 16px}.ux-grid{grid-template-columns:1fr 1fr;gap:8px}.ux-art{height:100px}.ux-tx{display:none}.ux-motion .ux-cv{width:70px;height:70px}.ux-yt .ux-cv{width:54px;height:54px;flex-basis:54px}.ux-yt{height:74px}.ux-canvas .ux-phone{width:50px;height:90px}}