/* --- 3. HISTORY --- */
.header-simple {
    padding: 24px 20px 20px; font-size: 22px; font-weight: 600; color: var(--text);
}
.history-list { padding: 0 20px; display: flex; flex-direction: column; gap: 24px; }
.history-item { 
    display: flex; gap: 16px; align-items: center; 
}
.history-item img {
    width: 80px; height: 106px; object-fit: cover; border-radius: var(--radius-sm);
}
.history-info { flex: 1; }
.history-info h4 {
    font-size: 15px; font-weight: 500; margin-bottom: 8px; color: var(--text);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; word-break: break-word;
}
.progress-text {
    font-size: 12px; color: var(--text-muted); margin-bottom: 8px;
}
.progress-bar { width: 100%; height: 2px; background: #333; border-radius: 2px; }
.progress-fill { height: 100%; background: var(--primary-gradient); border-radius: 2px; }
.btn-play {
    background: #1C1C1E; color: #fff; border: none;
    padding: 6px 12px; font-size: 12px; font-weight: 500; 
    display: flex; align-items: center; gap: 4px; border-radius: var(--radius-full);
}
.btn-play.outline { background: transparent; border: 1px solid #333; color: var(--text-muted); }