.stui-content__playlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.stui-content__playlist li a{display:block;background:#0f172a;color:#94a3b8;padding:10px 8px;border-radius:6px;font-size:13px;text-align:center;transition:all .3s ease;border:1px solid #334155}
.stui-content__playlist li.active a,.stui-content__playlist li a:hover{background:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 100%);color:#fff;border-color:#38bdf8;box-shadow:0 2px 10px rgba(56,189,248,.2)}
.nav-tabs li a{color:#94a3b8;font-size:14px;transition:all .3s ease;padding:10px 15px;border-radius:6px;display:block}
.nav-tabs li.active a,.nav-tabs li a:hover{color:#38bdf8;background:rgba(56,189,248,.05);border-bottom:2px solid #38bdf8}
.dpplay{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:12px;border-bottom:1px solid #334155}
.dpplay .title{font-size:20px;font-weight:700;color:#e2e8f0;margin:0}
.dpplay .nav-tabs{display:flex;gap:8px;margin:0}
.dpplay .nav-tabs li{margin:0}
.stui-pannel_bd{background:transparent;padding:15px;border-radius:8px;border:1px solid #334155}
.bottom-line{position:relative}
.bottom-line::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#38bdf8 0%,#0ea5e9 100%);border-radius:1px}
@media(max-width:767px){.stui-content__playlist{grid-template-columns:repeat(3,1fr);gap:8px}.stui-content__playlist li a{padding:8px 6px;font-size:12px}.dpplay{flex-direction:column;gap:10px;text-align:center}.dpplay .title{font-size:18px}.dpplay .nav-tabs{flex-wrap:wrap;justify-content:center}}
@media(max-width:480px){.stui-content__playlist{grid-template-columns:repeat(2,1fr);gap:6px}.stui-content__playlist li a{padding:7px 4px;font-size:11px}}