.para-audio-card{ display:grid; grid-template-columns:88px 1fr; gap:30px; padding:25px; border-radius:8px; background:#222; border:1px solid rgba(255,255,255,.08); box-shadow:0 4px 30px rgba(0,0,0,.15); margin:30px 0; }

.para-audio-cover{ width:88px; height:88px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; }
@media (max-width: 768px){ .para-audio-cover{ display:none; } }
@media (max-width: 768px){ .para-audio-card{ grid-template-columns: 1fr !important; } }


.para-audio-cover-img{ width:100%; height:100%; object-fit:cover; display:block; }

.para-audio-cover-fallback{ width:100%; height:100%; background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); }

.para-audio-main{ min-width:0; display:flex; flex-direction:column; gap:10px; }

.para-audio-title{ font-weight:800; font-size:15px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.para-audio-player audio{ width:100%; display:block; height:0; opacity:0; pointer-events:none; }

.para-audio-controls{ display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; }

.para-audio-btn{ width:42px; height:42px; border-radius:999px; border:3px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); cursor:pointer; position:relative; }

.para-audio-btn:hover{ background:rgba(255,255,255,.10); }

.para-audio-play::before{ content:""; position:absolute; left:14px; top:10px; width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid #fff; opacity:.95; }

.para-audio-play::after{ content:""; position:absolute; left:11px; top:10px; width:4px; height:18px; background:#fff; box-shadow:10px 0 0 #fff; opacity:0; }

.para-audio-card.is-playing .para-audio-play::before{ opacity:0; }

.para-audio-card.is-playing .para-audio-play::after{ opacity:.95; }

.para-audio-progress{ height:12px; border-radius:999px; background:rgba(255,255,255,.2); overflow:hidden; cursor:pointer; }

.para-audio-progress-bar{ height:100%; width:0%; background:var(--para-color-primary, #1E73BE); }

.para-audio-time{ font-size:12px; color:rgba(255,255,255,.75); font-weight:600; white-space:nowrap; }

@media (max-width: 900px){ .para-audio-card{ grid-template-columns:72px 1fr; padding:12px; border-radius:14px; } }

@media (max-width: 900px){ .para-audio-cover{ width:72px; height:72px; border-radius:12px; } }

.para-audio-card.para-audio-light{ background:#ffffff; border:1px solid rgba(0,0,0,.08); box-shadow:0 4px 30px rgba(0,0,0,.10); }

.para-audio-card.para-audio-light .para-audio-cover{ background:rgba(0,0,0,.05); }

.para-audio-card.para-audio-light .para-audio-cover-fallback{ background:linear-gradient(135deg, rgba(0,0,0,.10), rgba(0,0,0,.03)); }

.para-audio-card.para-audio-light .para-audio-title{ color:#111; }

.para-audio-card.para-audio-light .para-audio-btn{ border:3px solid rgba(0,0,0,.14); background:rgba(0,0,0,.04); }

.para-audio-card.para-audio-light .para-audio-btn:hover{ background:rgba(0,0,0,.08); }

.para-audio-card.para-audio-light .para-audio-play::before{ border-left-color:#111; }

.para-audio-card.para-audio-light .para-audio-play::after{ background:#111; box-shadow:10px 0 0 #111; }

.para-audio-card.para-audio-light.is-playing .para-audio-play::before{ opacity:0; }

.para-audio-card.para-audio-light.is-playing .para-audio-play::after{ opacity:.95; }

.para-audio-card.para-audio-light .para-audio-progress{ background:rgba(0,0,0,.12); }

.para-audio-card.para-audio-light .para-audio-progress-bar{ background:var(--para-color-primary, #1E73BE); }

.para-audio-card.para-audio-light .para-audio-time{ color:rgba(0,0,0,.70); }