.audio-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a}.audio-row{align-items:center;gap:15px;margin-bottom:15px;display:flex}.play-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:50px;font-size:18px;transition:transform .2s;display:flex}.play-btn:hover{transform:scale(1.05)}.audio-info{flex-shrink:0;min-width:150px}.audio-info h3{color:#fff;margin:0 0 5px;font-size:25px;font-weight:600}.audio-info p{color:#666;margin:0;font-size:14px}.waveform{flex:1;align-items:center;gap:2px;height:50px;display:flex}.duration{color:#666;text-align:right;flex-shrink:0;min-width:45px;font-size:14px;font-weight:500}.flex{align-items:center;gap:15px;display:flex}.progress{flex:1}.progress input[type=range]{-webkit-appearance:none;background:#e0e0e0;border-radius:3px;outline:none;width:100%;height:6px}.progress input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;width:16px;height:16px}.progress input[type=range]::-moz-range-thumb{cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:50%;width:16px;height:16px}.actions{align-items:center;gap:15px;display:flex}.actions span{cursor:pointer;color:#666;font-size:16px;transition:color .2s}.actions span:hover{color:#667eea}.actions i{font-size:18px}.audiowrap{flex-direction:column;gap:20px;display:flex}@media (max-width:768px){.audio-row{flex-wrap:wrap}.waveform{order:3;width:100%}}