/* Shared UI components — byte-identical across all pages. */
/* Components with even a small per-page difference (card padding, modal max-width, button base style, etc.) intentionally stay inline in that page's own <style> block. */

.empty-state { text-align: center; opacity: 0.4; padding: 30px; font-size: 0.9rem; }

tr:hover td { background: rgba(48,53,144,0.04); }

.modal.open { display: flex; }

.modal-content p { color: var(--ink-dim); font-size: 0.85rem; }

.modal-content .btn-primary { background: linear-gradient(135deg, var(--purple), var(--purple-light)); color: white; padding: 9px 30px; box-shadow: 0 8px 18px rgba(48,53,144,0.3); }

.modal-content .btn-success { color: #059669; }

.modal-content .btn-danger { color: #dc2626; }

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

.toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }

.toast {
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 14px 40px rgba(20,20,40,0.18);
    padding: 12px 18px;
    display: flex; align-items: center; gap: 10px;
    font-size: 0.82rem; font-weight: 600; color: var(--ink);
    min-width: 220px; max-width: 380px;
    border-right: 4px solid var(--info);
    animation: toastIn var(--toast-fade) ease, toastOut var(--toast-fade) ease calc(var(--toast-duration) - var(--toast-fade)) forwards;
    pointer-events: auto;
}

.toast .toast-icon { font-size: 1.05rem; flex-shrink: 0; }

.toast.toast-success { border-right-color: var(--success); }

.toast.toast-error { border-right-color: var(--danger); }

.toast.toast-warning { border-right-color: var(--warning); }

.toast.toast-info { border-right-color: var(--info); }

@keyframes toastIn { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

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