body { font-family: 'Source Sans 3', sans-serif; }
h1, h2, h3, h4 { font-family: 'Bitter', serif; }
.table-container::-webkit-scrollbar { height: 8px; }
.table-container::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
.fade-in { animation: fadeIn 0.4s ease-in forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.comment-card { border-left: 3px solid #1e3a5f; transition: transform 0.2s; }
.comment-card:hover { transform: translateX(4px); }
.comment-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem; flex-shrink: 0; font-family: 'Bitter', serif;
}
.star-rating span { cursor: pointer; font-size: 1.4rem; transition: color 0.15s; }
.star-rating span:hover, .star-rating span.active { color: #f59e0b; }
.star-rating span { color: #d1d5db; }
.footer-link { transition: color 0.2s; text-align: left; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.footer-link:hover { color: #60a5fa; }
.footer-divider { width: 40px; height: 3px; background: #3b82f6; border-radius: 2px; margin: 0.75rem 0 1rem; }
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
    background: #fff; border-radius: 1rem; padding: 2.5rem;
    max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto;
    transform: translateY(20px); transition: transform 0.2s;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
#toast {
    position: fixed; bottom: 2rem; right: 2rem;
    background: #1e293b; color: #fff; padding: 0.9rem 1.5rem;
    border-radius: 0.6rem; font-size: 0.9rem; font-weight: 600;
    transform: translateY(100px); opacity: 0;
    transition: all 0.3s; z-index: 9999;
    display: flex; align-items: center; gap: 0.5rem;
}
#toast.show { transform: translateY(0); opacity: 1; }
#toast.success { border-left: 4px solid #10b981; }
#toast.error { border-left: 4px solid #ef4444; }
input:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }