.glass { 
    background: var(--surface); 
    border-radius: 16px; 
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px var(--shadow);
}

.song-content { 
    font-family: 'JetBrains Mono', monospace; 
    font-size: 14px; 
    line-height: 1.5; 
    color: var(--text); 
    max-height: 60vh; 
    overflow-y: auto;
    white-space: pre-wrap;
    text-align: left;
}

.dark .chord { 
    color: #fbbf24; 
}
}

.song-content::-webkit-scrollbar { width: 8px; }
.song-content::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 4px; }
.song-content::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
.song-content::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.chord-line { 
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: inherit;
    margin-top: 0.25em;
    margin-bottom: 0;
    color: var(--primary);
}

.dark .chord-line { color: #fbbf24; }

.chorus-line {
    font-weight: 700;
    color: var(--secondary);
    font-style: italic;
}

.dark .chorus-line { color: #a78bfa; }


.dark .mesh-gradient { 
    background: radial-gradient(at 40% 20%, hsla(28,100%,74%,0.1%) 0,transparent 50%),
                radial-gradient(at 80% 0%, hsla(189,100%,56%,0.08%) 0,transparent 50%),
                radial-gradient(at 0% 50%, hsla(355,100%,93%,0.08%) 0,transparent 50%),
                radial-gradient(at 80% 50%, hsla(240,100%,56%,0.06%) 0,transparent 50%),
                radial-gradient(at 0% 100%, hsla(22,100%,77%,0.08%) 0,transparent 50%); 
}

.card-hover { 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

.card-hover:hover { 
    transform: translateY(-6px) scale(1.02); 
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.15);
    border-color: var(--primary);
}

.card-hover:active {
    transform: translateY(-2px) scale(1.01);
}

.recent-item { 
    transition: all 0.25s ease; 
    border: 1px solid var(--border);
    border-radius: 12px;
}

.recent-item:hover { 
    border-color: var(--primary); 
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--shadow);
}

#btn-top { 
    transition: all 0.3s ease; 
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

#btn-top:hover { 
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

::selection { 
    background: rgba(245, 158, 11, 0.4); 
}

.modal-content.maximized { 
    max-width: 95vw !important; 
    max-height: 95vh !important; 
}

.modal-content.maximized .song-content { 
    max-height: 80vh !important; 
}

.modal-header-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #ea580c 100%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, #7c3aed 100%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.skeleton {
    background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.3s ease-out forwards;
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }

.song-card {
    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;
}

@media print {
    body { background: white !important; color: black !important; }
    header, #filters, #sort, #loading, #empty, #toast, .modal-content > div:first-child, #btn-fav, #btn-copy, #btn-txt, #btn-pdf { display: none !important; }
    .modal { position: static !important; }
    .modal-content { 
        max-width: 100% !important; 
        box-shadow: none !important; 
        background: white !important;
    }
    .song-content { 
        max-height: none !important; 
        overflow: visible !important;
        color: black !important;
    }
    .chord { color: #444 !important; text-shadow: none !important; border-bottom-color: #444 !important; }
    #modal { display: block !important; background: white !important; }
    #modal-bg { display: none !important; }
}

@media (max-width: 640px) {
    .song-content { font-size: 14px; line-height: 1.7; }
}