/* Shared Modal Styles for APIs Hub */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; transition: opacity 0.3s ease;
}
.modal-overlay.active { display: flex; opacity: 1; }
.modal-card {
    background: rgba(23, 23, 23, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px; width: 400px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.active .modal-card { transform: scale(1); }
.modal-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.modal-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.modal-icon.icon-blue { background: rgba(24, 119, 242, 0.1); color: #1877f2; }
.modal-icon.icon-orange { background: rgba(246, 121, 24, 0.1); color: #f67918; }
.modal-title { font-size: 1.2rem; font-weight: 700; color: white; }
.modal-body { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; margin-bottom: 25px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; }
.btn-modal { padding: 10px 20px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; }
.btn-cancel { background: rgba(255, 255, 255, 0.05); color: white; border-color: rgba(255, 255, 255, 0.1); }
.btn-cancel:hover { background: rgba(255, 255, 255, 0.1); }
.btn-confirm { color: white; }
.btn-confirm.btn-blue { background: #1877f2; box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3); }
.btn-confirm.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(24, 119, 242, 0.4); }
.btn-confirm.btn-orange { background: #f67918; box-shadow: 0 4px 12px rgba(246, 121, 24, 0.3); }
.btn-confirm.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(246, 121, 24, 0.4); }