body { font-family: 'Inter', sans-serif; background-image: url("https://i.imgur.com/uphNzEs.jpg"); background-size: cover; background-position: center; background-attachment: fixed; }
.tab-active { border-bottom-color: #3b82f6; color: #3b82f6; font-weight: 600; }
dialog::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); }
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.card-hoverable { border: 1px solid #e5e7eb; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; opacity: 0; animation: fadeIn 0.5s ease-out forwards; }
.card-hoverable:hover { transform: translateY(-8px); box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.banner-image { animation: fadeIn 0.7s ease-out forwards; transition: transform 0.3s ease-in-out; }
.banner-image:hover { transform: scale(1.02); }
button { transition: transform 0.1s ease; } button:active { transform: scale(0.96); }
.match-status-icon { font-size: 1.2em; } .ai-product-row { transition: background-color 0.3s ease; }

/* Scrollbar fino */
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-track { background: #f1f1f1; }
.thin-scroll::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }